Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CCS

Public visualization

Viewing a saved revision (read-only)

53db17b2e29c43cf8402378175aad75c

Shapes with SVG and CCS

0 stars2🌍 Public
GGaurav-Adlakha
Last edited Nov 18, 2020
Created on Nov 18, 2020

This example demonstrates how to draw and style basic SVG shapes—circles, rectangles, lines, and paths—using Cascading Style Sheets (CSS). It showcases default styling, inline presentation attributes, and CSS classes to control fill colors, strokes, and stroke widths on primitive geometric elements. The visualization uses a static SVG canvas with no external data, relying solely on two files: an HTML document and a separate stylesheet. The code exemplifies SVG's native coordinate system and transform groups to position and scale the drawn shapes.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.