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)

30d9f456b7fa4a5ebfb509ff73adc6a2

Shapes with SVG and CSS

0 stars1🌍 Public
Aavglim3
Last edited Jul 20, 2020
Created on Jul 20, 2020
Forked from HTML Cars Report

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

AI-generated description

A bare minimum HTML page.

See also React Starter.