Draw logo animation [on hold]

I've seen some sites lately using a kind of draw animation on their logo as an intro to the site. Example: http://demodern.com/

When i look into the code i can see that they have simply used an png strip of the image in all of it's drawing frames, then by javascript they move the background image position giving the animation effect.

My question is, what is a good way to create an image strip like they have there? My guess would be that there is some sort of program that can erase the image frame by frame following a path and then output it as an image strip, but i really got no idea. I guess it could be done manually, but that wouldn't really be as effective as one would like.

Thanks in advance.