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

Duration
3s
Resolution
1440×900
Format
SVG
handwrittenbrush-scriptmask-revealsignature-drawprefers-reduced-motion

Brush Script / Mask Reveal

Irregular Handwritten Mask Reveal

A wide animated mask stroke reveals a filled script layer so brush-style text appears to fill in along the writing path instead of only drawing an outline.

brush word brush reveal - 2.9s cycle · 1.00 intensity
Scribe

Wide mask · filled text

Brush Word

A broad mask stroke uncovers filled script text with irregular-looking edges.

The reveal mask is wider than the glyph strokes, preventing thin gaps during intermediate frames.

  • mask
  • brush script
  • fill reveal
noted

Lowercase · slower pass

Notebook Note

A softer handwritten note reveals with a slower mask pass for editorial uses.

Mask dash offset follows a curved guide path to imply hand movement.

  • note
  • mask path
  • editorial
launch

Thick stroke · energetic reveal

Campaign Script

A thicker reveal works for campaign lettering where the fill should arrive with more energy.

The mask path covers ascenders, descenders, and connecting strokes before the final frame.

  • campaign
  • wide stroke
  • viewport clip

Brush mask inspector

Brush Word

Scribe
Motion contract
The reveal mask is wider than the glyph strokes, preventing thin gaps during intermediate frames.
Accessibility
Reduced motion skips the mask animation and exposes the completed filled word.

The filled text is separate from the animated mask so the final state has solid letterforms.

css
<mask id="brush-reveal">
  <path
    d="M28 116 C62 62 102 58 144 100"
    pathLength="1"
    stroke="white"
    stroke-width="34"
    stroke-linecap="round"
  />
</mask>

<text mask="url(#brush-reveal)"> Scribe </text>