Fork of HTML Starter

100%

Fork of HTML Starter - shapes w/ svg

✓ Published0🌍 Public

Last edited Oct 31, 2022

Created on Oct 31, 2022

This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—inside an SVG canvas. It shows how styling attributes like fill, stroke, and stroke-width apply directly to elements, and how groups (`<g>`) organize shapes with shared transformations and styles. The visualization is built with plain HTML and CSS, using raw SVG syntax without any JavaScript libraries. The SVG viewport is scaled via a transform, and a CSS class controls the appearance of line and path elements.

AI-generated description

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

Similar vizzes

Loading thumbnail…

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

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

92% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a hand-coded SVG composition of basic geometric shapes—circles, rectangles, lines, and a path—styled with CSS and rendered within an HTML page. It shows how SVG elements respond to presentation attributes like fill, stroke, stroke-width, and grouping via `<g>` tags. The code uses no external libraries, relying on native SVG and a small JavaScript console log. The dark background and vibrant shapes highlight how inline styles and CSS classes interact with SVG rendering.

Jjakesilly

92% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes rendered from raw HTML elements, including circles with distinct fill colors, a navy rectangle with a yellow stroke, green lines, and path elements that create both straight segments and a curved teardrop-like form. The visualization uses static SVG markup directly in the document body rather than JavaScript libraries, showcasing how vector graphics can be composed manually. Each shape is defined by hardcoded coordinates and styling attributes, with comments explaining the difference between absolute and relative path commands. The result is a simple educational reference for constructing custom SVG visuals without external frameworks.

TThaverman

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

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

91% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes and transformations within an HTML page. A circle and rect are rendered at their original positions, then duplicated with a vertical translation, blue fill, and red stroke. A group with class "lines" contains a line and a path, with CSS rules applying stroke styling to all line elements and a custom teal color to the path. It uses plain SVG markup with CSS classes and inline attributes, and does not employ JavaScript or external libraries.

Kkaddindr

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

91% match