JS Fireworks - in SVG

I've taken another look at last year's Chrome Experiment, JS Fireworks.

This time I've rewritten it to use SVG, whose arrival in IE9 promises to make HTML more interesting. In fact, I'm far more excited about animated SVG than CSS transforms and the fabled HTML5.

I used Keith Wood's jQuery SVG library, which seems quite helpful, and simply replaced the 'draw line' commands with their equivalents.

Canvas is the bitmap to SVG's vector, so while I have to clear the screen and redraw each time in canvas, I merely need to move the lines in SVG. Presumably the number of shapes on screen affects performance, so that was a big difference.

Here's the result: JS-Fireworks in SVG. I've reduced the number of items in each explosion from 30 down to 10. You'll see why.

It runs very quickly in Chrome (Mac), slowly in FireFox, and smoothly, though not excessively quickly, in IE9, which I'm quite excited about. Where's IE9 Experiments?

I haven't tried IE678. But then I haven't tried Mosaic either.

Thanks for reading! I guess you could now share this post on TikTok or something. That'd be cool.
Or if you had any comments, you could find me on Threads.

Published 23 May 2010