What is it?
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.
Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
How to use it?
Download and include raphael.js into your HTML page, then use it as simple as:
// Creates canvas 320 × 200 at 10, 50var paper = Raphael(10, 50, 320, 200);// Creates circle at x = 50, y = 40, with radius 10var circle = paper.circle(50, 40, 10);// Sets the fill attribute of the circle to red (#f00)circle.attr("fill", "#f00");// Sets the stroke attribute of the circle to white (#fff)circle.attr("stroke", "#fff");
Demos
- Raphaël Playground
- Reflection
- Image rotation
- Text rotation
- GitHub-a-like impact chart
- GitHub-a-like punch chart
- GitHub-a-like languages chart
- Raphaël Analytics chart
- Polar Clock
- JavaScript Boids
- Dynamic Spinner
- Australian Map
License
Source, Bugs, &c
Project is hosted at GitHub. Download source code or report bugs there.
