I built a tool to sign my own website

While redesigning this site, I wanted one small thing: my signature, writing itself at the top of the home page. Not a fade-in, not a script font. A pen stroke, drawn the way I actually sign.

It turned out to be a much more interesting problem than I expected, and I ended up building a tool for it: Inkline.

Why a font doesn't work

My first instinct was a handwriting font. It looks right, but it can't be animated like a pen.

Fonts are made of outlines. Each letter is a filled shape, and a shape has two edges. If you try the classic "draw the line" animation on it, the animation traces around the edges of every letter instead of along the stroke. It looks like a sketch of a signature, not a signature being written.

What you actually need is a centreline: one thin path per stroke, following the pen, in the order it was written.

The trick that makes it draw

Once you have single-line paths, the animation itself is surprisingly small. SVG lets you draw a stroke as a dashed line. Make the dash as long as the whole path, push it out of view with an offset, then animate the offset back to zero:

@keyframes draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

path {
  animation: draw 600ms ease-in-out both;
}

<path pathLength="1" d="M71.4 18.8C71.9 18.1 73.7 16.2 ..." />

pathLength="1" is the underrated part. It tells the browser to treat every path as exactly one unit long, so the same 1 works for every stroke without measuring anything.

Recording the strokes

To get real strokes, you have to capture them as someone signs. Inkline listens to pointer events, which covers a mouse, a trackpad, a finger, and an Apple Pencil with the same code:

• Every point counts. Browsers batch fast pen movements, so it reads the coalesced events to keep the in-between points. That's the difference between a smooth curve and a jagged one.
• Smooth on release, not while drawing. While you draw, it shows the raw line so it feels instant. When you lift the pen, it removes near-duplicate points and turns the rest into smooth curves.
• Tiny dots are real strokes. The dot on an "i" is almost zero length, so it becomes a tiny stroke with its own moment in the animation, instead of breaking the timing.
• Every signature gets the same scale. Strokes are normalised to the same height, so a stroke width of 2 looks the same whether you signed big or small.

Making it feel like handwriting

A signature isn't drawn at a constant speed. Long loops take time; the dot on an "i" is instant. So each stroke gets a share of the total duration based on its length, and each one starts slightly before the previous one finishes. That small overlap is what makes it feel like one continuous hand instead of a slideshow of lines.

The details that took the longest

The drawing part was the quick bit. These took longer:

• Reduced motion. Some people turn animations off. For them, the signature has to appear fully drawn, not invisible. So the hidden state only exists inside the animation. If the animation doesn't run, you simply see the finished signature.
• The dotted signature bug. My first version kept the dash setting on the path permanently. Browsers were fine, but tools that don't run animations, like some PDF and design apps, could draw the signature as a dotted line. Moving the dash into the keyframes means anything that can't animate simply sees a solid signature.
• Once per visit. Watching the signature draw on every page gets old. An option remembers that it already played for this visit and shows it finished afterwards.
• Dark mode. With currentColor, the signature takes the text colour of the page, so it matches light and dark themes automatically.

Where you can use it

I built it for websites, but people sign documents far more often than they build sites, so Inkline exports both:

• For websites: a React component, an HTML snippet, or an animated SVG file.
• For documents: a transparent PNG for Adobe Acrobat, Preview, Word, or Google Docs, and a static SVG for design tools.

Everything happens in your browser. Your signature is never uploaded anywhere.

Try it

Inkline is free, with no account and no watermark. Draw your signature, pick a speed and a stroke, and copy the code.

The signature at the top of my home page will be redrawn with it. If you use it on your site, I'd love to see it.