🌍 Public
Viewing a saved revision (read-only)
8d11bf13db7f4065a4e7ffe9888ddbb1
Shapes with SVG and CSS
This example demonstrates how to compose basic geometric shapes—circles, rectangles, lines, and paths—within an SVG canvas, styled with CSS. It shows shape grouping via nested `<g>` elements, transforms for scaling and translation, and both inline SVG attributes and CSS classes for controlling fill, stroke, and stroke-width. The code uses plain React rendering with SVG’s native elements, including a `<path>` with a `d` attribute for a custom line. A `styles.css` file applies stroke styling to grouped elements and defines a `.highlighted` class.
AI-generated descriptionA bare minimum HTML page.
See also React Starter.