Hello HTML

100%

✓ Published0🌍 Public

Last edited Aug 1, 2021

Created on Aug 1, 2021

This example shows a single red circle centered on a dark background, created with minimal HTML and SVG markup. The page loads an embedded YouTube video as its primary content, while the circle is drawn using an SVG `<circle>` element inside an `<sgv>` tag—a deliberate typo that still renders in most browsers. The code uses no JavaScript libraries or data sources, relying solely on raw HTML and CSS to set the page margins and hide overflow. The rendering approach is direct SVG painting with a viewBox-sized canvas of 960 by 500 pixels.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello Html

This example presents a minimal HTML page that renders a single red circle inside an SVG element. The page sets the body margin to zero and hides overflow, creating a clean canvas for the graphic. The code uses a basic SVG `<circle>` tag with a radius of 200 and a red fill, positioned within a 500-by-1000 pixel viewport. It demonstrates the foundational interplay of HTML structure, inline CSS styling, and the SVG rendering API. The example serves as a starting point for more complex web-based visualizations.

FFrictionlessman

87% match

Loading thumbnail…

Hello HTML

This example shows a single, unstyled circle centered in an SVG canvas, demonstrating the minimal structure needed to render a shape in a web page. The page relies on plain HTML and inline SVG, with no external libraries or JavaScript. The circle has a radius of 300 pixels and no fill or stroke, making it invisible against the white background. The SVG element is set to 900 by 500 pixels, and the body uses inline CSS to remove margins and hide overflow, ensuring the graphic fills the viewport without scrollbars.

Sspringsaga

85% match

Loading thumbnail…

Hello HTML

This example shows a single yellow circle rendered on a black-bordered SVG canvas, demonstrating a minimal HTML page with embedded CSS and JavaScript. The SVG element is set to 960 by 500 pixels, with the circle centered at (480, 250) and a radius of 245. The page uses plain HTML, CSS for margin and overflow styling, and no external libraries—only native SVG tags such as `<circle>` and attributes like `fill`, `stroke`, and `stroke-width`. The rendering approach is direct SVG markup, with no data source or dynamic behavior beyond static visual output.

Aanamariacv

85% match

Loading thumbnail…

Hello HTML

This example shows a single yellow circle rendered in an SVG container on a blank HTML page. It demonstrates the minimal structure required to embed SVG graphics directly in a web document, using inline SVG elements like `circle` with attributes for radius, position, fill, and stroke. The page uses no external libraries or JavaScript, relying solely on standard HTML and SVG syntax. The circle is centered slightly off-screen on a 960 by 600 canvas, with a black outline and a fixed stroke width.

Aaigioma

84% match

Loading thumbnail…

Hello HTML

A single SVG circle is the sole visual element, demonstrating a minimal HTML page structure. The page contains a 960x500 SVG element with a circle of radius 100, rendered without any styling or positioning attributes. The example serves as a bare-bones introduction to embedding SVG graphics directly within an HTML document, using standard markup with no external libraries or JavaScript. Its purpose is to show the simplest possible static data-viz setup where the rendered output is just an unstyled circle on a blank canvas.

Jjuliaric

84% match

Loading thumbnail…

Hello HTML

This example shows a single yellow circle centered on a black-outlined SVG canvas, demonstrating the minimal structure of an HTML page with embedded SVG graphics. The page uses inline CSS to remove margins and hide overflow, while the SVG element is sized at 960 by 500 pixels. The circle is drawn with a fill color, stroke, and stroke-width, all declared as SVG attributes within the markup. No JavaScript libraries or data sources are involved; the visualization relies solely on static HTML and SVG primitives.

Ffronth

84% match

Loading thumbnail…

Hello HTML

This example shows a single large yellow circle rendered inside an SVG element, representing a minimal HTML page. The circle is centered on a 960 by 500 canvas with a thick black stroke, and two smaller unfilled circles sit inside it as decorative elements. The page uses an inline SVG with standard SVG circle elements, styled via CSS attributes like `fill` and `stroke-width`. It demonstrates a bare-bones HTML document structure, with no external libraries or JavaScript.

GGabriel Urbani

84% match

Loading thumbnail…

Hello HTML

A single static circle appears centered on a 960-by-500 SVG canvas, rendered as the sole graphic on an otherwise blank HTML page. The code sets the page margin to zero and hides overflow, ensuring the circle sits flush against the viewport edge. The example demonstrates the minimal requirements for embedding SVG directly in HTML, using a `<circle>` element with explicit `cx`, `cy`, and `r` attributes. It requires no JavaScript or external libraries, relying solely on the browser’s native SVG support to display the shape.

Kka40

84% match