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)

4c62a215bc5844e4bdb787bd8a46303a

Shapes and Colors with SVG and CSS

0 stars1🌍 Public
MMiish84
Last edited Apr 7, 2020
Created on Apr 6, 2020

This example demonstrates a cheerful face built entirely from SVG shapes, including circles, rectangles, and an arc path, all rendered on a yellow background. It uses D3 v5’s `select` and `arc` APIs to construct the geometry, with CSS defining stroke styles. The left eyebrow animates via chained `transition().duration()` calls, moving vertically over four seconds, while other facial features remain static.

AI-generated description

An example including some commonly used features of SVG.