raphael

What is raphael?

Raphael is a small JavaScript library that simplifies working with vector graphics on the web. It provides an easy-to-use API for creating and manipulating SVG (Scalable Vector Graphics) elements, making it ideal for creating charts, graphs, and other visualizations.

What are raphael's main functionalities?

Creating Basic Shapes

This feature allows you to create basic shapes like circles, rectangles, and ellipses. The code sample demonstrates how to create a circle with a red fill.

const Raphael = require('raphael');
const paper = Raphael(10, 50, 320, 200);
const circle = paper.circle(50, 40, 10);
circle.attr('fill', '#f00');

Transformations

Raphael allows you to apply transformations to shapes, such as rotation, scaling, and translation. The code sample shows how to rotate a rectangle by 45 degrees.

const Raphael = require('raphael');
const paper = Raphael(10, 50, 320, 200);
const rect = paper.rect(10, 10, 50, 50);
rect.transform('r45');

Animations

You can animate shapes with Raphael. The code sample demonstrates how to animate a circle to increase its radius over 2 seconds.

const Raphael = require('raphael');
const paper = Raphael(10, 50, 320, 200);
const circle = paper.circle(50, 40, 10);
circle.animate({r: 20}, 2000);

Event Handling

Raphael supports event handling, allowing you to add interactivity to your graphics. The code sample shows how to change the fill color of a rectangle when it is clicked.

const Raphael = require('raphael');
const paper = Raphael(10, 50, 320, 200);
const rect = paper.rect(10, 10, 50, 50);
rect.click(function() {
  this.attr('fill', '#00f');
});

Other packages similar to raphael

d3

D3.js is a powerful JavaScript library for creating dynamic and interactive data visualizations using web standards like SVG, HTML, and CSS. Compared to Raphael, D3 offers more advanced data manipulation and binding capabilities, making it suitable for complex visualizations.

paper

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It provides a clean API for creating and manipulating vector graphics, similar to Raphael, but it uses the Canvas element instead of SVG.

README

Raphaël: Cross-browser vector graphics the easy way

Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.github.io/raphael/

Quickstart guide

You need to have NPM installed to build the library.

• git clone https://github.com/DmitryBaranovskiy/raphael.git
• yarn install --frozen-lockfile
• yarn build-all

To run tests you need to run npx bower install open dev/test/index.html in your browser, there's no automated way right now.

Dependencies

• eve

Distributable

All files are UMD compliant.

You can use:

• raphael.min.js (includes eve and it's minified)
• raphael.js (includes eve and it's not minified)
• raphael.no-deps.js (doesn't include eve it's not minified)
• raphael.no-deps.min.js (doesn't include eve it's minified)

Where to start

Check Raphael-boilerplate to see examples of loading.

Raphael can be loaded in a script tag or with AMD:

define([ "path/to/raphael" ], function( Raphael ) {
  console.log( Raphael );
});

Development

Versions will be released as we gather and test new PRs. As there are a lot of browsers being supported it might take a while to accept a PR, we will use the feedback from other users too.

You can use the raphaelTest.html to try things, you need to start a server in the root dir to start testing things there. Something like running python -m SimpleHTTPServer in the raphael directory and hitting http://localhost:8000/dev/raphaelTest.html with the browser. You should run npm run start before this can work.

Collaborators

• tomasAlabes

Related Projects

• graphael
• raphael.boilerplate
• backbone.raphael
• mapael
• snap
• react-raphael

Books

• Learning Raphael JS Vector Graphics
• RaphaelJS
• Instant RaphaelJS Starter

Copyright and license

Copyright © 2008-2013 Dmitry Baranovskiy (http://dmitrybaranovskiy.github.io/raphael/)

Copyright © 2008-2013 Sencha Labs (http://sencha.com)

Licensed under the MIT (http://dmitrybaranovskiy.github.io/raphael/license.html) license.