Shapes and Colors with SVG and CSS
This example demonstrates the use of SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged in a grid-like composition with varied fills and strokes. The code defines SVG elements directly in the HTML, including grouped shapes with shared attributes, and applies visual properties through inline attributes and a separate stylesheet. It uses native SVG API for shape creation, the `<g>` element for grouping and transformations like scaling and translation, and CSS rules for styling strokes and line joins. The rendering approach relies on static SVG markup without external data sources.