svan2d
Scalable Vector Animation in Python
SVG Circus
Ellipse Layout Animation
Let's get started
Line Layout Animation
Transition between two states
Two Step Transition
Transition between three states
The Wave
Transition between multiple states
Timed Keystates
finetuning the animation speed
Keystates Variety
Customized keystates on element level
Attribute Keystates
Attribute level keystates
Easing Variety
Overriding the default easing functions
Easing2D
Advanced position easing
Segment Easing
Customized easing between keystates
Give me a break
Temporarily pausing element animation
Not always
Defining elements for part of the timeline
Layout Element Alignment
Customzing the element rotation in layout
Group Dynamics
Animating multiple elements together
Path Morphing
Smoothly animate from one SVG path to another
Text Path Morphing
Smoothly animate text from one SVG path to another
Layout Showcase
What we came up with so far ...
Simple Morphs
Morphing shapes without holes
Complex Morphs
Morphing shapes with holes
Effects
Gradients - Pattern - Filter
Crossfade
segment animations
Bounce
segment animations
Hold
segment animations
Fade InOut
segment animations
Swap Positions
segment animations
Arc Swap Positions
segment animations
Slide - Hold - Slide
segment animations
Just Slide
segment animations
State collection morphing
M -> N morphing
Embedded state collection morphing
Embedded M -> N morphing
Z Indexing
CSS like z-indexing support
Simple camera zoom
Smoothly zooming in or out of the scene
Camara Zoom Keystates
Creating complex zoom animations
Timeline easing
Apply easing to the entire animation timeline
Group easing
Apply easing to the timeline of a group
Dual Keystate
Instant state switch at a single time point
Scene Composite
Combine scenes into horizontal, vertical, or grid layouts