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.
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');
});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.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.
Visit the library website for more information: http://raphaeljs.com https://dmitrybaranovskiy.github.io/raphael/
You need to have NPM installed to build the library.
git clone https://github.com/DmitryBaranovskiy/raphael.gityarn install --frozen-lockfileyarn build-allTo run tests you need to run npx bower install open dev/test/index.html in your browser, there's no automated way right now.
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)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 );
});
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.
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.
FAQs
JavaScript Vector Library
The npm package raphael receives a total of 102,268 weekly downloads. As such, raphael popularity was classified as popular.
We found that raphael demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.