[ Jocelyn Ireson-Paine's Home Page | Explanation and list of animations | References ]

I've been implementing animations using SVG and CSS. To generate complete animations from their components, I wrote an animation composer in R using joins, inspired by notions of compositionality and semiotic morphisms. You can see its output as an animated SVG and an animated GIF.

Some web browsers can't yet handle animated SVGs properly, so will mess up the page. My Firefox gets part of the way through and then loses objects, while Microsoft Edge gives up almost immediately. The best I've found is Google Chrome ( ). This reliably gets all the way through, but does sometimes get stuck loading the images. If that happens, try reloading. If you still can't get a good result, have a look at the animated GIF. All browsers should be able to display that.

When you start browsing, the animation will fill the entire width of the browser window. If the window is very wide, this may lengthen the picture so much that it goes off the bottom of the window. If that happens, narrow the window. Alternatively, play with the pan and zoom control.

It isn't possible to fast-forward or rewind this kind of SVG animation, but you can pause and resume them, using the appropriate buttons. The progress circle to their right indicates how far is left to go. The animation will be paused when it first loads, so press the Play button. Once it gets to the end, it will repeat.

The animation was done to show a colleague, and has some images in that won't mean much to anyone else. It's a warning about working all around the clock because of taking on projects that overrun due to faulty data. If you think in animations, as I often do, the composer is a useful tool for translating your Language Of Thought onto the page.

Acknowledgements to Peter Collingridge for the pan and zoom control and to "" for the progress circle. And to Heydon Pickering for his article in Smashing Magazine linked above, "Creating Cel Animations With SVG".

Other animations

I'm starting a list of other animations below.