Rough Notation

A small JavaScript library to create and animate annotations on a web page

Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.

Rough Notation is 3.8kb in size when gzipped, and the code is available on GitHub.

 

Following are the different styles of annotations. Hit the annotate button in each section to see the animated annotation

Underline

Create a sketchy underline below an element.

Box

This style draws a box around the element.

Circle

Draw a circle around the element.

Highlight

Creates a highlight effect as if marked by a highlighter.

Strike-Through

Draw a hand-drawn line through an element creating a stroke-through effect.

Crossed-Off

To symbolize rejection, use a crossed-off effect on an element.

Brackets

Create a hand-drawn bracket around a block (like a paragraph of text) on one or multiple sides of the block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus. Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat massa vulputate.

Multiple lines

Ability to annotate inline content that can span multiple lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan nisi hendrerit augue molestie tempus. Phasellus purus quam, aliquet nec commodo quis, pharetra ut orci. Donec laoreet ligula nisl, placerat molestie mauris luctus id. Fusce dapibus non libero nec lobortis. Nullam iaculis nisl ac eros consequat, sit amet placerat massa vulputate. Maecenas euismod volutpat ultrices. Pellentesque felis ex, ullamcorper in felis finibus, feugiat dignissim augue. Integer malesuada non eros consectetur interdum. Mauris mollis non urna in porta.

Annotation Group

Rough Notation provides a way to order the animation of annotations by creating an annotation-group. Pass the list of annotations to create a group. When show is called on the group, the annotations are animated in order.

Annotation Styling

Various properties of the annotation can be configured, like color, strokeWidth, animation duration.

No Animation

Of course you don't have to animate the annotation, it just shows up when show is called.

 

All the code and documentation is available on Github.

Reach out on twitter @preetster