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

> A lightweight JavaScript graphics library that renders shapes with a sketchy, hand-drawn appearance on Canvas and SVG, ideal for diagrams, illustrations, and playful UIs.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

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

## Quick Use
```bash
npm install roughjs
```
```javascript
import rough from 'roughjs';
const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 150, { roughness: 2, fill: 'blue' });
```

## 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/

---
Source: https://tokrepo.com/en/workflows/rough-js-hand-drawn-style-graphics-web-42ba23ce
Author: Script Depot