v149 · CSS · SVG · Animation · demo
Signature Draw
Each letter of a cursive word is drawn stroke-by-stroke using path-length: 100 in CSS. Setting the normalised length to 100 means stroke-dashoffset: 100 → 0 always draws the full stroke — no getTotalLength() required regardless of each letter's actual pixel length.
Chrome 149+ —
path-length CSS property. In older browsers the animation doesn't play (the paths remain invisible) — add pathLength="100" as an SVG attribute as a fallback.
Select a word · click Draw · adjust the speed · observe that no JS measures path lengths
Speed:
1×
/* Without path-length: must measure each letter's actual pixel length */
const path = document.querySelector('.letter-path');
const len = path.getTotalLength(); // expensive JS DOM call
path.style.strokeDasharray = len;
path.style.strokeDashoffset = len; // start invisible
path.style.transition = `stroke-dashoffset ${len/200}s ease`;
path.style.strokeDashoffset = 0; // draw
/* With path-length: 100 — normalised coordinates, pure CSS */
.letter-path {
path-length: 100; /* normalise — all paths share the same coord system */
stroke-dasharray: 100; /* one full length */
stroke-dashoffset: 100; /* start invisible */
animation: draw 0.4s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; } /* always 0-100, regardless of actual path length */
}