Javascript library for creating vector graphics

Raphaël is a nice small JavaScript library that simplifies your work when creating vector graphics on the web. If you ever need to create your own specific chart or an image crop and rotate widget or just a simple image spinner, you can achieve it simply and easily just using this library. This vector graphic JavaScript library uses the SVG W3C recommendation and VML as base for creating graphics. This means that every object you create is also a DOM object so you can attach event handlers to it or simply modify them later. The goal of the library is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

The library currently supports modern browsers like FF3.0+, Google Chrome, Opera 9.5+ and IE6.0+. To make it work you simply need to insert raphael.js into your HTML code and write some basic JavaScript code (see example bellow).

// 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 circle =, 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
circle.attr("stroke", "#fff");

Javascript library for creating vector graphics: Preview

JavaScript library for creating vector graphics

Download Raphael Clock Demo

Related Posts

Let users find links on your page by typing

Web-scraping framework written in Javascript

JavaScript Notifications For Bootstrap Or jQuery UI

JavaScript framework similar to CoffeScript

Leave a Reply