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)

35c46aa8f7e04ae89088b4d175d9c35b

Shapes and Colors with SVG and CSS

0 stars0🌍 Public
NNita
Last edited Aug 6, 2019
Created on Aug 6, 2019

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS rules. It shows circles, rectangles, lines, and a path, with shapes rendered in default black, explicit fill colors like red and green, and a group with a light blue fill and black stroke. The code uses SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, applying CSS classes for stroke styling and the `transform` attribute for scaling and translation. Rendering is handled directly through browser SVG support.

AI-generated description

An example including some commonly used features of SVG.