Skip to main content
SimilarExport ZIP
100%

svg shapes

✓ Published1🌍 Public
MMartin Casey
Last edited Feb 12, 2021
Created on Feb 12, 2021
Forked from HTML Starter

This example shows a static collection of SVG shapes, including circles, rectangles, lines, and a path, arranged on a 960-by-500 canvas. The rendering uses plain SVG within an HTML page, with CSS controlling stroke and fill colors, including grouped elements via the `<g>` tag and a transform. Shapes are styled individually and through a `.lines` class, demonstrating how SVG attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheets for visual composition.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, paths, and lines, composed within a single SVG canvas. The shapes are styled using both inline presentation attributes and an external CSS stylesheet, which defines a class for the line group to apply stroke properties. The SVG elements are nested within a `<g>` group that applies a scaling and translation transform. The rendering approach uses raw SVG markup within an HTML page, with no JavaScript libraries or data sources involved.

MMatthew Rubino
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example renders a static composition of SVG shapes—circles, rectangles, lines, and a path—on a 960×500 canvas. It demonstrates how CSS classes and inline attributes control visual styling, such as fill colors, stroke widths, and line joins. The SVG is scaled with a transform, and elements are grouped using `<g>` tags to apply shared styling like white fill with green strokes. The code uses raw SVG syntax, including the `d` attribute for the path’s move-to and line-to commands, and a linked stylesheet assigns stroke properties to the line and path groups. No external libraries are used.

Vvic126
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a set of geometric shapes—a circle, a rectangle, a line, and a path—arranged in a 960 by 500 SVG canvas. The SVG elements are wrapped in groups that use transform attributes for scaling and translation, while CSS classes style the line and path with strokes and rounded joins. Rendered through React, the code uses inline SVG with attributes like `fill` and `stroke-width`, and the stylesheet defines the `.lines` group’s properties.

MMo
92% match
Loading thumbnail…

Shapes with SVG amd CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

Ttgma99
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a static collection of SVG shapes—circles, rectangles, lines, and a path—arranged in groups and scaled to fill the viewport. It demonstrates how Cascading Style Sheets (CSS) can style SVG elements, setting stroke colors, widths, and line joins via class selectors. The markup uses raw SVG elements like `<circle>`, `<rect>`, and `<path>`, with inline attributes for fill and translation. No JavaScript libraries are used; the page relies on plain HTML, CSS, and SVG rendering in the browser.

CConnor Trump
92% match
Loading thumbnail…

Shapes with SVG

This example showcases a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged and transformed to illustrate foundational vector graphics concepts. The visualization demonstrates how a single SVG canvas can compose primitive elements, use grouping to apply consistent styling and translations, and employ transforms like scaling and translation to position and resize shapes. The code uses raw SVG markup within a React framework, with styling handled by an external CSS file that defines a class for the line group and modifies stroke attributes on the path. This serves as a minimal demonstration of rendering structured vector graphics directly in a web browser.

EEllednera
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
92% match