thisdesign.space

VANILLA · library

RoughJS

Turns every drawing primitive into a hand-sketched version.

A small library that re-implements the standard drawing primitives — rectangles, circles, lines, paths — with a deliberately hand-drawn feel. Works with both Canvas and SVG. It's the layer underneath Excalidraw, tldraw, Wired Elements, and most of the 'sketch' aesthetic you've seen in interfaces over the last few years.

byudaysinhudaysinh
Visit roughjs.com

The homepage is the canonical demo. The lab points; doesn't mirror.

Quick start

Installbash

bun add roughjs

Usagejs

import rough from 'roughjs';

const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 100);
rc.circle(120, 60, 80, { fill: '#b5251c', fillStyle: 'hachure' });
rc.line(0, 0, 320, 240, { roughness: 2.4 });

Links