Words that melt into each other
Text, Scroll, SVG
NewFree
Back to the library
The letter pulled by its handles
In the minimal style: a capital S drawn the way a type designer draws it with the pen tool. The nib sets one anchor point at a time and pulls out its handles, which move on springs and bend the curve live; when the path closes the letter fills, the handles go back in, the points vanish and the clean S is left, settling on the baseline.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The letter pulled by its handles</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-scene>
<!-- the stage: the script draws a capital S the way a type designer does with the pen tool, one anchor point at
a time, pulling out its handles; at the end the path closes, fills and the handles go home -->
<svg class="palco" data-stage role="img" aria-label="S" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the fill pours in from the point where the path closes, and later drains from the top -->
<clipPath id="flood"><circle data-flood cx="0" cy="0" r="0" /></clipPath>
<clipPath id="drain"><rect data-drain x="0" y="0" width="0" height="0" /></clipPath>
</defs>
<!-- the type designer's guides: cap height and baseline -->
<g class="guide" data-guides>
<path class="guida" data-cap />
<path class="guida" data-base />
<text class="etichetta" data-cap-label>Cap height</text>
<text class="etichetta" data-base-label>Baseline</text>
</g>
<g data-glyph>
<g clip-path="url(#drain)">
<path class="pieno" data-fill clip-path="url(#flood)" />
</g>
<path class="tracciato" data-path />
<g data-handles></g>
<g data-anchors></g>
</g>
<!-- the pen tool -->
<g class="penna" data-pen>
<g data-pen-body>
<path class="penna__corpo" d="M0 0 L-5.6 -11.5 L-5.6 -17 L5.6 -17 L5.6 -11.5 Z" />
<path class="penna__taglio" d="M0 0 L0 -8.5" />
<rect class="penna__corpo" x="-5.6" y="-23" width="11.2" height="4.2" />
</g>
</g>
</svg>
<p class="nome" data-name aria-hidden="true"></p>
<p class="nota">Click or tap to draw it again</p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Playground
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
16 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The letter pulled by its handles” from Animorio and fit it into my siteWhat it does
On a warm white page two thin lines draw themselves, the cap height and the baseline, with their names. A small nib comes in, like the cursor of the pen tool in a drawing program, and starts drawing an S. It goes from one point of the outline to the next trailing the curve behind it; when it gets there it clicks: a small blue square appears, the anchor point, which swells for a moment and settles. Then the nib drags and the two handles come out of the point, two thin lines with a small diamond at the tip, one toward the nib and the other the opposite way. The handles are on springs: they chase the nib, overshoot a hair when it lets go and come back, and the curve between two points bends with them. The point the nib is working on is full, the others hollow. At the two ends of the S the corners have one handle only: the one that is not needed snaps back into its point as soon as it is pulled out. After fourteen points the nib goes back to the first one and closes the path: the letter fills with black starting from there, the nib leaves, the handles go back into their points one after the other, the points vanish and the clean full S is left. As it touches down it squashes a little and springs back up, the baseline gives a few pixels, and underneath the name of the made-up typeface, Sorrel Grotesk, rises letter by letter, gaining weight and width. After a pause the name drops, the letter drains from the top, the path unwinds back to the first point, the lines leave and the nib starts again. A click restarts it.
How it works
The letter in numbers
The S is a list of fourteen points in font units (cap height 700, y downwards): for each one its place and the offset of its incoming and outgoing handle. The points sit on the extremes, as a type designer puts them, so almost every handle is level or upright; the two halfway along the spine follow its slope and the four at the ends are corners with one handle only. The path is a run of cubic Bézier curves: from one point to the next, with the outgoing handle of the first and the incoming handle of the second.
A stage in pixels
The SVG has a viewBox as big as the window, so one unit of the drawing is one pixel: lines, squares and diamonds stay thin and the same size at every size. A single scale takes the letter’s units to the screen, chosen so the S fills a little more than half the height (or two thirds of the width on a phone), and the name of the typeface goes just under the baseline.
Handles on springs
Every handle tip is a damped spring: a pull toward where it should be (SPRING) and a drag (BOUNCE lowers the damping), worked out in small steps of 1/240 of a second every frame. While the nib drags, the outgoing tip wants to be on the nib and the incoming one on the opposite side, in the right proportion; when it lets go, both want their final place. At a corner the handle that is not needed wants to go back to zero and snaps there, passing a hair beyond the point. The curve is always drawn with the real tips, so it bends along with the springs.
Direction: one timeline
It is all one GSAP timeline with repeat -1: the guides, the nib coming in, for each point the journey (with the rubber-band curve from the last point to the nib), the click, the drag and the release, then the closing, the fill, the exit and the way back to nothing. Changes of state (which point is selected, when a handle is set free) are calls in the timeline, and a reset at time zero puts everything back on every round. A single function, on the GSAP ticker, moves the springs on and writes the stage.
Fill, retract, drain
The fill is the same path, clipped by a circle that grows from the first point (clipPath); to drain it a second clip, a rectangle, comes down from the top, so the way back is not the fill run backwards. When the handles go back in only their drawing gets shorter, not the real tips: the curve stays the same. The path unwinds with stroke-dasharray on pathLength 1, and the name of the typeface rises with font-variation-settings going from weight 300 and width 80 to weight 560 and width 100.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Sorrel Grotesk' | The name of the typeface written under the letter once it is full. |
DRAW | script.js | 8 | How many seconds the nib takes to set all fourteen points. |
SPRING | script.js | 230 | How stiff the handles’ springs are: higher and they reach their place sooner. |
BOUNCE | script.js | 0.6 | How far the handles overshoot and wobble before they stop (0 = they stop dead). |
LINE | script.js | 1.25 | How thick the path and the handles are, in pixels. |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 3 | How many seconds the full letter stays on show. |
LOOP | script.js | true | Whether the letter empties and the nib draws it again. With false it stays full. |
When to use it
To tell the story of something drawn by hand: the opening of a type foundry’s site, a graphic design or branding studio, a lettering portfolio, the page of a type design course or a drawing app, an elegant loading screen. It suits pages where everything else is quiet and where you want to show the craft behind a shape.
On phones
The same animation with the sizes adapted: the S takes two thirds of the width, squares and handles stay thin and the guides start from the edge with their margin. A tap restarts it.
With reduced motion
Nothing moves: the drawn letter, with its points and handles already in place, fades in; then it fills with a fade, the points fade away and the name appears. If the animation starts again, everything leaves with a fade.
Pitfalls
- The first version brought the handles back in by taking their real tips to zero: the curve lost its handles and the S turned into a polygon with corners just as it was filling. Now the tips stay where they are and only the drawing of the handles gets shorter.
- With handles only on the extremes the spine of the S came out very thin: with upright handles the middle of a curve has to sit halfway across, and the diagonal can never be thicker than the stems. It needs two points in the middle of the spine, with handles leaning like it.
- Draining the letter by running the fill backwards would give frames identical to the intro, and the preview video would think the round was over: the drain uses another clip, a rectangle coming down from the top.
- A zero-length dash with round caps still draws a dot: the guides and the path, when empty, are hidden completely.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.3 KB; the libraries: GSAP 28 KB.
Testing
Tested on 14 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
