Extracted SVG Animation Engine Open‑Sourced

说明与用途

@penwell/draw‑on 允许对 SVG 图表进行逐步绘制、填充和标签动画，支持 API 控制和 React 钩子，并可在浏览器中导出 WebM 视频。

问题

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

结果

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

工作流

• 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.

证据

I turned it into @penwell/draw-on.

来源

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

来源