Shapes and Colors with SVG and CSS
This example demonstrates how basic SVG shapes can be styled and transformed using both inline attributes and CSS rules. Circles, rectangles, lines, and paths are arranged with scaling and translation transforms, while colors are applied through fill and stroke properties. The code relies on raw SVG elements and a linked stylesheet to control stroke width, line joins, and caps. A group with the class "lines" inherits black strokes, but its path overrides the stroke color, showing the cascade of CSS specificity.