# rough-stuff/rough

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/rough-stuff-rough).**

20,837 stars · 645 forks · HTML · mit

## Links

- GitHub: https://github.com/rough-stuff/rough
- Homepage: http://roughjs.com
- awesome-repositories: https://awesome-repositories.com/repository/rough-stuff-rough.md

## Topics

`canvas` `draw` `graphics` `html5-canvas` `svg` `svg-path`

## Description

Rough is a graphics library designed to render shapes and paths with a hand-drawn, sketchy aesthetic on web pages. It functions as a generator for informal visual styles, allowing developers to create illustrations and diagrams that mimic the appearance of human-drawn sketches.

The library distinguishes itself by using procedural rendering to calculate randomized offsets for lines and curves, simulating natural imperfections. It employs deterministic seeding to ensure that these variations remain consistent across renders, while providing hachure-based texture filling to apply stylized shading patterns within closed boundaries.

The project supports a broad range of visual applications, including the styling of data visualizations, the creation of generative art, and the design of interactive user interface elements. It provides output options for both standard web graphics contexts and resolution-independent vector markup.

## Tags

### Data & Databases

- [SVG Diagramming Libraries](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/svg-diagramming-libraries.md) — Provides a library for creating and manipulating vector graphics that mimic the appearance of human-drawn sketches and textures.
- [Data Visualization](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/data-visualization.md) — Styles data visualizations with a sketchy, informal aesthetic to make analytical charts feel more approachable.

### Graphics & Multimedia

- [Vector Graphics Editors](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-editors.md) — Functions as a generator for applying sketchy fill patterns and informal visual styles to vector-based web illustrations.
- [Hand-Drawn Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries.md) — Provides a library for creating informal, artistic visual elements that mimic the look of human-drawn sketches on web pages.
- [Sketchy Fill Generators](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/sketchy-fill-generators.md) — Applies hand-drawn textures such as hachure and cross-hatching to enclosed shapes to achieve a unique artistic aesthetic. ([source](http://roughjs.com))
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Serializes calculated path coordinates into standard SVG markup for resolution-independent vector rendering.
- [Immediate Mode Canvas Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/immediate-mode-canvas-renderers.md) — Provides an immediate-mode rendering API to draw sketchy, jittered lines directly onto HTML5 canvas elements.
- [Procedural Texture Generators](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/procedural-texture-generators.md) — Generates stylized hachure and cross-hatching patterns programmatically within closed geometric boundaries.

### User Interface & Experience

- [HTML5 Canvas Charting Libraries](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/html5-canvas-charting-libraries.md) — Acts as a graphics library for rendering shapes and paths with a hand-drawn aesthetic on HTML5 canvas or SVG elements.
- [Vector Graphics Rendering](https://awesome-repositories.com/f/user-interface-experience/vector-graphics-rendering.md) — Renders shapes and paths with a distinct, sketchy hand-drawn aesthetic on both canvas and vector elements. ([source](http://roughjs.com))
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Enhances user interfaces by rendering buttons and containers with a playful, hand-drawn visual style.

### Scientific & Mathematical Computing

- [Path Perturbation Algorithms](https://awesome-repositories.com/f/scientific-mathematical-computing/numerical-mathematical-foundations/computational-geometry/geometric-algorithms/path-perturbation-algorithms.md) — Calculates randomized offsets for line segments and curves to simulate the natural imperfections of human hand-drawn strokes.

### Artificial Intelligence & ML

- [Procedural Art Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-ai-resources/prompt-engineering-libraries/creative-content-generation/generative-art-prompts/procedural-art-generators.md) — Enables the creation of dynamic, organic, and non-uniform digital art through randomized procedural rendering.