Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes and Colors with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

7edcdceb5e72415fb59bf1b0fe2da6dd

Shapes and Colors with SVG and CSS

0 stars1🌍 Public
DDuyun Tan
Last edited Feb 24, 2020
Created on Feb 24, 2020

This example demonstrates basic SVG shapes and CSS styling, showing how circles, rectangles, lines, and paths are rendered on a 960x500 canvas. A group element applies shared fill and stroke properties to multiple shapes, while a separate class selector styles paths with rounded line joins and caps. The SVG is scaled using a transform, and colors are set via presentation attributes or CSS rules. The code uses plain SVG APIs within an HTML document, with no external JavaScript libraries.

AI-generated description

An example including some commonly used features of SVG.