├── .npmrc
├── src
├── routes
│ ├── +layout.ts
│ ├── +layout.svelte
│ └── +page.svelte
├── app.d.ts
├── app.html
├── app.css
└── lib
│ ├── svg-path.ts
│ └── index.ts
├── static
└── favicon.png
├── pnpm-workspace.yaml
├── .gitignore
├── vite.config.ts
├── tsup.config.ts
├── svelte.config.js
├── tsconfig.json
├── LICENSE
├── package.json
├── .github
└── workflows
│ └── deploy.yml
├── README.md
└── pnpm-lock.yaml
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true
--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CaptainCodeman/svelte-signature-pad/HEAD/static/favicon.png
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | onlyBuiltDependencies:
2 | - '@sveltejs/kit'
3 | - esbuild
4 | - svelte-preprocess
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | /dist
4 | /build
5 | /.svelte-kit
6 | /package
7 | .env
8 | .env.*
9 | !.env.example
10 | vite.config.js.timestamp-*
11 | vite.config.ts.timestamp-*
12 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { sveltekit } from '@sveltejs/kit/vite'
2 | import tailwindcss from '@tailwindcss/vite'
3 | import { defineConfig } from 'vite'
4 |
5 | export default defineConfig({
6 | plugins: [tailwindcss(), sveltekit()],
7 | });
8 |
--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
1 | // See https://kit.svelte.dev/docs/types#app
2 | // for information about these interfaces
3 | declare global {
4 | namespace App {
5 | // interface Error {}
6 | // interface Locals {}
7 | // interface PageData {}
8 | // interface Platform {}
9 | }
10 | }
11 |
12 | export {};
13 |
--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %sveltekit.head%
8 |
9 |
10 | %sveltekit.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | entry: ['src/lib/index.ts'],
5 | external: ['svelte/easing'],
6 | format: ['esm'],
7 | splitting: false,
8 | sourcemap: false,
9 | minify: true,
10 | clean: true,
11 | dts: true,
12 | esbuildOptions(options, context) {
13 | // waiting for https://github.com/egoist/tsup/pull/781 ?
14 | // options.sourcemap = 'external'
15 | },
16 | })
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | import adapter from '@sveltejs/adapter-static'
2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
3 |
4 | /** @type {import('@sveltejs/kit').Config} */
5 | const config = {
6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors
7 | // for more information about preprocessors
8 | preprocess: [vitePreprocess()],
9 |
10 | kit: {
11 | adapter: adapter(),
12 |
13 | alias: {
14 | 'svelte-signature-pad': 'src/lib'
15 | }
16 | },
17 | }
18 |
19 | export default config
20 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./.svelte-kit/tsconfig.json",
3 | "compilerOptions": {
4 | "allowJs": true,
5 | "checkJs": true,
6 | "esModuleInterop": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "resolveJsonModule": true,
9 | "skipLibCheck": true,
10 | "sourceMap": true,
11 | "strict": true
12 | }
13 | // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
14 | //
15 | // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
16 | // from the referenced tsconfig.json - TypeScript does not merge them in
17 | }
18 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | /* Write your global styles here, in PostCSS syntax */
2 | @import 'tailwindcss';
3 |
4 | /*
5 | The default border color has changed to `currentcolor` in Tailwind CSS v4,
6 | so we've added these compatibility styles to make sure everything still
7 | looks the same as it did with Tailwind CSS v3.
8 |
9 | If we ever want to remove these styles, we need to add an explicit border
10 | color utility to any element that depends on these defaults.
11 | */
12 | @layer base {
13 | *,
14 | ::after,
15 | ::before,
16 | ::backdrop,
17 | ::file-selector-button {
18 | border-color: var(--color-gray-200, currentcolor);
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 | Svelte Signature Pad
12 |
13 | Svelte Action to capture smoothed signatures as SVG paths using the excellent perfect-freehand
17 | library.
18 |
19 | {@render children?.()}
20 |
21 |
--------------------------------------------------------------------------------
/src/lib/svg-path.ts:
--------------------------------------------------------------------------------
1 |
2 | const average = (a: number, b: number) => (a + b) / 2
3 |
4 | export function getSvgPathFromStroke(points: number[][], closed = true): string {
5 | const len = points.length
6 |
7 | if (len < 4) {
8 | return ''
9 | }
10 |
11 | let a = points[0]
12 | let b = points[1]
13 | const c = points[2]
14 |
15 | let result = `M${a[0].toFixed(2)},${a[1].toFixed(2)} Q${b[0].toFixed(2)},${b[1].toFixed(2)} ${average(b[0], c[0]).toFixed(2)},${average(
16 | b[1],
17 | c[1]
18 | ).toFixed(2)} T`
19 |
20 | for (let i = 2, max = len - 1; i < max; i++) {
21 | a = points[i]
22 | b = points[i + 1]
23 | result += `${average(a[0], b[0]).toFixed(2)},${average(a[1], b[1]).toFixed(2)} `
24 | }
25 |
26 | if (closed) {
27 | result += 'Z'
28 | }
29 |
30 | return result
31 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Simon Green
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-signature-pad",
3 | "version": "0.0.3",
4 | "type": "module",
5 | "keywords": [
6 | "svelte",
7 | "action",
8 | "signature",
9 | "svg"
10 | ],
11 | "files": [
12 | "dist"
13 | ],
14 | "exports": {
15 | ".": {
16 | "types": "./dist/index.d.ts",
17 | "import": "./dist/index.js",
18 | "svelte": "./dist/index.js"
19 | }
20 | },
21 | "module": "dist/index.js",
22 | "types": "dist/index.d.ts",
23 | "homepage": "https://captaincodeman.github.io/svelte-signature-pad/",
24 | "repository": {
25 | "type": "git",
26 | "url": "git+https://github.com/captaincodeman/svelte-signature-pad.git"
27 | },
28 | "author": {
29 | "name": "Simon Green",
30 | "email": "simon@captaincodeman.com",
31 | "url": "https://www.captaincodeman.com/"
32 | },
33 | "license": "MIT",
34 | "scripts": {
35 | "dev": "vite dev",
36 | "build": "vite build",
37 | "preview": "vite preview",
38 | "package": "svelte-kit sync && tsup && publint",
39 | "prepublishOnly": "npm run package",
40 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
41 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
42 | },
43 | "peerDependencies": {
44 | "svelte": "^5.0.0"
45 | },
46 | "devDependencies": {
47 | "@sveltejs/adapter-static": "^3.0.0",
48 | "@sveltejs/kit": "^2.48.7",
49 | "@sveltejs/vite-plugin-svelte": "^6.2.1",
50 | "@tailwindcss/vite": "^4.1.17",
51 | "publint": "^0.3.15",
52 | "svelte": "^5.0.0",
53 | "svelte-check": "^4.0.0",
54 | "tailwindcss": "^4.1.17",
55 | "tslib": "^2.5.3",
56 | "tsup": "^8.5.1",
57 | "typescript": "^5.5.0",
58 | "vite": "^7.2.4"
59 | },
60 | "dependencies": {
61 | "perfect-freehand": "^1.2.2"
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
20 |
21 |
22 |
23 |
e.preventDefault()}
29 | >
30 | {#each layers as layer}
31 |
34 | {/each}
35 |
36 | {#if preview}
37 |
40 | {/if}
41 |
42 |
43 |
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!
46 |
47 |
48 | {#each layers as layer}
49 |
52 | {/each}
53 |
41 |
42 |
e.preventDefault()}
48 | >
49 | {#each layers as layer}
50 |
53 | {/each}
54 |
55 | {#if preview}
56 |
59 | {/if}
60 |
61 |
62 |
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!
65 |
66 |
67 | {#each layers as layer}
68 |
71 | {/each}
72 |