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
AAndrew Fletcher
Last edited Dec 27, 2019
Created on Dec 27, 2019
Forked from HTML Starter

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS. It shows the same shapes rendered with default black fills, inline `fill` attributes, and inherited styles from a group using `transform`, `stroke`, and `stroke-width` properties. CSS classes like `.lines` and `.lines path` apply stroke colors and line joins, while the `.the-big-picture` group scales the entire scene. The code uses React for rendering, with raw SVG elements and a linked `styles.css` file for styling.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed