CSSVGShowcaseProjectsStep-by-step wizard included
Try it in the editor
Pick an animation below and open it in the editor. A guided wizard will walk you through changing colors, adding keyframes, and exporting.
Diagonal Box
A square glides from the top-left corner to the bottom-right across the canvas.
What you'll do
Select the element on the canvas
Change its fill color in Properties
Add animation keyframes in the Timeline
Export as HTML, SVG, or React
Guided wizard · no experience needed
Beating Circle
A circle grows from nothing then settles with a heartbeat-like pulse.
What you'll do
Select the element on the canvas
Change its fill color in Properties
Add animation keyframes in the Timeline
Export as HTML, SVG, or React
Guided wizard · no experience needed
Want to start from scratch? Open My Projects →