Koala mascot — animation outputs

video wave (raster) + 3-pose onboarding (vector slideshow + Lottie)
A · Vector slideshow (HTML+SVG)

onboarding.html

3 SVGs · CSS crossfade + per-scene micro-anim · ~96 KB total · scales perfectly

Open standalone
B · Lottie JSON (3-pose)

koala-onboarding.json

429 KB · 7.5s loop · 30fps · 800×800 · embedded base64 PNG poses

Download
C · Koala wave — rigged (no ghost)

koala-wave.json / .webp

After path-surgery: arm outline split out of body path. 1.77 MB Lottie · 132 KB WebP · 48f @ 24fps · 2s loop · 540×540 · transparent

.json .webp live HTML
C2 · Rigged wave (live CSS)

wave-koala-rigged.html

CSS animation on the rigged SVG. The arm rotates ±25° around the shoulder pivot, body silhouette stays clean.

C3 · Before / After comparison

Why path surgery mattered

BROKEN

Original SVG · arm outline baked into body

FIXED

Rigged SVG · arm outline is its own path · pixel-identical at rest

Same artwork. Rigged version has the arm separable from the body outline — rotation no longer leaves a ghost.

D · Source video → bear WebP

bear-wave.webp

bear waving

1.6 MB · animated WebP · transparent · 24fps · 5s loop

Open .json .lottie
D · Source poses (vector)

poses/*.svg

18 KB + 36 KB + 44 KB raw SVG · 40 / 83 / 106 paths