Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

53b174277b744582bf6050d284e00485

Shapes with SVG and CSS

0 stars1🌍 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.