explaingit

rough-stuff/rough

★ 20,960HTMLAudience · developerComplexity · 2/5StaleLicenseSetup · easy

TLDR

A lightweight JavaScript library that draws shapes with a hand-sketched, wobbly appearance instead of clean lines. Works with Canvas and SVG.

Mindmap

mindmap
  root((repo))
    What it does
      Hand-drawn shapes
      Canvas and SVG
      Sketchy appearance
    Shapes supported
      Lines and curves
      Circles and arcs
      Polygons and paths
    Fill styles
      Hachure cross-hatch
      Solid and zigzag
      Dots and dashed
    Tech stack
      JavaScript
      Canvas API
      SVG rendering
    Use cases
      Wireframing tools
      Diagram editors
      Casual graphics

Things people build with this

USE CASE 1

Build wireframing or prototyping tools that show rough sketches instead of polished designs.

USE CASE 2

Create diagram editors like Excalidraw that render hand-drawn-looking flowcharts and diagrams.

USE CASE 3

Add sketchy visual effects to web graphics, charts, or infographics for a casual or informal feel.

Tech stack

JavaScriptHTML CanvasSVG

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me how to draw a circle with Rough.js that looks hand-sketched, and explain the roughness parameter.
Prompt 2
I want to create a simple wireframe mockup tool using Rough.js. What shapes should I start with and how do I fill them with hachure?
Prompt 3
How do I use Rough.js with SVG paths to draw custom sketchy shapes from existing SVG data?
Prompt 4
What's the smallest code example to draw a rough rectangle and polygon on an HTML canvas using Rough.js?
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.