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)

e7fdfe63167e450ea5ecd3bd2e8aedc7

Shapes and Colors with SVG and CSS

0 stars0🌍 Public
Ccharliemok
Last edited Jan 28, 2021
Created on Jan 28, 2021

Four SVG shapes—two circles and two rectangles—demonstrate presentational attributes and CSS styling. The first pair uses default black fill, while the second pair applies inline `fill` colors. A `<g>` group with `transform`, `fill`, `stroke`, and `stroke-width` attributes applies shared styling to both a circle and rectangle, showing inheritance and grouping in SVG. The example uses no JavaScript libraries, relying purely on SVG markup and external CSS from `styles.css`. The `styles.css` file defines global body margins but contains unused `.lines` rules, leaving shape styling entirely attribute-driven.

AI-generated description

An example including some commonly used features of SVG.