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
Jjcksnm
Last edited May 13, 2020
Created on May 13, 2020
Forked from HTML Starter

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline SVG attributes and an external CSS stylesheet. It shows how presentational properties like fill, stroke, and stroke-width can be set directly on elements or inherited from parent `<g>` groups and CSS classes. The visualization uses React to render the SVG elements within an HTML page, with the `.lines` class applying green strokes and rounded line joins to paths, while a group transform scales and translates the shapes.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed