svelte-signature-pad

Svelte Action to capture smoothed signatures as SVG paths using the excellent perfect-freehand library.

Instructions

Install using you package manager of choice:

pnpm i svelte-signature-pad

Import action into page and pass and object with ondraw and oncomplete method properties.

Each will receive a path which can be rendered as SVG in your component. ondraw fires _while the user is drawing_ and would be the current stroke. oncomplete fires when they have finished the line (which could transition to a different color).

The stroke options can be override if desired.

Example

``svelte


  

      class="w-full h-full"
    use:signature={{ ondraw, oncomplete }}
    bind:clientWidth={width}
    bind:clientHeight={height}
    ontouchmove={e => e.preventDefault()}
  >
    {#each layers as layer}
      
        
      
    {/each}
    {#if preview}
      
        
      
    {/if}

Please sign on the dotted line to indicate that you agree to all the legal terms we all know you didn't read. Thank you!