SVG animation made (pretty) easy with Raphael

Making some circles move with Raphael.js – which generates SVG DOM elements:

(click the background to start/stop the animation)

Raphael is not new. It’s been around for a while, but I first started with it a few months back for some work stuff. I though I might share.

The concept of SVG is great, however, the execution can be pretty daunting. Large XML files with confusing elements and even more confusing means to shade, rotate and animate objects. Granted, this stuff can make sense if you understand the philosophy behind SVG, but its not a simple timeline animation tool. Actually, I am pretty sure there aren’t any decent (if any) SVG animation tools out there.

That is where some neat JS libraries come out to play. Raphael JS is one such library that makes SVG animation (and even UI development) a whole lot more like the familiar grounds of javascript/actionscript2 development. Check, check it out ya’ll.

For my example,

I just created a div called “drawhere”, and included the raphael lib and my custom js file. Easy peasy:

<div id="drawhere"></div>
<script type="text/javascript" src=""></script>


2 Responses to 'SVG animation made (pretty) easy with Raphael'

  1. dubturbo says:

    Thanks for another great article. Where else may anyone get that kind of information in such a perfect method of writing? I’ve a presentation subsequent week, and I am on the search for such info.

  1. […] example of Raphael JS animation from blogger and developer Jonathan […]

Leave a Reply to Raphael JS Animation: Color Transitions | Flarnie Marchán Cancel reply

Your email address will not be published. Required fields are marked *