This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—in a 960-by-500 SVG canvas, using both presentation attributes and CSS classes to control fill color, stroke, stroke width, and line joins. The code applies scaling and translation transforms to group and reposition the shapes, while the stylesheet sets margins and defines the `.lines` class with distinct stroke properties for the line and path elements. It is a straightforward illustration of vector graphics rendering with raw SVG and CSS, without any JavaScript libraries.