Rough.js – Create SVGs with a hand-drawn, sketchy, appearance

Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

To get started first create a rough canvas:

const rc = rough.canvas(document.getElementById('canvas'));

On that rough canvas you can then start drawing things, and tweak the “roughness” along with that:

rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

The code above evaluates to this:

Rough.js – Create SVGs with a hand-drawn, sketchy, appearance →

Elsewhere , ,

Leave a Reply

Your email address will not be published. Required fields are marked *