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)

1748f2276a8d4a7d918213d3439344c4

Shapes and Colors with SVG and CSS

0 stars0🌍 Public
Bbatool22
Last edited Aug 4, 2019
Created on Aug 4, 2019

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes and CSS classes. The first shapes use default black fills, while others apply explicit `fill` and `stroke` properties, with a group inheriting a light-blue fill and black stroke. A `.lines` class sets stroke width, and a nested path rule overrides color, line join, and caps. The graphic is scaled using an SVG `transform`, and the document links to an external stylesheet for presentation.

AI-generated description

An example including some commonly used features of SVG.