Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Apr 8, 2019

Created on Apr 8, 2019

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS and inline attributes. It shows how SVG elements inherit properties like fill and stroke from parent `<g>` groups and how CSS classes target specific elements, such as the `.lines` class, to apply stroke width and line-join styles. The graphic uses a coordinate system transformed by `scale` and `translate` operations to position shapes, rendering directly in the browser via SVG markup within an HTML file.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a coordinate system and scaled up. The shapes have various fills, strokes, and stroke widths, with some styles inherited from a parent group or defined via CSS classes. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path`, with transformations like `scale` and `translate`. The rendering approach uses an inline SVG, with styling applied through an external CSS stylesheet that defines classes like `.lines` for stroke properties.

DDifan Gu

95% match

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates how CSS can style SVG elements. It shows how SVG’s transform attribute scales and translates groups of shapes, while CSS classes like `.lines` apply stroke, stroke-width, and linejoin properties. The example uses raw SVG markup embedded in HTML, with no JavaScript libraries, and the rendering is handled directly by the browser’s SVG engine.

Ccwanca

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example displays basic SVG shapes—circles, rectangles, lines, and a path—arranged with CSS styling and SVG transforms. It shows how fill colors can be applied per shape or inherited by groups, and how stroke properties define the appearance of line elements. The code uses raw SVG markup with a `<g>` element for grouping and scaling/translating, while the external stylesheet applies stroke width and color to the `.lines` class and its path child. The rendering approach is purely SVG, with no JavaScript libraries involved.

GGuruBigData

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths, styled directly via CSS classes and inline attributes. Rendered inside an SVG element on an HTML page, the shapes are grouped using `<g>` elements that apply scaling and translation transforms. The CSS defines visual properties such as stroke color, stroke width, and line joins, with some groups inheriting fill and stroke from parent elements. The visualization makes no use of external JavaScript libraries, relying instead on static SVG markup and cascading styles.

PPenguin-jpg

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a single canvas, with styling applied through an external CSS file. It shows how SVG elements inherit presentation attributes like fill and stroke, and how grouping with `<g>` allows applying uniform properties or transforms, such as scaling and translation, to multiple shapes at once. The visualization uses raw Scalable Vector Graphics markup and CSS selectors, including a `.lines` class that customizes stroke width and color for specific elements, highlighting the interplay between inline attributes and stylesheet rules.

Sssd4

94% match