A while back I happened to see Evan's minimalist Gmail notifier. One thing that struck me about it was that he not only base64 encoded his icon data, but that he split them into header, palette and footer sections. By swapping out the palettes, he could easily create active and inactive versions of the same icon.

Back in the days when most games were written for 8-bit displays, color palette animation was a common technique for simulating change without having to actually push new pixels to the screen. Out of sheer curiosity, I tried to replicate the same effect in a browser, using data: URLs and JavaScript. The result is this simple animation that is programatically generated by shifting a simple gradient color palette.

The main gotcha that I encountered is that using PNGs isn't really an option. All chunks in a PNG image (including the PLTE one that specifies the color palette) must be followed by a CRC of their data (see section 3.4). If I were to dynamically update the palette, I would have to re-compute the checksum. JavaScript isn't ideal for bit twiddling, and performance would've gotten even worse (the example given just about maxes out the CPU in Firefox/Mac and Safari on a 1.5 GHz G4).

I'm not sure if this technique has any real world value (even ignoring MSIE's lack of support for data: URLs), but it's still fun to see old school techniques such as this resurrected.