← Back to Playground

✍️ Signature Pad

Draw your signature and watch it animate with playback controls

Draw Your Signature

📄 Save as PNG
📄 Save as JPG
📐 Save as SVG
📐 Save as SVG (with background)

💡 How to Use

  • Draw: Click and drag (or touch on mobile) to create your signature
  • Customize: Change pen color, width, and background color
  • Undo/Redo: Navigate through your drawing history
  • Play: After drawing, use the play button to animate your signature being written
  • Speed Control: Adjust playback speed from 0.25x (slow) to 3x (fast)
  • Save: Choose from PNG, JPG, SVG formats
  • Gallery: Save multiple signatures and load them later

🎨 Features

  • Smooth drawing with variable pen pressure
  • Customizable pen color, width, and background
  • Full undo/redo support
  • Animated playback that recreates your drawing stroke by stroke
  • Adjustable animation speed with real-time preview
  • Pause and resume animation at any time
  • Export to PNG, JPG, or SVG (with or without background)
  • Gallery system to save and manage multiple signatures
  • Touch-friendly for tablets and mobile devices

🖼️ Signature Gallery

Save your signatures to the gallery and load them later

📚 Credits

Built with Signature Pad by Szymon Nowak - A smooth signature drawing library for HTML5 canvas.