This example displays geometric shapes—circles, rectangles, a line, and a path—arranged in a grid, with colors and strokes varied through nested SVG groups. The visualization uses raw SVG elements (circle, rect, line, path) with CSS for page styling and transform attributes for scaling and translation. Fill and stroke properties are set directly on elements or inherited from parent `<g>` groups, demonstrating how SVG’s group hierarchy controls visual inheritance and positioning without additional libraries.