Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
FFaris Sufyan
Last edited Apr 4, 2021
Created on Apr 4, 2021
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon
95% 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
94% 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
94% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a collection of basic SVG shapes, including a circle, a rectangle with a blue outline, a diagonal line, and a path, all rendered on an HTML5 `<svg>` canvas. The shapes are styled with inline attributes and CSS classes, showing how fundamental vector graphics can be composed. The code combines HTML, CSS, and JavaScript, with the SVG markup embedded directly in the page. It uses the static shape elements `circle`, `rect`, `line`, and `path`, without any dynamic data or interaction.

HHussein Basil
94% match
Loading thumbnail…

Fork of HTML Starter

This example displays a collection of basic SVG shapes—three colored circles, a purple rectangle with a navy outline, intersecting white lines, and a black polyline—arranged on a 960 by 500 canvas. It demonstrates raw SVG markup written directly in HTML, using no external libraries or frameworks despite being forked from a React starter. The rendering relies solely on the browser's native SVG support, with styling applied via a CSS class.

YYagiz Avsar
94% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates hand-coded SVG shapes, including a circle, a rectangle, and a line, all rendered directly within an HTML page. The visualization shows basic geometric primitives with custom styling, using CSS for font presentation and inline SVG attributes for shape properties. The code relies on vanilla JavaScript for a console log statement, while the SVG elements are defined declaratively in the markup. This serves as a minimal starter template, illustrating fundamental SVG rendering without any external libraries or data sources.

LLulu
94% 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
94% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes drawn directly in HTML, featuring a large black circle and a red-outlined rectangle. The page uses inline SVG elements within a basic HTML structure, styled with a CSS class for oversized text. It requires no JavaScript libraries, relying solely on native SVG markup and CSS styling. The visualization serves as a minimal starter template for understanding SVG coordinate systems and basic geometric rendering.

Sskylons@hotmail.com
94% match