SVG Mascot Animator

Static SVG in, animation out, with the timing coming from equations and solvers rather than from nudged keyframes. Anime.js v4 is the default engine. Where JavaScript cannot run, the same Anime.js solvers are sampled ahead of time and baked into CSS keyframes, so both versions of an asset share one motion identity.

What separates convincing motion from generic motion is not more keyframes. It is that the timing comes from somewhere real: a parabola carried by a motion path, a pendulum whose period follows from its length, a spring whose settling duration is computed by a solver rather than picked by feel.

Setup

Install the engine first, before writing any animation code:

bash scripts/setup.sh          # npm install animejs, verifies the version and exports