Hello World

100%

✓ Published1🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

This example shows a single yellow circle centered in a 960-by-500 SVG canvas. The circle has a black stroke and a fill color of yellow, rendered directly in the HTML body without any JavaScript or CSS interactions. The visualization relies on raw SVG elements, specifically the `<circle>` tag with explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes, demonstrating a minimal static graphic. No external libraries or frameworks are used beyond the native HTML and SVG specifications.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Hello World!

This example displays a single yellow circle centered on a 1000 by 500 SVG canvas. It demonstrates the minimal structure for embedding SVG elements directly in an HTML page without any styling or scripting. The code uses standard SVG tags—`svg` and `circle`—within the body, specifying dimensions and a radius of 100. No JavaScript or external libraries are involved, making it a pure, static markup example. The rendering approach relies entirely on the browser’s built-in SVG support.

SSukanta Saha

93% 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

90% match

Loading thumbnail…

Hello World

A yellow circle with a black outline is centered on a blank page. The example demonstrates a minimal SVG rendering setup, using a fixed 960 by 500 viewport. The HTML page directly embeds an SVG element with a single `<circle>` tag, defining its center position, radius, fill color, and stroke properties. No external libraries are used; the visualization relies entirely on native SVG markup within the HTML document.

RRolf Niggemann

90% match

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

90% 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

89% match

Loading thumbnail…

Hello World

This example shows a simple yellow circle with two smaller black circles drawn on an SVG canvas, depicting a basic smiley face. The visualization is rendered directly in an HTML page using inline SVG elements for the shapes, with React loaded as a script dependency. The code uses static SVG `<circle>` tags with fixed coordinates and dimensions, while the React library is included but only referenced in a console log statement. The page sets its body margins to zero and hides overflow for a clean, full-viewport display.

AAliUrden

89% 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

89% match

Loading thumbnail…

Hello HTML

A single yellow circle with a black outline is centered on a 960 by 500 SVG canvas. The example uses plain HTML, CSS, and JavaScript to demonstrate the minimal structure of a web page, with the circle drawn directly via an SVG `<circle>` element. It sets the body margin to zero and hides overflow, showcasing a basic static rendering approach without any external libraries or data sources.

Jjwadh

89% match