I've been thinking of doing something like this for awhile: render my web statistics in on-the-fly SVG graphs via some XSLT. Rob did something like this way back when he first started his blog. I know Mint has the powerful "Fresh View" pepper that uses SVG to display its data visually. Andrew Gregory has had his home-brewed solution for a little while now. But this one just came up in Technorati, it includes the 3 small files you need to tweak. Fun "milk carton" WordPress template, too.
I put my two SVG scripts that I hacked on the last couple weeks into more formal JavaScript library forms so that others can reuse them. Read the rest of this entry ...
Some people didn't like the fact that the snow in my scripted SVG blog header was causing the Firefox CPU load to rail. My excuse was that I was trying to push out some content before the Holiday rush hit and I had to go travelling. Given that the season is now over, I spent about 20 minutes optimizing the script. My apologies to all those CPU fans out there for the last couple weeks...
Other than minor JavaScript tweaking (like removing parsing of strings into floats and declaring variables outside of loops, etc), I decided to just have all snowflakes active at once and to slow down the timer interval. From my side, it looks like it did the trick for Firefox 1.5 but not Opera 9 TP1 (Adobe SVG Viewer was never an issue), but I'll wait to hear from my critics 😉
If you wanted to optimize this even more at the cost of perceived randomness it would be quite simple to do in SVG. I'll probably save another entry for that, but basically it involves adding flakes randomly beforehand to a few static "snow panes" (<g> elements) and then simply sliding each pane down the image at differing speeds and positions (you can add a random drift too each pane's descent too). I think it would still look pretty cool and only require updating the position of (let's say) 4 snow "panes" instead of 50 snow flakes every tick.
First Post of 2006! This is now officially a multi-year blog. 😉
I decided to take my own advice at the bottom of this article and update my JavaScript dragging technique to be more generic and library-like so that it's theoretically easy to make SVG entities draggable. It's done now and you can see the results on this demo (works only in Firefox 1.5 and Internet Explorer + Adobe SVG Viewer). I've included some nested objects so you can see how they move when they are dragged.
I decided to get a little festive on my blog. If you have a browser that supports SVG you should see what I mean. It should be fun for other special occasions too (think Google's graphic).
Have A Great Holiday Season!