Shapes with SVG and CSS
✓ Published1🌍 Public
This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled using CSS. It shows the default black fill, explicit fill attributes like `fill="red"`, and inherited properties from a `<g>` element with `fill="blue"` and `stroke="black"`. The `.lines` class applies stroke styling to line and path elements, with a red path using `stroke-linejoin: round`. The visual hierarchy progresses from unstyled shapes to attribute-based coloring, then to CSS class overrides, all within a scaled and translated SVG coordinate system.
AI-generated descriptionA bare minimum HTML page.
See also React Starter.
MIT Licensed