rough-stuff/rough

Analysis updated 2026-05-18

★ 20,943HTMLAudience · developerComplexity · 2/5LicenseSetup · easy

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

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

Click or tap to explore — scroll the page freely

What do people build with it?

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.

What is it built with?

JavaScriptHTML CanvasSVG

How does it compare?

	rough-stuff/rough	davideuler/architecture.of.internet-product	colorlibhq/gentelella
Stars	20,943	20,744	21,328
Language	HTML	HTML	HTML
Setup difficulty	easy	easy	easy
Complexity	2/5	1/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get 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?

Frequently asked questions

What is rough?

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

What language is rough written in?

Mainly HTML. The stack also includes JavaScript, HTML Canvas, SVG.

What license does rough use?

Use freely for any purpose including commercial, as long as you keep the copyright notice.

How hard is rough to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is rough for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Scan in gitsafehub Deploy in gitdeployhub rough-stuff on gitmyhub

Verify against the repo before relying on details.