Rough Notation

Rough Notation 1


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.7kb in size when gzipped, and the code is available on GitHub.


Create a sketchy underline below an element.


This style draws a box around the element.


Draw a circle around the element.


Creates a highlight effect as if marked by a highlighter.


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


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

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.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »