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 stars3🌍 Public
AAbishek Amstrong
Last edited Dec 5, 2019
Created on Dec 5, 2019
Forked from Hello VizHub

This example shows how SVG shapes can be styled using both presentation attributes and CSS. The visualization contains circles, rectangles, lines, and a path, all scaled and translated within a single `<svg>` element. The code uses explicit SVG geometry and CSS rules to control visual properties: the `.lines` class applies black strokes and a 10-pixel stroke width to line elements, while the nested `.lines path` rule overrides these with a steelblue stroke and round line joins. Shapes are positioned with `cx`, `cy`, `x`, and `y` attributes, with some groups using `transform` attributes for translation and color inheritance.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed