Starter

100%

✓ Published0🌍 Public

Last edited Jun 9, 2021

Created on Jun 9, 2021

This example shows a static SVG composition of three circles: a large yellow circle outlined in black, with two smaller unfilled circles positioned symmetrically on either side. The page uses HTML, CSS, and JavaScript, with the SVG canvas set to 960 by 500 pixels. The code directly defines the shapes and their properties, such as coordinates, radii, fill, and stroke, without any dynamic behavior or data loading. The rendering is plain SVG.

AI-generated description

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

Similar vizzes

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…

STARTER 1

This example shows a static SVG scene with two circles: a large yellow circle with a black outline and a smaller unfilled circle positioned inside it. The visualization is rendered through an HTML page using inline CSS and JavaScript. The code demonstrates basic SVG shapes within a React framework, with the SVG element defined directly in the markup. The JavaScript logs "Hello JavaScript!" to the console, confirming the script execution. The page sets the body margin to zero and hides overflow, using embedded style tags for layout control.

NNeven Dragojlovic

89% match

Loading thumbnail…

Svg starter

This example shows a simple static SVG drawing of a yellow circle with a black outline, flanked by two smaller hollow circles. The page uses raw SVG elements directly in the HTML, styled via CSS for dimensions and overflow. The `circle` tags define radius, center coordinates, fill color, and stroke properties. It demonstrates a minimal React-less setup where SVG rendering is handled by the browser’s native SVG API, with no external JavaScript libraries or data manipulation involved.

Ssouvik

88% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG composition: a large yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically inside it. The visualization demonstrates basic SVG shape rendering within an HTML page. The code uses an SVG element with explicit width and height attributes, styling circle elements with fill, stroke, and stroke-width properties. It imports React and ReactDom from the provided JavaScript file, though the rendering itself relies purely on raw SVG markup in the index.html file, not on React's component system.

MMd Alif

88% match

Loading thumbnail…

Fork of HTML Starter

This example shows a static composition of basic SVG shapes, including two circles and a large rectangle, positioned directly on the page. The circles are drawn without a fill (defaulting to black) and in yellow, while the red rectangle spans the lower portion of the viewport. It uses plain SVG markup within an HTML document, with no external libraries or dynamic data. The rendering approach relies on hardcoded coordinates for each shape, demonstrating how simple geometric elements can be combined without any JavaScript interaction or framework logic.

Ssabelliadriano

87% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple static composition of three circles rendered inside a 600×600 SVG canvas. A large red circle with a thick black stroke is centered on the page, accompanied by two smaller unfilled circles positioned to the upper-left and upper-right. The markup uses plain HTML with inline CSS and JavaScript, and the SVG elements are drawn directly in the document body. The illustration relies solely on fundamental SVG shapes without any interactive behavior or external data.

MMudassar Riaz

87% match

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG composition of two circles, one yellow with a black outline and one unstyled, rendered on a 960 by 500 canvas. The page uses plain HTML with embedded CSS to remove body margins and overflow, and inline SVG elements for rendering. No external JavaScript libraries or data sources are involved; the visualization is a static demonstration of basic SVG shape styling and positioning.

AAriyo Joseph Olamide

87% match

Loading thumbnail…

Fork of HTML Starter Jan Bronkhorst

This example shows a simple static composition of three circles arranged on a yellow background, drawn as SVG elements. The largest circle, centered with a black stroke, acts as a face, while two smaller black circles serve as eyes. The code uses plain SVG tags (`circle`) styled with attributes like `fill`, `stroke`, and `stroke-width`, all embedded directly in the HTML. The page resets body margins and hides overflow via CSS, with no interactive behavior or external JavaScript libraries involved.

JJan Bronkhorst

87% match