rough
Create graphics with a hand-drawn, sketchy, appearance
A lightweight JavaScript library that draws shapes with a hand-sketched, wobbly appearance instead of clean lines. Works with Canvas and SVG.
Rough.js is a small JavaScript graphics library (under 9 kilobytes) that draws shapes with a hand-drawn, sketchy appearance. Instead of clean, precise lines, every shape it produces looks like it was quickly sketched by hand, with slightly wobbly edges and imperfect fills.
It works with both HTML Canvas and SVG, and supports drawing lines, curves, arcs, polygons, circles, ellipses, and SVG paths. Shapes can be filled using several styles including hachure (the default cross-hatching), solid fill, zigzag, cross-hatch, dots, dashed, and zigzag-line. You can control how "rough" the sketch looks using a roughness parameter and adjust the bowing of lines. Rough.js is available via npm and CDN, and is used by Excalidraw and diagrams.net among other well-known projects.
Where it fits
- Build wireframing or prototyping tools that show rough sketches instead of polished designs.
- Create diagram editors like Excalidraw that render hand-drawn-looking flowcharts and diagrams.
- Add sketchy visual effects to web graphics, charts, or infographics for a casual or informal feel.