149
AI ready

Handwriting Draw

£7 or the whole Vault, £79.20

A signature or hand-lettered word that writes itself stroke by stroke, in the right order and with pen pressure, built on GSAP DrawSVGPlugin and MotionPathPlugin.

DrawSVGMotionPathPluginScrollTrigger intermediate
5 more details
svg-pathsvg-animationscroll-revealscrubstagger

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Handwriting Draw demo in new tab

Released

About this effect

Handwriting Draw writes a founder's signature or a short hand-lettered word the way a person writes it. Each stroke goes down in its real order, the pen lifts and hops to the next stroke, and the dots and crossbars come last. Thick downstrokes and hairline upstrokes keep their weight while they are drawn, because each stroke is a filled ink shape uncovered along its centreline rather than a line of even width. It is built on GSAP DrawSVGPlugin, which draws the centrelines, and MotionPathPlugin, which carries a small pen tip along the active stroke.

Read the full effect overview

It plays once when the lettering scrolls into view, about two seconds for a signature, or scrubs with the scroll when you set one attribute. Fresh ink carries a darker wine tone and dries to your ink colour just behind the pen. The demo is one sheet with a short note closed by Mara Quist's signature, a Sign again button, and a Card option where "Thank you" writes across a photograph of handmade bowls.

Handwriting Draw - GSAP animation effect preview

What's included

9 items
  • Built on GSAP DrawSVGPlugin and MotionPathPlugin, with ScrollTrigger for play-on-view and scrub
  • Strokes write in the order you number them, each taking time in proportion to its length
  • Pressure survives the draw: filled ink shapes with real thick and thin, uncovered along their centrelines
  • A pen tip rides the stroke, dwells at sharp turns and lifts between strokes with its shadow left on the paper
  • Fresh ink dries from a wet tone to the ink colour a moment after the pen passes
  • Plays once on view, replays on click or from any button, or scrubs with the scroll
  • Plain centreline strokes are supported too, drawn as an even pen line
  • Accessible name on the SVG, strokes hidden from screen readers, finished lettering for reduced motion and without JavaScript
  • Includes the Mara Quist signature and the "Thank you" lettering as editable example files

Perfect for

4 use cases
  • A founder's letter or about page that closes on a real signature
  • Order confirmation and thank-you pages that feel written by hand
  • Wedding, event and invitation sites that sign off with the couple's names
  • A hand-lettered word across a hero photograph, scrubbed as the visitor scrolls

How it works

2 sections

Each stroke of the lettering is two shapes drawn in your design tool: the ink itself, outlined so that its thick and thin parts are part of the shape, and the centreline the pen followed. In the browser the centreline becomes a mask over the ink, and GSAP DrawSVGPlugin draws that mask from start to end, so the ink is uncovered as if a nib were laying it down. Strokes take their turn in the order you number them, with longer strokes taking longer, a slow start and finish to each one, and a short pause at every sharp turn.

GSAP MotionPathPlugin moves a small pen tip along the same centreline in step with the ink. Between strokes the tip lifts on a short arc to the start of the next one, its shadow staying on the page, and settles back down with a little overshoot. ScrollTrigger starts the writing when the lettering comes into view, or ties it to the scroll position in scrub mode. The SVG keeps an accessible name such as "Signature: Mara Quist", the strokes are hidden from screen readers, and with reduced motion or without JavaScript the finished lettering is shown straight away.

Plugins DrawSVG, MotionPathPlugin, ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Handwriting Draw opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£7 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Paste your lettering as an inline SVG (the full Mara Quist signature is in examples/signature.svg):

Code snippet omitted: it ships with the download.

That is all. The lettering writes itself the first time it scrolls into view, and again whenever it is clicked.

Using It With Your Own Design

What the effect needs from your markup: an inline <svg data-hw> with a viewBox. Inside it, one element with data-hw-stroke per stroke (a <g> is usual), numbered in writing order; strokes without a number keep document order. Each stroke holds one or more pairs of data-hw-ink (a filled shape) and data-hw-mask (its centreline), matched in order. A stroke can instead hold a single data-hw-line path, which is drawn as an even pen line with no ink shape. Keep the strokes free of transform attributes (flatten them on export) so the pen tip and the masks share one coordinate space.

What is only the demo's styling: everything after the Demo page comment in style.css: the sheet with its short note and studio photograph, the Signature / Card picker, fonts and the card photograph. The demo plays the card word once rather than scrubbing it; add data-hw-scrub to get the scrubbed version described below. The examples/ folder is reference material, not runtime code.

