Shapes and Colors with SVG and CSS
This example demonstrates how SVG shapes and CSS styling combine to create colorful, scalable graphics in the browser. It shows circles, rectangles, lines, and a path rendered with various fill colors, stroke widths, and coordinate transformations, including scaling and translation. The code uses native SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, styled through an external stylesheet that defines stroke properties and path attributes. A CSS class called `.lines` controls the line and path presentation, highlighting how SVG and CSS work together for web-based visualizations.