Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

b5c9cd78905e428b8b06ba88f5d88b3b

Shapes and Colors with SVG and CSS

0 stars2🌍 Public
SShinCai
Last edited Aug 15, 2019
Created on Aug 15, 2019

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It shows how inline presentation attributes like `fill` and `stroke` combine with CSS rules (the `.lines` class setting stroke width and color) to control appearance, including a group with a shared `fill` and `stroke`. The SVG markup uses transforms (`scale` and `translate`) to position and group elements, while the CSS file handles global layout and path-specific stroke properties. The rendering relies solely on native SVG and CSS, with no external libraries.

AI-generated description

An example including some commonly used features of SVG.