Animations 

Tools about specifications

Timing: keySplines  -  keyTimes  - 

Parameters:  fill freeze or notcalcMode  -  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 )