CSS the effect depends on: the rules before the Demo page comment. [data-hw-mask] must stay fill: none; stroke: none (it is geometry, never painted). The pre-hide rule hides ink only while .has-js is set, motion is allowed and the script has not yet marked the SVG data-hw-state, so there is no flash of finished lettering and nothing is ever left blank. The pen tip takes its colour from --hw-pen; size it by editing the script's 4.2 (CSS pixels).

Turning your own signature into strokes

The lettering is real centreline strokes plus width shapes, not a font outline. Any vector tool with a variable-width stroke works; this is the Figma and Illustrator route.

  1. Write it, then trace it. Sign on paper or a tablet, place the image on a locked layer, and draw one open path per stroke over it with the pen tool, in the direction and order you wrote it. A stroke ends wherever the pen left the paper. Dots and crossbars are their own strokes and usually come last.
  2. Give each path its pressure. Illustrator: the Width Tool (Shift+W), pulling the downstrokes wide and leaving upstrokes thin, or a calligraphic brush. Figma: select the path and use Variable width in the stroke panel. Taper the start and end of each stroke.
  3. Make the ink shapes. Duplicate each stroke. On the copy, Illustrator Object > Path > Outline Stroke (or Expand Appearance for a brush), Figma Outline stroke. The outlined copy is the ink; the untouched original is its centreline.
  4. Split loops. Where a stroke crosses itself (the loop of an l, h or y), cut the centreline at the crossing and the ink shape to match, so the stroke becomes two pairs. Otherwise the first pass uncovers a little of the second pass early. Cusps, such as the top of an a or u where the pen reverses, look cleanest split there too.
  5. Export. Group each stroke's pair, export as SVG with transforms flattened and outlines kept, paste it inline, and add the attributes: data-hw and an aria-label on the <svg>, data-hw-stroke="1", "2"... and aria-hidden="true" on the groups, data-hw-ink on the filled shapes and data-hw-mask on the centrelines. Delete any fill, stroke or style attributes your tool wrote so the CSS can colour the ink.

Open examples/signature.svg or examples/thank-you.svg in your design tool to see a finished file: 5 strokes and 21 pairs for the signature, with the i dot and the t crossbar last.

Options

Set these on the <svg data-hw> element.

Attribute Values Default Description
data-hw-stroke Number (on each stroke) Document order Writing order of the strokes
data-hw-scrub Present, or false Off Tie the writing to the scroll position instead of playing once
data-hw-speed Number 1 Pen speed multiplier; 0.6 writes slower, 1.5 faster
data-hw-pen true, false true Show the pen tip
data-hw-lift Number 1 How high the pen lifts between strokes; 0 slides without lifting
data-hw-start ScrollTrigger position top 82% When writing starts (play) or begins (scrub)
data-hw-end ScrollTrigger position clamp(bottom 40%) Where a scrub finishes
data-hw-nib Number, viewBox units Measured Width of the mask line; measured from each ink shape when left out

On any button or link elsewhere on the page:

Attribute Values Description
data-hw-replay CSS selector, or empty Replays the matching lettering (all of it when empty)
CSS custom property Default Description
--hw-ink #17181d Ink colour once dry
--hw-wet #6d1f3f Fresh ink colour; set it equal to --hw-ink to turn drying off
--hw-pen #f0306a Pen tip

Accessibility

  • Accessible name: give the <svg> role="img" and an aria-label that says what is written ("Signature: Mara Quist"). Mark every stroke group aria-hidden="true"; the pen tip the script adds is hidden too.
  • Reduced motion: with prefers-reduced-motion: reduce the finished lettering shows at once, with no drawing and no pen. Switching the preference while the page is open is handled.
  • No JavaScript or a blocked CDN: the ink shapes are ordinary filled paths, so the finished lettering shows. Hide replay buttons the same way the demo does (.has-js only).
  • Keyboard: clicking the lettering replays it, but an SVG is not focusable, so offer a real <button data-hw-replay> for keyboard and screen reader users.
  • Touch: a tap replays, like a click. In scrub mode the lettering follows the scroll on any device.

Dependencies

Required:

  • GSAP 3.12+ (the demo is pinned to 3.15.0)
  • DrawSVGPlugin
  • MotionPathPlugin
  • ScrollTrigger

All GSAP plugins are free, including DrawSVGPlugin.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.