This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in a 960×500 viewport with a global scale transform. It shows how inline SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes (`.lines`) style the line and path elements with custom stroke colors and line joins. The code uses raw SVG markup within an HTML document, applying a `transform="scale(1.5)"` to enlarge all shapes and a `translate` to offset a group of pink shapes. No external JavaScript libraries are employed; styling relies entirely on a linked stylesheet.