프로젝트에서 SVG 애니메이션 엔진을 추출하고 오픈 소스화했습니다.

I had a small problem that kept getting more annoying.

I wanted SVG diagrams to draw themselves.

Not just fade in. Not just appear. I wanted the strokes to progressively draw, followed by the fills and labels.

I initially used Vivus for the stroke animation. It does that part well.

But the SVGs I was working with weren’t particularly clean. They contained strokes, fills, text, and diagram elements. I also wanted to control the animation from a timeline and eventually export the animation as a video.

At some point, I realized the code had become useful enough to pull out of the original project.

So I turned it into @penwell/draw-on.

What it does

The basic API is intentionally small:

const drawing = createDrawing(svg, {
  duration: 2000
})

drawing.play()

Enter fullscreen mode Exit fullscreen mode

But you can also control the animation yourself:

drawing.setProgress(0.25)
drawing.setProgress(0.5)
drawing.setProgress(0.75)

Enter fullscreen mode Exit fullscreen mode

That makes it possible to connect the animation to things like scroll position, a custom timeline, or another animation system.

Strokes, fills and labels

One thing I wanted that wasn’t part of my original Vivus setup was a better reveal sequence for normal diagrams.

The idea is:

draw the strokes
       ↓
reveal fills
       ↓
reveal labels

Enter fullscreen mode Exit fullscreen mode

That makes diagrams feel a little less like they’re simply being rendered onto the page.

React

There is a React API as well, while the core package stays framework-agnostic.

const { containerRef, play, setProgress } = useSketchDraw({
  svgMarkup,
  duration: 2000
})

Enter fullscreen mode Exit fullscreen mode

Recording

Another reason I extracted it was recording.

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

That’s useful for applications that want to turn generated diagrams into short clips.

Demo gifs

Annotate Documents

Draw Diagrams

Notebook Animation

Why open source it?

Honestly, mostly because I think the package is more useful if people can try it against SVGs I haven’t seen.

It’s currently 0.1.4, and I’m sure there are SVG edge cases waiting to be discovered.

If you use Mermaid, Figma exports, Excalidraw or other SVG-heavy workflows, I’d be particularly interested in hearing what happens when you throw those files at it.

GitHub: penwell/draw-on

npm: @penwell/draw-on on npm

Documentation Website: https://draw-on-nu.vercel.app/

It’s MIT licensed, and contributions are welcome.