Skip to main content
100%

Shapes with SVG and CSS

✓ Published2🌍 Public
TThomas Seberechts
Last edited Jun 4, 2020
Created on Jun 4, 2020
Forked from HTML Cars Report

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 description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes