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)

53ee5790ea4641d2abdc612e9b598188

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.