Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Shapes with SVG and CSS

0 stars1🌍 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

Comments

Sign in to join the discussion.

MIT Licensed