SVG MOTIONbaole.space / 0.1.0

Getting started

@baolq/svg-motion prepares arbitrary SVG input, preserves internal references, and animates it with the browser's Web Animations API.

Install

READ ONLY
pnpm add @baolq/svg-motion

React is an optional peer dependency. Install React 18 or newer only when using the /react entry.

First animation

READ ONLY
import { mountSvgMotion } from "@baolq/svg-motion";

const instance = await mountSvgMotion(
  document.querySelector("#stage"),
  '<svg viewBox="0 0 120 40"><path d="M8 32C32 4 76 4 112 32"/></svg>',
  { preset: "draw", duration: 1200 },
);

instance.controller.restart();
LIVE PACKAGE PREVIEW

Source types

Use SVG markup, a same-origin or CORS-enabled URL, Blob, File, or SVGSVGElement. APIs that accept a source clone it; only animateSvg() works directly on a caller-owned node.