Developer open-sources SVG animation engine that draws strokes, fills, and labels in sequence

A developer has extracted and open-sourced an SVG animation library called @penwell/draw-on after it grew complex enough within a personal project to stand on its own. The library animates SVG diagrams by progressively drawing strokes first, then revealing fills, and finally displaying labels, offering a more natural reveal than simple fade-ins. Unlike its predecessor Vivus, draw-on supports manual progress control, allowing the animation to be tied to scroll position, custom timelines, or other systems. It also includes a React API while keeping the core package framework-agnostic, and can render animations directly to WebM video in the browser without requiring a server. The package is available on npm under the MIT license at version 0.1.4, and the developer is seeking feedback from users working with SVGs from tools like Mermaid, Figma, and Excalidraw.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in