Workshop : SVG and Animation (SMIL, script based)

Organizers: Stefan Goessner,  Michel Hirtzler

 Fade-in out between two pictures 

Content: 
- use 'animate' on 'xlink:href' in 'image' element 
- use filters to create effects
- run animations one after the other
 

1) Change 'xlink:href' attribute for 'image'

Example -

2) Create effect with opacity change from 1 to 0 for first picture and from 0 to 1 for second

Example -

3) Use filters to add effect: feDisplacementMap with feTurbulence as grid

Example  - 

4) Use filters to add effect: pixelization with 'filterRes' attribute

Example -   

5) Use filters to add effect: pixelization with feMorphology filter

Example -