Animations
Tools about specifications
Timing: keySplines - keyTimes -
Parameters: fill freeze or not - calcMode - accumulate - additive - restart -
Animatable attributs for circle - ellipse - rect -
Type values for animateTransform ( flipX and flipY with type="scale" ) -
Examples SMIL animation
Animated text Change text with SMIL animation Spot on text as in Flash
Text moving around circle - along polygon - along Bezier's curve
One-armed bandit with clipPath
One-armed bandit with numbers One-armed bandit with symbols
One-armed bandit with JPEG pictures
Using filters
feComponentTransfer:
To fade in-fade out with two JPEG Volcano
eruption in Reunion Island
feSpeculartLighting: sunset on mountains
and water
feDisplacementMap with circles1 - circles2
- strips - squares
- radialgradient as grid
feMorphology focussing on a picture -
progressive drawing of radialgradient example1
- example2
feOffset focussing on a drawing
feTurbulence: animations for some
parameters
Using gradient Radialgradient example1
Using pattern: objects of pattern - pattern and objects
Morphing Morphing of Bezier curve Text on Bezier curve Paths Polylines
Miscellaneous Soon after party
Examples using javascript to create SMIL animation
Animated text Rolling text horizontal
Progressive drawing and filling
France map JPEG picture converted in SVG
Basic shapes ( rect circle ellipse polygon
polyline line )
Examples using javascript to play animation
Animated text First
collection of six animations using script to create animated tags
Second collection of six animations by script
Third collection of three animations
Miscellaneous Animation
on Bezier's curve
Animations in a zip file ( 93 ko )