Rough Notation: Hand-Drawn Annotations for the Web
Rough Notation is a compact library that leverages SVG to add hand-drawn style annotations to page elements, particularly text. It offers six configurable design types, such as underlines and box highlights, making it a nifty tool for visual emphasis.
A demo is available to showcase its capabilities. The library is distributed via npm and fully supports ES6 imports, but it can also be loaded with a simple <script src> tag. For those using JavaScript frameworks, dedicated wrappers exist for React, Vue, Svelte, Angular, and Web Components.
This release strategy stands in contrast to other projects. Take gooey-react, another impressive tool that applies the gooey effect concept through a React/JSX API.
While gooey-react is clever, an alternative implementation might use an HTML wrapper with data-* attributes to control the effect. That design would allow straightforward wrappers to be built across any JavaScript framework with relative ease.
