I wanted SVG diagrams to draw themselves, but the SVGs I was dealing with weren't just paths.

It started as some internal SVG manipulation around Vivus and gradually became its own little library.

The interesting part for me was handling SVGs that contain more than just paths. The library draws strokes first, then reveals fills and text, and exposes setProgress() so the animation can be controlled by a timeline, scroll position, video editor, etc.

It can also record the result to WebM directly in the browser using the canvas/MediaRecorder APIs.

React is supported, but the core API doesn't depend on React.

It's very early and probably has plenty of SVGs that will break it. That's partly why I decided to open-source it.

GitHub: https://github.com/penwell-app/draw-on

npm: https://www.npmjs.com/package/@penwell/draw-on

I'd especially appreciate feedback from people who have dealt with messy real-world SVGs.