How were livicons made?

Question

http://livicons.com/

I am wondering if any one can give me a basic break down on how these icons were made. I see they are SVG and animated with Raphael js, but is each icon drawn on the canvas? Or are the icons actual svg file that are just each animated independently with raphael.js?

I have an icon I want to use of my own, and see if I can animate it my own way similar to those icons. Does any one have a idea or tutorial regarding this technique? I've been reading through raphael js but it looks like it's mainly for drawing a SVG and then animating it, so I am not 100%.

I've been trying to read through the inspector as well, but I can't really understand what each animation is doing (how does it know which part of the icon to manipulate etc.?)

Thanks anyone!

Answer 1

I'm Dee, the LivIcons' author. Just seen the traffic from Stackoverflow on my site's stats :)

The answer is given, but nevertheless, I will try to give a short explanation how I created LivIcons.

The all magic is in Raphael js lib (Special thanks to Dmitry Baranovskiy).

1. These icons are not always SVG, they are VML in IE6-IE8.
2. First step is creating SVG file with path(s) in it for every shape of an icon in any vector software like for ex. Adobe Illustrator.
3. If animation will be not simple (like rotate, move or scale) you need to create additional path(s) for every frame. So your animation will go through these frames from start to end.
4. After that you takes values of these paths for your script.
5. With help of Raphaeljs in one function you create initial state for an icon - Paper.path([pathString]) method, and animate these paths with Element.animate(…) method. This function also catch hover or click events and changing color on hover.

So this is a very short guide. I've been working on first 303 icons during 4 month. If you have time and aspiration you can also try.

Best wishes and good luck!

Dee