🌍 Public
Shapes with SVG and CSS
This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements styled with CSS. It shows how SVG presentation attributes like `fill` and `stroke` can be applied directly to elements or inherited from parent `<g>` groups. The code uses the React framework but primarily relies on raw SVG markup within an HTML file. A CSS class named `.lines` applies stroke properties to line and path elements, with path-specific styling for `stroke-linejoin`. The example illustrates layering, grouping via transforms, and styling inheritance.
AI-generated descriptionA bare minimum HTML page.
See also React Starter.
MIT Licensed
Comments
Sign in to join the discussion.