Skip to main content
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Yyoghurtx
Last edited Nov 1, 2019
Created on Nov 1, 2019
Forked from Hello VizHub

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—with CSS styling and transforms. It shows how fixed SVG attributes like `fill` and `stroke` interact with stylesheet rules, as seen with the `.lines` group using black strokes and a teal path with rounded joins. The code uses plain SVG elements within an HTML file, leveraging a `scale` transform and nested `translate` groups for positioning. No external libraries are employed; rendering relies entirely on native SVG and CSS.

AI-generated description
MIT Licensed

Similar vizzes