Pratik Singh extracted the SVG animation engine he built for Penwell and released it as @penwell/draw-on, an MIT-licensed JavaScript library. Its purpose is to make diagrams appear to draw themselves: animate strokes first, then reveal fills and labels, with controls for playback and timeline progress. The library is separate from the Penwell application.
Why Singh built it
Singh wanted SVG diagrams to appear as if they were being drawn. He initially used Vivus for stroke animation, but the SVGs he was working with also contained fills, text, and other diagram elements. He wanted to control the sequence and connect animation progress to a timeline, as well as export the result as video. Those needs led him to develop the engine within Penwell and later extract it as a standalone package.
As an Amazon Associate I earn from qualifying purchases.
Singh announced the project as version 0.1.4 on September 19, 2026, according to the announcement’s search context; the page itself displays “Sep 19” without a year. The npm listing showed version 0.1.5 when accessed for this article, so package metadata may have changed since the announcement. Read Singh’s announcement on DEV.
Recommended Free Tools
What @penwell/draw-on does
The documented animation sequence draws SVG strokes, then reveals fills and labels. The package also lets a caller set progress directly, rather than relying only on automatic playback. That makes it possible to scrub through the animation or coordinate it with another timeline.
#1 Best Overall
The package offers a framework-agnostic JavaScript/TypeScript core as well as React integration. Its README documents utilities including createDrawing, parseSvg, computeDims, setProgress, and recordDrawToWebM. The package can be installed with:
npm install @penwell/draw-onIts README also describes workflows involving SVGs from Mermaid, Excalidraw, tldraw, and Figma, along with handwriting. Those are documented use cases, not independent compatibility tests; results may depend on the structure and styling of a particular SVG. See the package README and installation details on npm.
How it differs from the initial Vivus approach
Singh describes Vivus as his starting point for animating strokes. The distinction he draws is about the additional needs he encountered, not a benchmark of either library.
| Need | Initial Vivus use, as described by Singh | @penwell/draw-on documentation |
|---|---|---|
| SVG elements | Stroke animation | Strokes, followed by fills and labels |
| Timeline control | Not described in the announcement as meeting his needs | Playback and direct progress control for scrubbing or synchronization |
| Video export | Not described as part of the initial approach | Browser recording to WebM |
| Framework options | Not compared in the announcement | Framework-agnostic core and React hook/component |
What to know before recording or integrating an SVG
Recording depends on browser support
WebM recording relies on the browser’s MediaRecorder and canvas.captureStream() APIs. The README describes Chromium-based browsers as the most reliable option in practice and recommends checking canRecordVideo() before offering recording. The package does not provide MP4 export because MediaRecorder support for MP4 is inconsistent across browsers.
External styles and fonts can affect the video
When an SVG is rasterized for recording, references to external stylesheets or fonts may not render correctly. The package documentation recommends inlining these resources where possible.
The drawing process changes the SVG
The core mutates the SVG in place. The documentation attributes this to Vivus rewriting shapes into paths. If the original SVG must remain untouched, pass a clone to the drawing code.
Rank #4
Who should consider trying it
@penwell/draw-on is relevant if a project needs a diagram to unfold in stages, a progress value that can be synchronized with a custom timeline, or browser-based WebM recording. React developers can use the supplied React helpers; projects using other frameworks can use the core directly.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteIt is an early-stage open-source release, not a claim of broad production readiness. Singh says edge cases remain and invites users to try SVGs he has not encountered. Treat the README’s listed sources as intended workflows, and test the specific SVGs, fonts, styles, and target browsers your project depends on.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
