Hypnotic animation design svg animation code vector ideas

Feel the power of the SVG...

Animated GIF alternative to the SVG embedded content

Just spent a very enlightening few days finding my way around scalable vector graphics (SVG) code. Incredibly powerful stuff, as I hope the slightly hypnotic animation I created above shows. As more and more browsers support the SVG standard natively, complex, scalable, low impact graphics without the need for Flash will become a reality.

Currently however the tools available to create, edit and animate SVGs are not mature. Paths and designs can be created in a variety of applications including Illustrator and Inkscape, but animation support is almost non-existent. To make the sequence above meant converting the initial vector shapes into SVG and then hand coding the transforms and animations line by line in a text editor.