Extracted SVG Animation Engine Open‑Sourced

Description and use

@penwell/draw‑on lets you animate SVG diagrams with progressive strokes, fills, and labels, control the animation via API or React hooks, and export the result as WebM in the browser.

Problem

SVG diagrams needed progressive stroke, fill, and label animations, not just fade‑in, and a way to control and export them as video.

Outcome

The library enables clean, staged SVG animations with easy API, React support, and in‑browser video export, improving visual storytelling in web projects.

Workflow

• 1. Import @penwell/draw‑on into project.
• 2. Call createDrawing(svg, {duration:2000}) or use React hook useSketchDraw.
• 3. Use drawing.play() for auto‑play or drawing.setProgress(t) for manual control.
• 4. Optionally render animation to WebM in browser for video export.
• 5. Integrate with scroll, timeline, or other animation systems as needed.

Evidence

I turned it into @penwell/draw-on.

Source

draw-on can render the animation to WebM in the browser, so there doesn't need to be a video-generation server.

Source