Extracted SVG Animation Engine Open‑Sourced

Описание и применение

Библиотека @penwell/draw‑on позволяет анимировать SVG‑диаграммы с постепенным рисованием контуров, заливок и надписей, управлять ими через API и экспортировать в 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.

Источник