Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Shapes with SVG and CSS

1 star1🌍 Public
SShweta-tech
Last edited Jan 4, 2020
Created on Jan 4, 2020

This example demonstrates how to draw and style basic geometric shapes using SVG elements directly in a React application. It shows two polygon shapes—a triangle and a five-pointed star—rendered with inline SVG attributes, alongside a duplicated version of both shapes wrapped in a `<g>` group with a `transform` to translate them horizontally. The code uses SVG’s native `<polygon>`, `points`, `fill`, and `stroke` attributes, as well as CSS from an external stylesheet to reset page margins and hide overflow. No external visualization libraries are used; rendering relies solely on React’s JSX markup and SVG support.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed