This example demonstrates how geometric shapes—circles and rectangles—can be styled with both inline attributes and cascading stylesheets within an SVG canvas. It shows a set of primitives with default fill colors alongside variants using purple, hex-specified, and semi-transparent green fills, while a translated group offsets the same shapes. Stroke properties apply to the shapes and a polyline path via the `.lines` class, with line joins rounded. The SVG rendering approach is plain HTML5 with no JavaScript libraries, using CSS for presentation and a static data structure.