RoughNotation – create and animate hand-drawn annotations on a web page
A small JavaScript library to create and animate hand-drawn annotations on a web page
RoughNotation – create and animate hand-drawn annotations on a web page launched on May 28, 2020 with 696 votes, #9 of 4,813 launches that month and more than 99% of that year's launches. The site was still online in September 2026, 6 years on.
In plain words
RoughNotation is a library that lets developers add hand-drawn style annotations and animations to web pages. It creates sketchy, informal visual elements that highlight or mark up content with a rough, sketch-like appearance. The tool is designed for web developers and designers who want to add interactive, annotated elements to their websites. It stands out by providing an easy way to implement casual, hand-drawn visual effects without requiring complex custom code.
written from the facts on this page · September 2026
From the sources
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 Draw a hand-drawn line through an element creating a stroke-through effect. To symbolize rejection, use a crossed-off effect on an element. 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…from roughnotation.com
Does a similar job
all alternatives →
RoughJS – Create hand-drawn graphics using JavaScript2018 · roughjs.com · ▲1,087Rough.js is a light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance.
Anime.js – Polyvalent JavaScript Animation Engine2016 · anime-js.com · ▲283A fast, multipurpose and lightweight JavaScript animation library
Sketch2Code2019 · learn.microsoft.com · ▲407Turn hand-drawn design into a HTML with AI. By Microsoft.
More life & fun this month
the category →
A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.
Life & fun · 2d ago · permit.petercai.com
- IV
Life & fun · 14d ago · tanzaniaeducationproject.org
Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.
Life & fun · 15d ago · bigwords.page
Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.
Life & fun · 9d ago · guitoro.com
Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.
Life & fun · 13d ago · carrierexplode.com
Life & fun · 23d ago · space.bl2.net
Source: Show HN post ↗
Launched alongside, May 2020
the whole month →
SHA-256 Animation▲1,053Animation of the SHA-256 hash function in your terminal. - in3rsha/sha256-animation
Dev tools · 2020 · github.com
This Word Does Not Exist uses an artificial intelligence model named GPT-2 to invent new English words.
AI · 2020 · thisworddoesnotexist.com
- P3
Life & fun · 2020 · leeoniya.github.io
