Workshop : SVG and Animation (SMIL, script based)

Organizers: Stefan Goessner,  Michel Hirtzler

 Animations using clipPath element 

Content: 
- use 'animate', 'animateMotion' in 'clipPath'
- use javascript to modify attributes in 'animate' element
- run animations together to get picture in same place
 

1) Circle moving on text using animate on 'cx' of circle

Example - Modify fill-opacity for circle

2) Use 'clipPath' element to highlight text - using animate on 'cx' of circle

Example -

3) Use 'clipPath' element to highlight text - using animateMotion

Example  - 

4) Keep picture given by clipPath in same place adding animateTransform to 'use' element

Example - 

5) Apply to create one-armed bandit with numbers, symbols or pictures.

a) Create one wheel with numbers : example -

b) With 3 wheels : example
c)  modify dur, repeatCount, from and to to give different animations of wheels  ( example )

d) Add javascript to give random result: example -

e) Use symbols : example -

f) Use pictures : example -