Hello HTML!

100%

✓ Published1🌍 Public

Last edited Jun 6, 2021

Created on Jun 6, 2021

This example shows two overlapping SVG circles centered on a 960×500 canvas, creating a target-like visual with a yellow outer ring and a red inner disc, each outlined in black. The circles are rendered using raw SVG elements defined directly in an HTML file, with styling applied through embedded CSS that sets the page margin to zero and hides overflow. The visualization relies solely on static SVG markup with explicit `cx`, `cy`, and `r` attributes, demonstrating fundamental vector graphics without any JavaScript or external libraries.

AI-generated description

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

Similar vizzes

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

92% match

Loading thumbnail…

Welcome to HTML

This example displays a simple SVG composition featuring two overlapping circles, creating a distinct target-like visual on a blank canvas. The larger yellow circle is outlined with a thick black stroke, while a smaller unfilled circle sits at its center, both positioned at the midpoint of the 960x500 viewport. The code demonstrates fundamental HTML structure with embedded CSS for page styling and inline SVG elements, using the circle tag with attributes for positioning, radius, fill, and stroke. It serves as a minimal introduction to web-based graphics rendering.

AACS264

90% match

Loading thumbnail…

SVG test

This example demonstrates a minimal SVG rendering of two overlapping circles on a blank HTML page. It shows how basic vector shapes can be layered, with the first circle drawn in black and the second yellow circle placed directly on top. The page uses plain HTML and CSS, with no JavaScript or external libraries, relying solely on the browser’s native SVG support. The circles share the same center and radius, producing a solid yellow disc that completely obscures the underlying black shape, as defined in the inline markup of the index.html file.

Yyangioe

89% match

Loading thumbnail…

Hello HTML

This example displays two black-outlined circles and a smaller pair of yellow circles on a blank 960 by 500 SVG canvas. The page uses raw HTML and inline CSS to remove default body margins and hide overflow. The circles are drawn using the SVG `circle` element, with coordinates and radius defined directly in the markup. No external libraries are used; the visualization relies on native browser rendering of the SVG.

Ssommerh

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

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

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

88% match

Loading thumbnail…

Hello HTML

This example displays a large yellow circle framed by a black stroke, with two smaller unfilled circles positioned as eyes, all rendered within an SVG canvas. The code leverages React via unpkg's production build and directly uses SVG elements like `circle` and attributes such as `cx`, `cy`, `r`, and `fill`. Static coordinates and stroke styling define the composition, with CSS applied to remove page margins and hide overflow. The visualization demonstrates basic SVG drawing without interactive or dynamic behavior.

GGibbsGundah

88% match