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)

8d11bf13db7f4065a4e7ffe9888ddbb1

Shapes with SVG and CSS

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