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)

ea6294a4f462409aaf4af0b3de669b19

Shapes and Colors with SVG and CSS

0 stars0🌍 Public
LLuke
Last edited Jul 25, 2020
Created on Jul 25, 2020

This example demonstrates how SVG shapes inherit styling from CSS and group elements, using circles, rectangles, lines, and paths. It shows color applied directly via attributes like `fill="red"` or through CSS classes, with stroke properties controlling line appearance. The graphic uses a scale transform to enlarge a 960×500 SVG canvas, while a nested group applies translation and the `.lines` class sets stroke width and color. Rendering relies on raw SVG elements and external stylesheet rules, with no JavaScript libraries involved.

AI-generated description

An example including some commonly used features of SVG.