Rough.js — Hand-Drawn Style Graphics for the Web

Introduction

Rough.js draws primitives like lines, rectangles, circles, arcs, and paths with a hand-drawn, sketchy look. It gives technical diagrams and data visualizations a friendly, approachable aesthetic without manual illustration work.

What Rough.js Does

• Renders standard shapes (rect, circle, ellipse, line, polygon, path) with jittered strokes
• Works on both Canvas 2D and SVG render targets
• Applies configurable roughness, bowing, and fill styles (hachure, cross-hatch, solid, zigzag)
• Accepts SVG path data strings for complex custom shapes
• Produces deterministic output from a seed value for reproducible sketches

Architecture Overview

Rough.js converts high-level shape descriptors into low-level drawing operations by applying a random displacement algorithm to each point along the path. A configurable filler module generates hachure or cross-hatch patterns inside closed shapes. The renderer delegates final stroke and fill calls to either a Canvas2D context or an SVG element builder, keeping the core algorithm renderer-agnostic.

Self-Hosting & Configuration

• Install via npm or import directly from a CDN as an ES module
• Choose between canvas and SVG backends based on your rendering needs
• Configure global defaults for roughness, bowing, stroke width, and fill weight
• Set a fixed seed for deterministic rendering across frames or exports
• Zero runtime dependencies; total bundle size under 10KB gzipped

Key Features

• Multiple fill styles: hachure, solid, zigzag, cross-hatch, and dots
• Path-based API accepts SVG d attribute strings for any arbitrary shape
• Seed-based determinism for consistent rendering in tests or animations
• Works seamlessly with D3.js, Chart.js, and other visualization libraries
• Lightweight with no dependencies, suitable for embedding in any project

Comparison with Similar Tools

• D3.js — data-driven visualization framework; Rough.js adds sketch aesthetics as a rendering layer
• Paper.js — full vector graphics scripting; no built-in sketchy style
• Fabric.js — interactive canvas objects; focused on manipulation not illustration style
• Excalidraw — full whiteboard app using rough rendering internally; Rough.js is the library alone
• Hand-drawn CSS — CSS hacks for borders; limited to simple shapes, no fills

FAQ

Q: Can I use Rough.js with React or Vue? A: Yes. Render to a ref-attached canvas or use the SVG generator to produce markup compatible with JSX or templates.

Q: Does roughness affect performance? A: Minimally. Extra path points add negligible overhead for typical diagram use cases (hundreds of shapes).

Q: Can I animate Rough.js shapes? A: Redraw with new parameters each frame. Pair with requestAnimationFrame or GSAP for smooth transitions.

Q: Is the output accessible? A: SVG mode produces DOM elements that can carry ARIA labels. Canvas mode requires supplementary accessible text.

Sources

• https://github.com/rough-stuff/rough
• https://roughjs.com/