← Back to gallery
SVG

Irregular Handwritten Mask Reveal

A brush-script SVG reveal that separates a filled text layer from a wide animated mask stroke so handwriting appears to fill in naturally.

handwrittenbrush-scriptmask-revealsignature-drawprefers-reduced-motion

Brush mask · stroke-dashoffset reveal

Irregular Handwritten Mask Reveal

A wide animated mask stroke uncovers a filled brush-script word so the text appears to fill in along the writing path instead of just outlining. Three variants demonstrate a bold word sweep, a slower lowercase note, and an energetic campaign script.

Wide sweep · bold word

Brush Word

A bold brush-script word ("Scribe") that fills in along a single broad sweep. The mask is wider than the glyph strokes so no thin gaps appear during intermediate frames — the word looks painted on, not drawn.

  • brush
  • wide mask
  • bold word

Lowercase · slower pass

Notebook Note

A softer lowercase note ("noted") with a gentler horizontal mask pass. The reveal is slower and curves slightly along the writing line, giving the editorial feel of someone underlining as they read.

  • lowercase
  • editorial
  • curved mask

Thick stroke · diagonal reveal

Campaign Script

A thick energetic reveal for campaign lettering ("launch"). The mask cuts across at a slight upward diagonal and overshoots the glyph bounds — the SVG viewport clips the final reveal cleanly so the fill arrives with momentum.

  • campaign
  • thick stroke
  • diagonal

Handwritten mask inspector

Brush Word

  • brush
  • wide mask
  • bold word

A bold brush-script word ("Scribe") that fills in along a single broad sweep. The mask is wider than the glyph strokes so no thin gaps appear during intermediate frames — the word looks painted on, not drawn.

.handwritten-stage__mask-stroke {
  fill: none;
  stroke: white;
  stroke-width: 110px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: handwrittenReveal 5.00s cubic-bezier(0.55, 0.05, 0.35, 0.95) infinite;
}

.handwritten-stage__word {
  fill: var(--handwritten-accent);
  font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
  font-weight: 700;
}

.handwritten-stage__guide {
  stroke: var(--handwritten-accent-2);
  stroke-width: 1.4px;
  opacity: 0.18;
}

@keyframes handwrittenReveal {
  0%, 6%    { stroke-dashoffset: 1; }
  /* draw across the word, hold the filled state, fade reset while invisible */
  46%       { stroke-dashoffset: 0; }
  82%       { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: 1; }
}