Skip to main content
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
LLucasj01UK
Last edited May 18, 2020
Created on May 18, 2020
Forked from HTML Cars Report

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 description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes