← 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.

Duration
3s
Resolution
1440×900
Format
SVG
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.

initial mark signature draw - 2.4s cycle · 1.00 intensity

Two strokes · short signature

Initial Mark

A compact initials mark draws in two ordered strokes, with each path using normalized pathLength.

Each stroke starts hidden, then draws forward with a stagger so the path order reads like handwriting.

  • signature
  • stroke-dasharray
  • pathLength

Three strokes · pen lift

Receipt Signoff

A receipt-style signoff shows deliberate gaps between strokes so pen lifts are readable.

Stroke order and delay create a left-to-right writing pass without requiring getTotalLength in the component.

  • pen lift
  • stagger
  • draw order

Loop stroke · underline tail

Approval Seal

A looping approval mark combines a looped path and a separate underline tail.

The loop completes before the underline tail starts, preserving directionality.

  • loop
  • underline tail
  • normalized dash

Signature inspector

Initial Mark

Motion contract
Each stroke starts hidden, then draws forward with a stagger so the path order reads like handwriting.
Accessibility
The visible signature is decorative. Provide the owner or label as adjacent text in production.

Normalized pathLength keeps the dash setup stable while still allowing per-path delays.

css
<path
  d="M28 108 C52 58 79 52 94 88 S130 128 156 76"
  pathLength="1"
  stroke-dasharray="1"
  stroke-dashoffset="1"
  style={{ animation: 'signatureDraw 2.40s ease forwards' }}
/>

@keyframes signatureDraw {
  to { stroke-dashoffset: 0; }
}