Skip to main content
SimilarExport ZIP
100%

Html starter

✓ Published0🌍 Public
GGarv Pratap Singh
Last edited Jul 14, 2022
Created on Jul 14, 2022
Forked from HTML Starter

This example shows a simple yellow circle with a black stroke centered on a 960 by 500 SVG canvas, accompanied by a smaller unfilled circle. It serves as a minimal demonstration of embedding SVG shapes directly in an HTML page using standard markup. The code defines a `<svg>` element with two `<circle>` elements, specifying their coordinates, radii, fill, and stroke attributes inline. No JavaScript or external libraries are used; the rendering relies entirely on the browser’s native SVG support.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

A single yellow circle with a thick black outline sits centered on a 960 by 500 pixel SVG canvas. The example demonstrates the minimal structure required for an HTML page rendering vector graphics, using raw SVG elements with inline CSS styling. The circle is explicitly positioned via `cx`, `cy`, and `r` attributes, with its fill and stroke set to yellow and black respectively. This serves as a bare-bones starting point, illustrating how a static SVG shape can be embedded directly in an HTML document without any JavaScript or external libraries.

Ssilenusrich
93% 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
92% match
Loading thumbnail…

HTML Starter

This example renders a simple, static SVG composition of three circles on a 960x500 canvas. It demonstrates a bare-bones HTML page that uses inline CSS to remove page margins and JavaScript-free SVG markup for drawing. The code directly employs the SVG `<circle>` element with attributes like `cx`, `cy`, `r`, `fill`, and `stroke` to create a yellow face-like form with two black-outlined eyes. This starter template highlights the foundational structure for embedding vector graphics in a web page without any external libraries.

DDhilip H
91% 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…

Fork of HTML Starter

This example shows a single yellow circle centered on a 960x500 SVG canvas, with a black outline and a stroke width of 10 pixels. The circle is positioned at coordinates (480, 250) with a radius of 200, demonstrating basic SVG shape rendering within an HTML page. The visualization uses plain SVG elements and CSS styling, with the `index.html` file containing the markup directly. The `README.md` references the React Starter as a related example, but this version uses no JavaScript libraries or frameworks, relying solely on static SVG markup.

AAleex94
90% match
Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a yellow circle with two black dots, resembling a simple face, rendered as inline SVG. The visualization uses raw SVG elements—`<circle>` with attributes for radius, position, fill, and stroke—directly embedded in the HTML body. No external libraries are required. The rendering approach relies solely on the browser’s native SVG support, making it a bare-bones starting point for static graphics without JavaScript interaction.

RRui Tong
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
90% 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
89% match