Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed