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)

8531be90885a40d187514f12a6ff3037

Shapes and Colors with SVG and CSS

0 stars2🌍 Public
Aarg04
Last edited Jul 1, 2020
Created on Jul 1, 2020

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

AI-generated description

An example including some commonly used features of SVG.