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.
Read Also: 20 Useful SVG Tools for Better Graphics
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.
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.