Fork of HTML Starter sample

100%

Fork of HTML Starter sample

✓ Published1🌍 Public

Last edited Jan 8, 2026

Created on Jan 8, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

Fork of HTML Starter

This example displays two plain SVG circles, one unfilled and one red, positioned on a blank canvas. It functions as a minimal HTML starter template, demonstrating static SVG shape rendering within a web page. The code uses raw SVG elements directly in an HTML file, with a linked stylesheet that defines a message class, and a JavaScript file that only logs a string to the console. No external libraries are employed; rendering is entirely native SVG.

Eedw.ext@gmail.com

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

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

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

90% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes rendered directly in an HTML page using inline markup and CSS styling. It shows two overlapping circles, a rectangle outline, and a closed path, all positioned within a 1000x500 SVG canvas. The code uses plain SVG elements—circle, rect, and path—with attributes for coordinates, dimensions, and fill colors, plus stroke properties for the rectangle and path. No external libraries or JavaScript are involved; the rendering relies entirely on native SVG support in the browser.

AAwais Saeed

90% match