Shapes and Colors with SVG and CSS
This example demonstrates how SVG elements and CSS can be combined to create layered shapes and colors. It uses raw SVG tags such as `circle`, `rect`, `line`, and `path`, along with `g` transforms for scaling and translation. A stylesheet defines stroke properties, line joins, and caps, while inline attributes set fill colors, stroke widths, and the overall canvas size of 960 by 500 pixels. The rendering is entirely SVG-based, with no JavaScript libraries involved, relying solely on static markup and CSS rules.