Skip to main content
SimilarExport ZIP
100%

Hello HTML

✓ Published0🌍 Public
Cchinlin0514
Last edited Mar 1, 2022
Created on Feb 28, 2022
Forked from HTML Starter

This example displays a single, large yellow circle with a black outline, centered on a dark background within an SVG canvas. The visualization is a minimal demonstration of how to embed vector graphics directly in an HTML page, relying on the native `svg` element for rendering and basic CSS to remove default body margins. It uses the JavaScript and CSS capabilities of HTML to control the visual output, with the circle’s position, size, and colors hard-coded in the markup.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example shows a single yellow circle centered on a 960 by 500 SVG canvas, with a black stroke and a radius of 245 pixels. It is a minimal demonstration of how to embed SVG directly in an HTML page using inline CSS and JavaScript-free markup. The code relies on the SVG `<circle>` element and CSS properties for sizing and stroke styling, with the body margin removed and overflow hidden for a clean, full-viewport look. It illustrates the fundamental building blocks of web-based data visualization without any external libraries.

Eeyejayvee
93% match
Loading thumbnail…

Hello HTML

This example displays a single yellow circle centered on a 960-by-500 SVG canvas, outlined with a thick black stroke. The circle is positioned explicitly via `cx`, `cy`, and `r` attributes inside an inline `<svg>` element. It demonstrates the minimal structure of an HTML page, using embedded CSS to remove margins and hide overflow, while the circle itself is rendered purely with static SVG markup—no JavaScript or external libraries are involved. The code serves as a bare-bones introduction to combining HTML, CSS, and SVG for basic visual output.

LLynnster5
93% match
Loading thumbnail…

Hello HTML

This example displays a single yellow circle centered on a 960 by 500 SVG canvas. The HTML page uses inline CSS to remove the default margin and hide overflow. A plain SVG element is drawn directly in the markup, with the circle’s position and radius set as static attributes. No JavaScript or external libraries are used, relying solely on native SVG rendering within the browser.

Hhukbk
92% 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
92% 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
91% match
Loading thumbnail…

Hello HTML

A yellow circle centered on an SVG canvas demonstrates a minimal HTML page with inline CSS and JavaScript. The page uses raw SVG markup, defining a single circle element with a fill color, rendered at 960 by 500 pixels. The code shows no external libraries, relying solely on native HTML, CSS, and SVG for display.

SSauhaarda Chowdhuri
90% match
Loading thumbnail…

Hello HTML

This example shows a simple target-like graphic composed of two SVG circles: a large yellow circle with a thick black outline and a smaller black circle centered inside it. The visualization is rendered as raw SVG markup embedded directly in an HTML page, with no external JavaScript libraries. The code uses basic CSS within a `<style>` tag to set the page margin to zero and hide overflow, while the SVG element itself specifies a 960 by 500 pixel canvas. The circles are drawn using SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, demonstrating the fundamental building blocks of vector graphics in a browser context.

MMartin Dobbermann
90% match
Loading thumbnail…

Hello HTML

This example shows a single yellow circle with a black outline centered on a blank SVG canvas. It demonstrates the most basic structure of an HTML page with embedded SVG markup, using no external JavaScript libraries or data sources. The circle’s position, size, and colors are hard-coded in the SVG attributes `cx`, `cy`, `r`, `fill`, and `stroke`, while the page’s layout is controlled by inline CSS that removes margins and hides overflow. The rendering is done directly through the browser’s native SVG support, requiring no client-side processing or interaction.

QQichun Dai
90% match