03 ──────
Live SVG — Signature animator
Draw your signature, set timing and easing per stroke, then export an animated SVG
2026 · Personal
- Next.js
- React
- Tailwind CSS
- SVG
- Animation
- Canvas
Overview
A tool to draw your signature with optional path smoothing, configure per-stroke keyframes (delay, duration, easing), preview playback with configurable background, and export a single animated SVG file.
Goal & Motivation
Create a focused, in-browser tool for designing and exporting animated signatures — useful for portfolio intros, sign-off animations, and learning SVG path animation.
Corporate Relevance
The same patterns — timeline UI, path data handling, and export pipelines — apply to design tools, onboarding flows, and any product that needs customizable animated graphics without video assets.