Write-On Text Animation
Write-on text animation: a pen traces each letter's outline, then the letter fills in, one after another. Use any font, your own too, and loop it as MP4 or GIF.
What is a write-on text animation?
A write-on animation shows text as if someone were drawing it. A line travels round each letter, and then the letter appears in full. On the web it's usually done by animating the dash pattern of an SVG stroke.
This tool draws the same way, on a canvas. Every glyph in an outline font is a closed path of curves. A single dash, roughly as long as the longest letter outline, grows along that path until the pen has gone all the way round.
How to make text write itself on
Start on the blank canvas, or load an image or video to write over. Type your line in Text. The Write on motion is already on, with Size at 0.2.
Speed is the overall pace, and Amount is how fast the pen moves on from one letter to the next. Font, Weight, Size, Colour and Position X and Y decide how the line looks and where it goes, and you can add your own .ttf or .otf font.
At Speed 0 the line shows up whole, already written, and a still saved at any moment does the same. Write on is one of ten motions in Kinetic Typography Maker, next to the Type on and Word by word reveals.
Settings for a signature intro, a fast title and a loop of a set length
Signature intro: a script .ttf or .otf of your own, or Balsamiq Sans (hand-drawn), at Amount 0.2. Each letter takes 0.42 seconds (0.5 minus 0.4 times Amount), which is slow enough to follow the pen.
Fast title: Amount 1 starts every letter a tenth of a second after the one before, so a ten-letter word gets written in about a second.
Set length: at Speed 1, one cycle is the character count plus a half, times 0.5 minus 0.4 times Amount, plus 1.2 seconds, with spaces counted. HELLO at Amount 0.5 comes to 2.85 seconds. Set Speed to 0.95 and it's 3, so a three-second recording loops exactly.
Why does the pen trace round each letter instead of along it?
Fonts store letters as closed outlines. They don't store the path a pen would take. So the dash runs round the edges of a stroke and never down its middle, and it grows along every outline of a letter at once, which is why an O draws its outer and inner edges together.
For a real single-line handwriting look you'd need a font drawn as one stroke per letter, and outline fonts can't express that. A light, thin face gets closest, because its two edges sit near each other and read as one line.
How does the write-on animation loop?
Every letter starts its outline a beat after the one before. As the pen moves on, the outline fades and the fill comes up. Once the last letter's done, the line holds for 1.2 seconds at Speed 1 and then starts over.
The pen uses the text's own color and is a fortieth of the letter height wide. It keeps cycling for as long as you record.
Saving a write-on animation
When a file shrinks, the pen line is the first detail to go. A GIF of a landscape clip is at most 540 pixels tall. There, Size 0.2 leaves a pen under 3 pixels wide and Size 0.1 about a pixel, so keep Size at 0.15 or higher for GIF, or record MP4.