Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
HHussein Basil
Last edited Jun 17, 2023
Created on Jun 17, 2023
Forked from 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.

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

Fork_of_Fork_of_HTML_Starter

This example displays a set of basic SVG shapes—a circle, a red circle, a green rectangle, a navy line, and a blue path—arranged on a 1000×1000 canvas. The code uses raw HTML and inline SVG elements, including `circle`, `rect`, `line`, and `path`, without any JavaScript libraries. It demonstrates the foundational syntax for static vector graphics, with shapes positioned via absolute coordinates and styled using attributes like `fill` and `stroke`. The rendering is entirely declarative, showing how primitive shapes compose a simple composition directly in the browser.

Aag17@tutanota.de
93% 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
93% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering within a static HTML page, showing circles, rectangles, lines, and paths with various fill colors, strokes, and stroke widths. The code uses raw SVG elements authored directly in the markup, with no external libraries or JavaScript logic. Styling is applied inline via SVG attributes such as `fill`, `stroke`, and `stroke-width`. The rendering approach is purely declarative SVG, providing a minimal introduction to vector graphics structure without interactive features or data binding.

Cchiiii-beginner
93% match