# rough-stuff/rough-notation

**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-notation).**

9,611 stars · 236 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/rough-stuff/rough-notation
- awesome-repositories: https://awesome-repositories.com/repository/rough-stuff-rough-notation.md

## Description

Rough Notation is a JavaScript annotation and animation library used to draw sketchy, hand-drawn visual marks over web page elements. It functions as a utility for adding organic-looking underlines, boxes, and highlights to HTML elements to create a hand-drawn aesthetic on digital interfaces.

The library provides specialized tools for sequencing drawing animations and managing instructional overlays. It supports the creation of hand-drawn circles, brackets, and highlights that can be triggered in a specific order to guide users through a page.

The system handles multiline text annotations by drawing individual marks for each line of a text block. It also allows for the modification of visual properties, such as color and style, to provide dynamic emphasis on screen.

## Tags

### Graphics & Multimedia

- [Hand-Drawn Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries.md) — Provides a library for rendering web graphics with a simulated, hand-drawn sketchy aesthetic. ([source](https://github.com/rough-stuff/rough-notation/blob/master/README.md))
- [Animation Sequences](https://awesome-repositories.com/f/graphics-multimedia/animation-sequences.md) — A feature in the product allowing multiple annotations to be grouped and triggered in a specific drawing sequence. ([source](https://github.com/rough-stuff/rough-notation/blob/master/README.md))
- [Path Interpolation Animations](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/path-stroking/path-interpolation-animations.md) — Creates the illusion of hand-sketching by animating the progress of vector paths from start to finish.
- [SVG Graphic Drawing](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/vector-graphics-resources/svg-graphic-drawing.md) — Generates SVG elements that mimic human sketching using randomized path offsets and line widths.
- [Multiline Text Bounding Boxes](https://awesome-repositories.com/f/graphics-multimedia/vector-bounding-box-calculations/multiline-text-bounding-boxes.md) — Splits text elements into multiple rectangular regions to wrap individual lines with distinct annotation marks.

### User Interface & Experience

- [Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/animation-libraries.md) — Specialized animation system for triggering sequenced, hand-drawn visual effects on web pages.
- [Web Page Annotation Tools](https://awesome-repositories.com/f/user-interface-experience/cursor-visualizations/video-element-customization/visual-annotation-tools/web-page-annotation-tools.md) — Adds sequenced drawing animations and visual marks to HTML elements for educational or instructional content.
- [Sequential Animation Orchestrators](https://awesome-repositories.com/f/user-interface-experience/sequential-animation-orchestrators.md) — Manages a timed series of drawing operations to trigger annotations in a predefined sequence.
- [Annotation Styling](https://awesome-repositories.com/f/user-interface-experience/annotation-styling.md) — Allows modification of visual properties like color after an annotation has been drawn. ([source](https://github.com/rough-stuff/rough-notation/blob/master/README.md))
- [Spatial Coordinate Maps](https://awesome-repositories.com/f/user-interface-experience/dom-state-mapping-layers/spatial-coordinate-maps.md) — Calculates precise X and Y coordinates of DOM elements to align hand-drawn annotation overlays.
- [Dynamic UI Emphasis](https://awesome-repositories.com/f/user-interface-experience/dynamic-ui-emphasis.md) — Changes the color and style of on-screen annotations in real time to reflect different states.
- [Instructional Overlays](https://awesome-repositories.com/f/user-interface-experience/instructional-overlays.md) — Creates sequences of hand-drawn marks that appear one after another to guide users through a webpage.
- [State-Based Style Application](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application.md) — Applies visual properties like color and stroke width based on the current state of the annotation configuration.

### Web Development

- [JavaScript Annotation Libraries](https://awesome-repositories.com/f/web-development/javascript-annotation-libraries.md) — A JavaScript library for drawing and animating sketchy, hand-drawn annotations over web page elements.

### Development Tools & Productivity

- [Interactive Document Highlighting](https://awesome-repositories.com/f/development-tools-productivity/text-highlighting-utilities/interactive-document-highlighting.md) — Marks text blocks or multiline content with dynamic visual cues to draw attention to key information.

### Software Engineering & Architecture

- [Multiline Text Annotations](https://awesome-repositories.com/f/software-engineering-architecture/team-collaboration-tools/collaborative-annotation/page-text-annotations/multiline-text-annotations.md) — Draws individual annotation marks for every line of a multiline text block. ([source](https://github.com/rough-stuff/rough-notation#readme))

### Part of an Awesome List

- [Typography and Text](https://awesome-repositories.com/f/awesome-lists/devtools/typography-and-text.md) — Creates and animates hand-drawn text annotations.