Raphael - very cool JavaScript library

Just read about this on Hacker News. Looks quite interesting and potentially useful for doing vector graphics on the Web.

What is Raphaël? Excerpt from the site:

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

The creator of the Raphaël library is Dmitry Baranovskiy who works at Atlassian. (His site gives a "Bandwidth Limit Exceeded" error right now - maybe due to a lot of people accessing it.)

I did a quick search and found these related links:

Painless cross browser vector graphics with Dmitry Baranovskiy’s Raphael Javascript Library, a post on the Web Directions blog.

Announcement of Raphael on Dmitry's Tumblr.

As a quick test, I copied and modified an example from the Raphael site; the code below shows how easy Raphael is for basic use:

Just include the library raphael.js betwen the opening and closing head tags of your HTML; then this code in the HTML body will draw an image with three colored circles diagonally across and down the screen:

 // Creates canvas 320 × 200 at 10, 50
 var paper = Raphael(10, 50, 320, 200);

 // Creates circle at x = 50, y = 40, with radius 10
 var circle1 = paper.circle(20, 20, 15);
 // Sets the fill attribute of the circle to red (#f00)
 circle1.attr("fill", "#f00");
 // Sets the stroke attribute of the circle to white (#fff)
 circle1.attr("stroke", "#fff"); 

 var circle2 = paper.circle(70, 50, 30);
 circle2.attr("fill", "#0f0");
 circle2.attr("stroke", "#fff"); 

 var circle3 = paper.circle(140, 90, 45);
 circle3.attr("fill", "#00f");
 circle3.attr("stroke", "#fff"); 

And here's the resulting output:

Neat, no?

Vasudev Ram