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)

69858a311eb94f9388d4bd0a6f8889ce

Shapes and Colors with SVG and CSS

0 stars1🌍 Public
FFumiko Toyoda
Last edited Oct 15, 2019
Created on Oct 14, 2019

This example demonstrates how basic SVG shapes can be styled and transformed using both inline attributes and CSS rules. Circles, rectangles, lines, and paths are arranged with scaling and translation transforms, while colors are applied through fill and stroke properties. The code relies on raw SVG elements and a linked stylesheet to control stroke width, line joins, and caps. A group with the class "lines" inherits black strokes, but its path overrides the stroke color, showing the cascade of CSS specificity.

AI-generated description

An example including some commonly used features of SVG.