Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Feb 15, 2026

Created on Feb 15, 2026

This example showcases a static composition of basic geometric shapes rendered as SVG elements. It begins by selecting the SVG canvas and appending a series of shapes, including two rectangles and two circles, each with hardcoded coordinates and fill colors. The visualization relies on the D3.js library (v7) to manipulate the SVG, using methods like `append` and `attr` to define the shapes' properties. The rendering is done entirely through SVG, with no external data source, and the layout is fixed, not responsive to any user interaction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter sample

This example shows a simple static SVG composition containing two filled circles and a stroked rectangle on a 500-by-500 canvas. The HTML structure embeds the shapes directly, using inline SVG elements with explicit color, stroke, and width attributes. No JavaScript-driven interaction or data binding occurs, aside from an index.js file that only logs a message to the console. The rendering relies entirely on built-in SVG support, with optional styling available through a separate stylesheet.

Mmdgousia.begum8@gmail.com

90% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple static composition of SVG shapes, including two outlined circles and two filled rectangles, arranged on a 500 by 500 canvas. The geometric figures are defined directly in the HTML markup, with styling applied through a CSS rule for a message class, though no text is rendered. The visualization uses inline SVG elements within an HTML page, and the circles are styled with a black stroke and no fill, while the rectangles appear with default black fills. No JavaScript libraries or interactive features are present; the code relies purely on native SVG and CSS.

FFaridah Namutebi

90% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG scene composed of fundamental geometric shapes, including two circles, a rectangle, and a line, each styled with distinct fill, stroke, and stroke-width attributes. The visualization uses plain SVG markup within an HTML page, rendered via the browser’s native SVG support. It includes minimal CSS for a large message style, though the primary content is the fixed, non-interactive SVG canvas. The code relies on no external libraries, serving as a bare-bones starter template for understanding basic SVG elements and styling.

Ttnlramakrishna

89% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, and lines—arranged in a static composition on a 960×500 canvas. The code uses plain HTML with inline SVG elements, styled minimally via CSS with zero margins and hidden overflow. Shapes include default black figures, a red circle, a green rectangle, and black lines with varying positions, one of which is duplicated with a translate transform. No JavaScript or data binding is present; it purely showcases SVG rendering capabilities through static markup.

FFaris Sufyan

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

88% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG composition of two overlapping circles and a rectangle, rendered directly in the browser. The HTML page embeds an SVG canvas that draws a green outer circle, a white inner circle, and a black rectangle positioned to the right. The code uses raw SVG elements (`circle` and `rect`) within the `index.html` file, with no JavaScript or external libraries. It serves as a minimal starter template showing how to manually define shapes with fixed pixel coordinates, providing a simple reference for CSS and SVG basics.

Aayushaman1208@gmail.com

88% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—two red and black circles and a blue-outlined rectangle—rendered directly in an HTML page. The markup defines a 960x500 SVG canvas, using basic elements like `<circle>` and `<rect>` with explicit coordinates and fill or stroke attributes. No JavaScript or external libraries are involved; the visualization relies purely on inline SVG within the static `index.html` file. It serves as a minimal, self-contained reference for understanding raw SVG syntax and positioning.

Kkavindubopitiya03@gmail.com

88% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a set of basic SVG shapes—two circles, a rectangle, a line, and a path—arranged on a 960 by 500 canvas. It runs as a static HTML page in the browser, using inline CSS to style text and JavaScript-free markup. The rendering relies entirely on raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, each with explicit coordinates and styling attributes such as fill, stroke, and stroke-width. It serves as a minimal starter for exploring vector graphics without additional libraries.

RRaghuram Bachu

88% match