Shapes with SVG and CSS
This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—using static markup in an HTML file, with styling applied via CSS. The SVG elements are scaled and translated using the `transform` attribute, and CSS classes control stroke colors, widths, and line joins. The code uses the React framework and renders purely through SVG, with no interaction or data binding. It highlights the contrast between inline presentation attributes like `fill` and `stroke` versus CSS rules applied through the `.lines` class, showing a straightforward approach to composing and styling vector graphics.