SVG/SMIL "Dock" Demo

Today, I decided to see what what it'd be like to make an MacOS-style "dock" in SVG, using SMIL <animateTransform> elements to achieve the zooming hover effects.

Once I got that working, I felt like I really should make the icons do something useful when you click them. So, I hooked them up to control an embedded iframe.

Here's the result: SMIL Dock

Screenshot:


Screencast:


(Note that the demo will only do anything useful in a mozilla-central nightly build -- that is, Firefox 3.7 / Gecko 1.9.3 -- since earlier versions don't have support for SMIL.)

SVG Animation in Action: Marek Raida's "SVG Cavern Fighter" Game

Marek Raida has come up with another beautiful demo that shows off the power of SVG. This one's called SVG Cavern Fighter, and it's a classic side-scrolling shoot-em-up type game, with enemies and items that pulse and wiggle. The game logic is written in Javascript, and the enemy/item animations are all done with SMIL.

It looks really great (and it's quite fun to play) in mozilla-central nightly builds! (In earlier Firefox versions, with no SMIL support, the game logic still mostly works, but the enemies and items won't animate.)

Marek's been iterating on this game pretty rapidly, adding new features and fixing bugs every few days. His latest version will always be linked from his blog. Give it a try, and send him any feedback that you might have!