SVG starter

100%

✓ Published0🌍 Public

Last edited Feb 2, 2022

Created on Feb 2, 2022

This example demonstrates fundamental SVG shape drawing and grouping within a static HTML page. It displays circles, rectangles, and a line, each with explicit position, size, and color attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, and `<line>`, and applies a `<g>` element with a transform to shift a group of shapes and add stroke styling. The source is a single `index.html` file that renders directly to SVG.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example demonstrates a static collection of SVG shapes, including circles and rectangles, arranged in groups and transformed with scaling and translation. The visualization uses raw SVG markup within an HTML page, with elements styled through inline attributes and a linked CSS file that removes margins and hides overflow. The first group applies a uniform scale of 1.5, while the second group shifts shapes downward and applies a blue fill with a black stroke; the third group contains lines and a path drawn in green and black. The code relies solely on native SVG elements and CSS, with no JavaScript libraries or data binding.

NNadya Minkova

89% match

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering on a bare HTML page, including a circle, rectangle, line, and path element. The shapes are grouped with SVG transforms and styled with inline fill and stroke attributes. The code uses vanilla HTML, CSS, and JavaScript without any libraries, logging a message to the browser console. The SVG is drawn with a fixed width and height, and the CSS sets the body font size.

KKanish Malviya

88% match

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering with static, hand-coded data. It shows circles, rectangles, lines, and paths drawn directly in an HTML document, with a black stroke and distinct fill colors like aqua and orange. The visualization uses the SVG API within a simple `index.html` file, applying a scale transformation and a translation to position the elements. No JavaScript libraries are required, as the rendering is purely declarative markup with CSS styling for the overall page layout.

CCornelia

88% match

Loading thumbnail…

SVG starter

This example demonstrates a collection of primitive SVG shapes—circles, rectangles, lines, and a path—arranged in a coordinate grid and styled with CSS. The code uses raw SVG elements within an inline `<svg>` tag, applying transforms like `scale`, `translate`, and `rotate` to position and manipulate the shapes. A CSS file defines stroke widths, colors, and line joins for the graphical elements, while the HTML structure keeps the markup minimal. The visualization serves as a starter template for understanding how to combine SVG geometry with external stylesheet rules.

Qqliu50@fordham.edu

88% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shape drawing and grouping within an HTML page, using raw SVG elements such as `circle`, `rect`, `line`, and `path`. The code shows how attributes like `fill`, `stroke`, `stroke-width`, and transforms (`translate` and `scale`) affect appearance, while CSS classes style the line group and its path. Static coordinates and colors define the composition, with no data binding or interactive behavior. The page also loads a bundled script that sets text content, though the target element is not present in the HTML.

ZZhipeng Xu

88% match

Loading thumbnail…

HTML Starter

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within groups and styled with inline attributes and CSS classes. It shows how HTML structures SVG geometry with coordinates, transforms like scaling and translation, and shape-specific properties such as fill, stroke, and stroke-width. The code uses plain SVG elements directly in an HTML file, with CSS selectors like `.lines` to apply stroke styling. The rendering approach relies on the browser’s SVG engine without JavaScript libraries.

RRafael

88% match

Loading thumbnail…

HTML Starter

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS classes and inline attributes. The shapes are organized into groups using SVG `<g>` elements with `transform` translations, which offset their positions. The `<svg>` element sets the canvas size at 500 by 500 pixels. The code uses React alongside raw SVG markup, with no external data source; it directly defines the geometry of each shape in the HTML. The `.lines` CSS class applies black strokes with a custom width, while the `.lines path` rule colors the path red.

Aadmk840

87% match

Loading thumbnail…

HTML Starter

This example demonstrates basic SVG shape rendering and styling within a minimal HTML page. It displays a collection of circles, rectangles, lines, and paths inside a 500 by 500 canvas, using a scale transform to enlarge the elements and a group with an applied translation for offset positioning. The styling is handled through an external CSS file that sets a yellow page background, black strokes for line groups, and white strokes with round joins for paths. The code uses native SVG elements and CSS selectors to define visual properties.

Ssrwezuva

87% match