Draw your signature, set timing and easing per stroke, then export an animated SVG
Back to projects

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
Live demoView on GitHubDiscuss this project

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 (portfolio intros, sign-off animations, learning SVG path animation).

Corporate Relevance

The same patterns (timeline UI, path data handling, export pipelines) apply to design tools, onboarding flows, and any product that needs customizable animated graphics without video assets.