I built an animated SVG avatar editor in Vue 3 (free, MIT)
Small project I’ve been chipping at: an editor for an animated SVG avatar. You pick a shape, a colour and an expression, line up animation states on a timeline, then export the result as SVG, PNG, GIF or MP4. Runs fully in the browser, no backend, no account.
The part I’d actually like feedback on is the split. The animation core has no Vue import and no clock: it’s one pure function of time, so a frame depends only on its timestamp. The component drives it from requestAnimationFrame, but the tests run with no DOM at all, and a “frozen” prop renders one exact frame without starting a loop, which is how the thumbnail grid works without spawning one rAF loop per tile.
Two things I’d do the same way again:
- defineModel for the playback cursor, so the timeline and the player stay in sync without an event bus
- keeping the MP4 encoder behind a dynamic import. I broke this once: a two-line helper imported from the wrong module dragged 43 kB gzip back onto first load, and Vite’s INEFFECTIVE_DYNAMIC_IMPORT warning was the only sign anything was wrong.
Still a work in progress, so tell me what’s confusing, especially in the editor.