Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

SVG shapes and animation sandbox

Public visualization

Viewing a saved revision (read-only)

a136cc6df62c47389e8952e144544003

SVG shapes and animation sandbox

9 stars16🌍 Public
KKirsten Lund
Last edited Mar 9, 2021
Created on Mar 6, 2021
Forked from SVG Fundamentals

A playful sandbox demonstrates how SVG shapes and animation can compose a simple landscape. The viewport is filled with a sequence of horizontal `<rect>` elements using a palette of blue CSS color names to create a stylized sky. A pink flower is constructed from positioned `<circle>` and `<path>` elements, while two groups of cloud shapes (one light, one dark) are defined as reusable `<g>` elements. The clouds are set in motion using the SVG `<animateMotion>` element, which moves them along a defined cubic Bézier path with different durations and repeat counts, creating a gentle, looping drift.

AI-generated description

SVG shapes and animation sandbox.