dmitrybaranovskiy/raphael

★ 11,286JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((Raphael.js))
    What it does
      Vector drawing
      Browser animation
      Cross-browser support
    Tech stack
      JavaScript
      AMD modules
      Eve event library
    Features
      Shapes and paths
      Click and animation
      Minified builds
    Use cases
      Data visualization
      Interactive diagrams
      Web graphics

mindmap root((Raphael.js)) What it does Vector drawing Browser animation Cross-browser support Tech stack JavaScript AMD modules Eve event library Features Shapes and paths Click and animation Minified builds Use cases Data visualization Interactive diagrams Web graphics

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Draw shapes, paths, and text on a webpage that stay crisp at any screen resolution or zoom level.

USE CASE 2

Animate SVG elements in response to user interactions like clicks or mouse hovers.

USE CASE 3

Build a data visualization widget that renders vector charts or diagrams across different browsers.

Tech stack

JavaScriptNode.jsYarn

Getting it running

Difficulty · easy Time to first run · 5min

Use freely in commercial and personal projects with no restrictions, as long as you keep the copyright notice.

In plain English

Raphael is a JavaScript library for drawing vector graphics inside a web browser. Vector graphics are drawings made from mathematical shapes rather than pixels, which means they stay sharp at any size and can be animated or changed programmatically. This library was built to make that kind of drawing work across many different browsers without the developer needing to know the internal differences between each one. The library depends on a small companion package called eve for event handling, and it ships in several ready-to-use file formats. You can include a single bundled file that already contains that dependency, or a lighter version that leaves the dependency out if you are loading it separately. Both minified (smaller, faster) and unminified (readable, easier to debug) variants are provided. To use Raphael in a project, you load it via a standard HTML script tag or through a module system like AMD. You then create a drawing canvas on any part of your page and use the library's functions to draw shapes, paths, text, and images, and to attach click or animation events to them. A separate boilerplate project linked from the README shows working examples of how to load and set it up. Building the library from source requires Node.js and Yarn, and tests are run by opening an HTML file in a browser rather than through an automated test runner. The project notes that browser compatibility review takes time, so pull requests may wait for community feedback before being merged. The license is MIT, meaning you can use it freely in commercial and personal projects. Several books covering Raphael in depth were published by O'Reilly and are listed in the README for anyone who wants a thorough reference.

Copy-paste prompts

Prompt 1

Using Raphael.js, write code to draw an animated circle on a webpage that changes color when clicked.

Prompt 2

How do I create a bar chart with labeled axes using Raphael.js?

Prompt 3

I want to animate an SVG path in Raphael.js to trace a route on a custom illustrated map. How do I do that?

Prompt 4

Show me how to load Raphael.js via a script tag and draw a group of shapes that respond to mouse hover events.

Open on GitHub → Explain another repo

← dmitrybaranovskiy on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.