Shapes with SVG and CSS
This example demonstrates how SVG primitives can be styled and combined with CSS to create layered geometric compositions. The visualization shows overlapping circles, grouped shapes with transforms, and polygonal line paths rendered on a 960 by 500 canvas. It uses raw SVG elements like `<circle>`, `<line>`, and `<path>`, along with CSS rules that define stroke colors, widths, and line joins. The code applies scaling and translation transforms to demonstrate coordinate manipulation, making it a minimal but complete illustration of declarative vector graphics in the browser.