This example demonstrates basic SVG shape rendering and styling through direct manipulation of SVG elements. A large green rectangle with a black border and a red circle are drawn, while white grid lines divide the canvas vertically. The code uses raw SVG markup with CSS styling, including a `rect:hover` rule that transitions the rectangle’s fill color to blue and thickens its stroke over 1 second. The example highlights fundamental SVG attributes like `x`, `y`, `cx`, `cy`, `width`, and `height` for positioning and sizing shapes.