The Ruby on Rails experts
Logo_144 ClearCove Software, Inc. :: Raphael.handdrawn.js

A RaphaelJS plugin to give your vector graphics a hand drawn style. Great for sketch diagrams, charts and illustrations.


paper.drawnLine(x, y, x2, y2, wobble)

The example below renders a series of horizontal lines with increasing wobble:


paper.drawnRect(x, y, x2, y2, wobble)

The example below renders a series of rectangles with increasing wobble:


paper.drawnCircularArc(centerX, centerY, radius, startAngle, endAngle)

The example below renders a series of circular arcs. The wobble on circular arcs is a function of the radius.


paper.drawnRegularPolygon(centerX, centerY, radius, numberOfSides, wobble)

The example below renders a grid of regular polygons with random number of sides.


paper.drawnCircle(centerX, centerY, radius, wobble)

The hand drawn diagrams go well with a handwriting font as shown in this example. This example also shows that closed handdrawn shapes can have a fill attribute.

Responsive design with Raphael

The SVG graphics on this page are responsive, i.e. they shrink as the viewport gets smaller. I followed this recipe for responsive SVG graphics

Animated path drawing

Animating the drawing of paths works well with hand drawn vector graphics. Follow this tutorial for progressive path drawing.

Handdrawn icons

Here is a collection of free hand drawn web icons to go with your hand drawn diagrams.

Random number distributions

This chart compares one uniform and two normal distributions for random numbers. Currently I use the uniform distribution, but I'm exploring normal distributions for a more natural look.

More info


  • RaphaelJS, 2.1 or greater


  • copy raphael.handdrawn.js into your project
  • include the js file after raphael.js



This plugin is based on


MIT licensed

Note on Patches/Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Add tests for it. This is important so I don't break it in a future version unintentionally.
  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
  • Send me a pull request. Bonus points for topic branches.


Copyright (c) 2010 - 2013 Jo Hund. MIT license.