Signature Pad

A pressure and velocity aware drawing canvas that exports to PNG or SVG.

Sign here

0 strokes

Installation

Run the following command to install the `signature-pad` components:

npx shadcn-svelte@latest add https://more-shadcn.noair.fun/r/signature-pad.json

Exporting

The component exposes its methods through bind:this. toSVG() replays the recorded strokes as vector paths, so the result stays sharp at any size, while toDataURL() rasterises the canvas at the current device pixel ratio.

Pen and background

penColor defaults to currentColor, so the ink follows the theme. Set a backgroundColor when the export needs to be opaque.

Stroke data

strokes is bindable and fully serialisable. Persist it to restore a signature later, or reset it to load one back in.