Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Viewing a saved revision (read-only)

03cd50d9970e4966893b9fd1de548463

Shapes with SVG and CSS

0 stars2🌍 Public
AAdeola Oni
Last edited Apr 1, 2020
Created on Apr 1, 2020
Forked from HTML Starter

This example demonstrates how SVG shapes can be styled and grouped using both inline attributes and Cascading Style Sheets (CSS). It renders circles, rectangles, a line, and a path directly within an SVG element. The shapes use inline properties like `fill`, `stroke`, and `stroke-width`, while the `.lines` CSS class applies red strokes to the line and path elements. The `path` is further styled with a green stroke and rounded line joins via `.lines path`, showing how SVG presentation attributes can complement and override CSS rules.

AI-generated description