Rough.js Makes Hand-Drawn Graphics with Canvas & SVG

By Jake Rocheleau. in Toolkit. Updated on December 21, 2017.

It’s amazing to see how far the web has come with dynamic elements such as in-browser SVGs. You can design everything from custom animations to HTML5 games with the right libraries.

One of the newest libraries worth testing is Rough.js. It’s a free graphics generation script currently in beta that works on canvas and SVG elements.

You can build custom icons, bar graphs, pretty much anything you want all in code. And, the final result takes on a gorgeous hand-drawn feeling.

As of this writing, Rough.js is still in v0.1 beta, so it may not be ready for a live production website. But it’s a proof that web standards are progressing fast and we’re entering an age where this kind of stuff is possible.

Take for example this progress bar generated through Rough.js. If you click the “Start” button you’ll notice it runs a custom animation that really looks hand-drawn. It’s using SVG lines with predefined patterns to create a wobbly effect that looks truly natural.

Rough.js hand-drawn style JavaScript graphics

On the main GitHub page, you’ll find a section listing many examples of Rough.js in action.

All of these come with code samples and should be pretty easy to rework for any website. All you need is the Rough.js script file and some patience to mess with the JavaScript.

Here’s a sample snippet demonstrating how to create a rectangle in code:

var rough = new RoughCanvas(document.getElementById('myCanvas'), 400, 200);
rough.rectangle(10, 10, 200, 200); // x, y, width, height

Pretty simple once you understand the code but probably not the most intuitive script for beginners.

If you want more code snippets and sample demos check out the Rough.js homepage. It’s the perfect place to start learning and to find code snippets you can rework.

Also, if you have questions or suggestions for additional features you can message the Rough.js creator on Twitter @preetster.