Life & fun · alternatives · 2026

24 alternatives to 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 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… Below are 24 products that do a similar job, ranked by how close each is in meaning and then by launch-day votes. RoughNotation – create and animate hand-drawn annotations on a web page launched in 2020; newer entries below may have overtaken it.

1. 1
   RoughJS – Create hand-drawn graphics using JavaScript▲1,087

   Rough.js is a light weight javascript library that lets you draw graphics with a hand-drawn, sketchy, appearance.

   2018 · roughjs.com · its alternatives →

2. 2
   Anime.js – Polyvalent JavaScript Animation Engine▲283

   A fast, multipurpose and lightweight JavaScript animation library

   2016 · anime-js.com · its alternatives →

3. 3
   Jitter 1.0▲1,020

   A fast and simple animation tool on the web 💫

   2023 · jitter.video · its alternatives →

4. 4
   Sketch2Code▲407

   Turn hand-drawn design into a HTML with AI. By Microsoft.

   2019 · learn.microsoft.com · its alternatives →

5. 5
   useAnimations▲362

   An animated icon library for your projects

   2019 · useanimations.com · its alternatives →

6. 6
   Video Annotations by Zight▲289

   Draw on videos to get your point across

   2020 · getcloudapp.com · its alternatives →

7. 7
   I made a free animator. Think Adobe Illustrator but for animation▲738

   See animations created by me using Trangram: https://www.trangram.com/showcase I started working on Trangram 7 years ago with a simple idea: a free browser-based vector editor that combines illustration and animation in one place. The goal is to make creating vector graphics and animations as simple as opening a browser. There's nothing to install, no account required, and projects are saved automatically in your browser, so nothing is uploaded to a server. I use Trangram every day for my own illustrations (and occasionally animations). One of the most rewarding parts of…

   2024 · trangram.com · its alternatives →

8. 8
   Spirit▲754

   The animation tool for the web.

   2018 · spiritapp.io · its alternatives →

9. 9
   Blotter.js▲243

   A JavaScript API for unconventional text effects on the web.

   2018 · blotter.js.org · its alternatives →

10. 10
    Crayon▲418

    Animate your vector illustrations with a few clicks

    2022 · visual.app · its alternatives →

11. 11
    Wired-elements – UI web components with a hand drawn, sketchy look▲650

    Common UI Elements with a sketchy hand-drawn look.

    2018 · wiredjs.com · its alternatives →

12. 12
    Webflow Interactions 2.0▲404

    Design and build web animations and interactions

    2017 · its alternatives →

13. 13
    Flow▲409

    Animate Sketch designs and generate production-ready code.

    2017 · createwithflow.com · its alternatives →

14. 14
    Sketch 101▲230

    Smart Animate, Color variables gradients + more!

    2024 · sketch.com · its alternatives →

15. 15
    Ouch! Illustrations 2.0▲251

    Free professional vector illustrations for happier users

    2020 · icons8.com · its alternatives →

16. 16
    Lottie Creator 2.0▲371

    After Effects for the web, built on Lottie

    Jul 2026 · creator.lottiefiles.com · its alternatives →

17. 17
    Review my project: MarkUp, a tool to draw on any webpage.▲90

    Here's the website: http://markup.io/ We created MarkUp at Medium to help make the QA process better for sites we're working on. Grab the MarkUp bookmarklet, go to some page in your browser, then click it to draw on the page. Publish to make a link you can share. We've tried similar tools like BounceApp, Notable, and Skitch. Everything else we found is screenshot-based or takes us out of the browser. We wanted something that felt quicker than screenshots and more integrated with the browsing experience. Instead of taking a screenshot, MarkUp snapshots the DOM in the current page, strips the…

    2010 · markup.io · its alternatives →

18. 18
    Create animations by dragging an element with your mouse▲379

    Create animations by dragging your mouse

    2022 · animatize.com · its alternatives →

19. 19
    CSSeffectsSnippets.▲292

    A collection of CSS effects with a click to copy.

    2019 · emilkowalski.github.io · its alternatives →

20. 20
    Rough Charts▲145

    A responsive react charting library with a hand-drawn style.

    2019 · github.com · its alternatives →

21. 21
    Uncommon Illustrations by Artify▲269

    Free and weirdly beautiful animations & illustrations

    2020 · artify.co · its alternatives →

22. 22PA
    Pick a better background pattern for your website▲347

    SubtlePatterns Bookmarklet allows you to preview backgrounds for your website quickly and easily

    2013 · bradjasper.com · its alternatives →

23. 23
    A simple hand drawn HTML/CSS theme▲188

    A simple hand drawn HTML/CSS theme.

    2021 · chr15m.github.io · its alternatives →

24. 24
    SnackThis Text Animator▲309

    A simple text animation tool that runs in your browser.

    2020 · snackthis.co · its alternatives →

Ranked by how close each launch is in meaning, then by votes. Prices were read from each product’s own site when checked and can change. Refine with your own description →