Shapes with SVG and CSS
This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline SVG attributes. It shows uncolored shapes in a top group, colored fills in a second group, a translated group with stroke and fill, and a separate group of lines with black strokes and rounded joins. The code uses raw SVG elements within an HTML document, with CSS classes like `.lines` to apply stroke properties. A single SVG `g` transform scales the entire visualization.