← Back to gallery
SVG

Signature Line Drawing Illusion Overview

An SVG signature draw illusion that sequences normalized stroke-dasharray and stroke-dashoffset paths to mimic ordered pen strokes.

signaturepen-drawstroke-dasharraystroke-dashoffsetpathLength

Signature draw · stroke-dashoffset

Signature Line Drawing Illusion

Long dash arrays and offset animation reveal authored signature strokes in sequence, creating a pen-draw illusion without importing external handwriting assets. Three variants demonstrate compact initials, a multi-stroke receipt signoff, and a looping approval mark.

Cursive M · single-letter initial

Initial Mark

A stylized cursive "M" — three peaks drawn as one continuous flowing stroke, then a small flourish underline beneath it. The kind of single-letter initial someone might scrawl on a tablet to acknowledge a notification.

  • cursive M
  • monogram
  • two strokes

Cursive name · flowing signature

Receipt Signoff

A full cursive name signature — flowing left-to-right handwriting with two visible pen-lifts (first-letter loop, body waveform, trailing flourish) and a finishing underline beneath. Reads as a real signed name.

  • cursive
  • pen lift
  • underline

Checkmark inside circle

Approval Seal

A universal "approved" stamp — a closing circle drawn first, then a checkmark drawn inside it. The two strokes read in clear order so the gesture lands as confirmation.

  • checkmark
  • circle
  • approved

Signature inspector

Initial Mark

  • cursive M
  • monogram
  • two strokes

A stylized cursive "M" — three peaks drawn as one continuous flowing stroke, then a small flourish underline beneath it. The kind of single-letter initial someone might scrawl on a tablet to acknowledge a notification.

.signature-stage__stroke {
  fill: none;
  stroke: var(--signature-accent);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: signatureDraw 5.20s cubic-bezier(0.55, 0.05, 0.35, 0.95) infinite;
  /* per-stroke stagger lifts each path in writing order */
  animation-delay: calc(var(--signature-stroke-index, 0) * 140ms);
}

.signature-stage__stroke--thin {
  stroke-width: 3px;
  stroke: var(--signature-accent-2);
}

/* Phase shape mirrors the gallery card-preview signatureCardDraw
   so the detail-page strokes share the same beat as the thumbnail:
   appear → draw → hold → fade out → invisible reset. */
@keyframes signatureDraw {
  0%, 6%    { stroke-dashoffset: 1; opacity: 0; }
  14%       { stroke-dashoffset: 1; opacity: 1; }
  46%       { stroke-dashoffset: 0; opacity: 1; }
  82%       { stroke-dashoffset: 0; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0; opacity: 0; }
}