This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be styled and positioned within an SVG canvas, using both inline presentation attributes and external CSS rules. It shows grouped elements under a `<g>` tag inheriting shared fill and stroke properties, while individual shapes override these with explicit `fill` colors. The code relies purely on native SVG elements and CSS (via a stylesheet defining a `.lines` class) without any JavaScript libraries. The rendering approach is static SVG, with shapes placed at fixed coordinates to illustrate foundational vector-graphics composition.