Overview

Sign It turns a handwritten signature into a vector file. Draw with a mouse, a finger or a stylus; get back an SVG cropped tightly to your ink. Built end to end — no build step, no dependencies, no backend.

RoleDesign & build, solo
TypeBrowser tool, open source
Built withVanilla JS, SVG, perfect-freehand
DateSep 2026
Livedeanovelaa.github.io/sign-it
Sourcegithub.com/deanovelaa →

Why it exists

I wanted a signature for this site’s footer. Every tool I found uploaded the drawing to a server, returned a PNG with a white box baked in, and gated the download behind an email address.

Problem

Signature generators upload your handwriting, return a flat raster with a white background, and gate the download behind a sign-up.

Solution

Render the stroke as vector geometry in the browser, crop the export to the ink, and never make a network request at all.

How it works

One pipeline, hand to file, with no raster step in it — which is why the export is lossless.

1  Sample every point the hardware caught 2  Outline a closed shape that tapers 3  Render filled, never stroked 4  Crop the ink’s box becomes the viewBox
The same stroke at each stage. Nothing is ever rasterised, and the export is cropped to the ink rather than the pad it was drawn on.

Step two is what makes it read as handwriting: points are sampled with getCoalescedEvents() and handed to perfect-freehand, which returns a closed outline that tapers with speed and pressure. It is filled, not stroked. Step four is the one people notice — the ink’s bounding box becomes the viewBox, with no width or height, so the file scales to whatever container it lands in.

Try it

The real tool, running on this page. Nothing you draw is sent anywhere, including to me.

Copy inline HTML emits fill="currentColor", so the signature inherits the surrounding text colour — one file that works in light and dark. The signature at the bottom of my index page is exactly that.

How to use it

Website footerCopy inline HTML — follows your text colour
Email signatureDownload PNG — mail clients distrust SVG
Documents & PDFsDownload SVG — stays sharp at any size
Figma & design filesCopy SVG code, paste straight onto canvas
Your own siteImport the pad as an ES module →

PNG bakes in a literal colour, so pick your ink before exporting one. Only the inline copy adapts.

Design decisions

No backendPrivacy becomes a fact, not a promise
No build stepClone, open the file, it runs
Tuned, not configurableFour controls instead of fourteen

With no server the page makes zero network requests while you draw and export — you can confirm that with the Network tab open, which is a different class of claim from a privacy policy. The stroke engine exposes a dozen parameters; surfacing them would have made the tool worse. Nobody signing their name wants to tune a spline.

What it isn’t

This is an image of a signature, not a legal signature — no identity verification, no audit trail, no claim to eIDAS or the ESIGN Act. MIT licensed, so fork it. If you do something interesting with it, I’d like to see it — [email protected].