Shapes and Colors with SVG and CSS
This example demonstrates foundational SVG shapes and styling through direct markup and CSS. Circles, rectangles, lines, and a path are arranged with basic attributes like `cx`, `cy`, `r`, `x`, and `y`, while CSS classes control stroke color, width, and line join styles. A `<g>` element groups shapes to apply shared fill and stroke properties, and another group uses the `transform` attribute to translate and scale the entire composition. The rendering is purely client-side SVG, with styling split between inline presentation attributes and an external `styles.css` stylesheet.