Blobular: An SVG experiment
18 April 2007
» Blobular: SVG blobiness «
(Firefox and Opera only)
SVG (Scalable Vector Graphics) has long been a tantalising mirage on the horizon for a lot of web developers. The promise of a fully-featured, open source markup format for vector graphics on the web can make your mouth water (if you know your cubic splines from your quadratics). However, the reality is a poor substitute for the dream.
I remember promising Dean Jackson at Web Essentials 05 that once Firefox natively supported SVG, I'd try and do something with it. Well, Firefox has supported SVG since version 1.5 (albeit in a rather limited fashion), so it was about time to make good on my promise to Dino.
At Webjam 2 I presented a visualisation engine for the SMS voting system they used on the night. It was based on blobs. Because the Webjammers wanted an anonymous voting system, I figured that using the area of the blobs would give people an idea of the number of votes in play – as well as their proportionate distribution – without giving away who was actually winning. Throw in some funky animation and you've got yourself a neat little screensaver.
That description doesn't mention the nightmarish trigonometry that I had to excavate from the recessed of my brain in order to figure out all the intersecting circles, smooth curves, areas, angles and transformations.
I happen to think that the voting system's pretty cool (it animates votes arriving in REAL-TIME when people SMS in!!!), but it doesn't have much appeal outside of a Webjam event. So, I thought I'd adapt the blob engine for something a bit more fun.
And that's how I ended up with Blobular. Create mini bloblets, move them around, merge them together, and make pretty blob shapes, with a couple of customisable variables. It's your own malleable lava lamp.
Because most of the animation in Blobular is user-driven, i.e. you're dragging blobs around and making them separate by hand, the performance of the SVG actually feels a lot better than the computer-driven animation of the voting system. I'm not sure whether this is just a pereceived improvement, or whether Firefox actually does handle event-driven animation better than setTimeout. At any rate, it's probably a good sign that there'll be less splash screens and more interface goodness where SVG is concerned.
Safari does support SVG if it's in its own document, but it doesn't currently support inline SVG on an XHTML page (which I've used here), so Blobular won't work in that browser. It's restricted to Firefox 1.5+ and Opera 9+. (Surprise! I only had to spend 10 minutes getting it to work in Opera!)
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout