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)

f6ab8999c3a343e8ae3bcad2d6b851f8

Shapes with SVG and CSS

0 stars1🌍 Public
Fffrabal
Last edited Mar 25, 2020
Created on Mar 25, 2020
Forked from HTML Cars Report

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using inline attributes and CSS classes. It shows shapes painted with default colors, explicit fills like red and green, and a group inheriting shared fill and stroke properties. A CSS class applies thick black strokes to lines and a purple stroke with rounded joins to paths. The code uses plain SVG elements with `transform` for scaling and translation, plus CSS from `styles.css` for styling.

AI-generated description

React Starter code.