Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG & CSS

Public visualization

Viewing a saved revision (read-only)

98e6a5d7442941b39e5d9c68ce29dc03

Shapes with SVG & CSS

0 stars1🌍 Public
WWin
Last edited Jun 9, 2020
Created on Jun 9, 2020
Forked from HTML Starter

This example demonstrates how to create and style basic geometric shapes using SVG elements within a React-based visualization. It shows circles, rectangles, lines, and paths arranged in groups, with CSS classes controlling stroke properties and colors. The code uses raw SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with transform attributes for scaling and translation. A linked stylesheet applies visual styling, including stroke width, line joins, and fill colors, while the SVG viewport is set to 960 by 500 pixels.

AI-generated description

A bare minimum HTML page.

See also React Starter.