Skip to main content
100%

1# tutorial

✓ Published0🌍 Public
Aaduo122
Last edited Oct 19, 2017
Created on Oct 19, 2017

This example demonstrates a simple HTML page styled with CSS and enhanced with a static SVG circle, serving as an introductory tutorial. It shows how to apply inline styles, ID selectors, and class-based styling to text elements, while embedding an SVG shape directly in the markup. The code uses no JavaScript or D3.js APIs, relying solely on raw SVG elements and CSS for rendering. A red circle with a custom stroke is drawn inside an SVG container, while the page displays styled paragraphs and a header, illustrating basic web visualization and styling techniques.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/aduo122/'>aduo122</a>'s block: <a href='http://bl.ocks.org/aduo122/37b36adcddbb472995ed94bb67315959'>1# tutorial</a>

mit Licensed

Similar vizzes

Loading thumbnail…

1# tutorial

This example demonstrates a minimal D3.js tutorial page that mixes styled HTML text with a basic SVG graphic. It shows a large orange number inside a red-styled paragraph, a second paragraph labeling “d3 tutorial,” and a red circle drawn with SVG attributes for position, radius, stroke, and fill. The page uses plain CSS for typography and class-based styling, while the circle is created directly in markup rather than through D3 selections. The code relies on standard SVG elements and CSS, with no data binding or interactive behavior beyond static rendering.

Aaduo122
90% match
Loading thumbnail…

AEC_htlm_Workshop

This example demonstrates a minimal HTML page with styled text and a single SVG circle, rendered directly in the browser. It shows how CSS classes and inline styles control typography, while an SVG element draws a red circle with a black stroke. The page uses plain HTML, CSS, and SVG markup—no external libraries—with a 300x300 viewBox for the circle. The code includes a header, paragraphs, and comments, but no interactive behavior or data-driven visualization is present.

VVyrwn
83% match
Loading thumbnail…

1

A single red circle is drawn inside an SVG element on a bare-bones HTML page, demonstrating the foundational relationship between CSS, JavaScript, and SVG rendering. The circle is positioned at coordinates (50, 50) with a radius of 40, and its fill color is set to red via a CSS rule that targets all SVG elements. This example uses plain HTML and inline CSS, with no JavaScript or external libraries, serving as a minimal showcase of static vector graphics in the browser.

Sshayan yadegaridehkordi
81% match
Loading thumbnail…

html_basics

This example demonstrates basic HTML and CSS styling for text and SVG shapes, with a primary focus on the cascade and specificity of CSS selectors. The page contains two paragraphs: the first is styled with a larger font size and pink color via an ID and class selector, while the second uses a plain element selector. The visualization also includes a yellow circle drawn with an inline SVG element, using standard SVG attributes for positioning and appearance. The code relies on native web APIs—HTML, CSS, and SVG—without external JavaScript libraries, showcasing fundamental front-end techniques.

BBillyBHWong
81% match
Loading thumbnail…

HTML Starter

This example displays a simple HTML page with a green circle and a red rectangle rendered inside an SVG element. The page uses plain HTML and inline CSS to center the content and set a large font size. The SVG shapes are drawn directly in the markup with `circle` and `rect` elements, demonstrating basic static vector graphics without any JavaScript libraries or data sources. The code serves as a minimal starting point for HTML and SVG visualization projects.

Ggoshashi
81% match
Loading thumbnail…

First HTML

This example displays a single brown circle centered on a purple-outlined SVG canvas, demonstrating the foundational structure of an HTML page that integrates CSS and inline SVG markup. The circle is drawn directly using the SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes, and styled through SVG presentation attributes for fill and stroke. No JavaScript or external libraries are involved; the page relies solely on native HTML, CSS for margin and overflow reset, and JavaScript’s capability to render SVG within the browser, fulfilling the bare-minimum setup for a web-based visualization.

CClioTang
80% match
Loading thumbnail…

SVG fundamentals2

This example juxtaposes plain HTML text with a basic SVG circle to illustrate fundamental differences between the two rendering approaches. The page uses CSS to style a large “Hello HTML!” message, while a separate inline SVG element draws a single black circle at coordinates (50, 50) with a radius of 50. No JavaScript or data binding is involved; the visualization relies purely on static markup within the `index.html` file. It serves as a minimal demonstration of SVG’s coordinate system and shape syntax for gallery viewers.

Tthe-straight-curve
80% match
Loading thumbnail…

Hello HTML

This example demonstrates an HTML page that renders a single circle using inline SVG, with no styling or fill applied. The core of the work is the raw `index.html` file, which contains a minimal document structure with an `<svg>` element housing a `<circle>` with a radius of 100 units, displayed at the default top-left position. It relies solely on the native HTML and SVG APIs, without any external JavaScript libraries or data sources. The example serves as a bare-bones starting point for embedding vector graphics in a webpage.

Hh3li0x
80% match