Thin enough for the hairlines
the thick strokes never fully reveal. Fill stays clipped. Chunks of the signature simply don't show up.
The brief
Acsa photographs the darker, quieter side of the natural world — the moments between sunrise and shadow, the textures that bloom in low light. Her work is atmosphere over perfection. A site for that work can't announce itself. It has to hesitate, the same way her light does.
So the whole page is restraint: near-black, slow, generous with space. Which left one problem. If nothing shouts, how does the visitor feel the author arrive?
The answer was her signature. Not as a logo in a corner — as an event. One acid-green line, the only living colour on the page, drawing itself across her portrait as you scroll into the About section. Her identity rendered the way her photography works: curve, movement, patience.
That was the concept. Then I tried to build it.
Not as a logo in a corner — as an event.
The problem: fill is not stroke
The signature was designed by hand — sketched in Procreate, refined into vectors in Linearity Curve on iPad. Real calligraphy: strokes that swell and taper, thick on the downstroke, hairline on the exit. That variation is the character of the piece.
The standard way to animate a line drawing itself is stroke-dashoffset. Give a path a dash pattern as long as itself, offset it out of view, then tween the offset to zero. The line appears to draw. It relies on one thing: the path must have a stroke.
Calligraphy tools don't export strokes. They export fills. That thick-to-thin taper isn't a line with a changing width — it's the outline of a shape. What comes out of the export is a closed silhouette: the path travels up one side of the letterform, around the tip, and back down the other. stroke-dashoffset on that geometry doesn't draw a signature. It traces the outline of a puddle.
And the fix that first suggests itself — redraw everything as a uniform-width stroke — throws away exactly the thing that made it calligraphy. So: the artwork can't be animated, and making it animatable destroys the artwork.
“The taper was never decoration. It was the point.”
The turn: stop animating the art
The way out was to stop trying to animate the artwork at all. Leave the calligraphy exactly as exported — full fill, every swell and taper intact. Then hide it behind an SVG <mask>, and animate the mask instead.
The mask holds a stroke path: a single simple line running down the centre of the signature, the path the pen actually travelled. That path has no artistic job. Nobody sees it. Its only role is to be the shape a stroke-dashoffset can move along.
As the mask's stroke draws in, it uncovers the fill beneath it. The visitor sees calligraphy appearing, with all its original weight. What's actually animating is an invisible line with none of it.
“The artwork stays art. The animation gets geometry it can use.”
Eight segments, eight widths
The first version worked and looked wrong. A mask stroke needs enough width to cover the artwork beneath it. But the artwork's width changes constantly — six pixels at the hairline exit, forty at the belly of a downstroke. One uniform mask width forces a bad trade:
Thick enough for the belly
the hairlines get a mask far wider than the art. The reveal runs ahead of the ink, exposing empty canvas before the stroke reaches it. The line stops feeling drawn and starts feeling wiped.
Neither is fixable by tuning the number. The problem is that the number is a constant and the artwork is not. So the mask stopped being one path.
I cut it into eight segments, each following its own stretch of the signature, each carrying its own stroke-width — matched to the artwork it sits above. Fat where the pen pressed, hairline where it lifted. Eight paths, eight widths, one continuous illusion. The mask now has the same pressure profile as the calligraphy. It hugs the art instead of approximating it.
Then the segments run in sequence on a GSAP timeline, driven by ScrollTrigger. Segment two starts as segment one lands. The seams sit at natural pen-lift points, so the joins read as the hand's own rhythm rather than as eight things pretending to be one.
Iterating across the tools
The last stretch wasn't a coding problem or a drawing problem. It was both, alternating.
Some segments couldn't be masked cleanly no matter how the code was tuned — the letterform itself was fighting the technique. So the fix went back to Linearity Curve: reshape the curve, move the pen-lift, re-export, re-code, re-watch.
The signature that shipped is not the signature I designed. It's the one that survived the loop.
Draw → code → test → judge → redraw.
Result
The signature draws itself across Acsa's portrait as you scroll into her About section — one acid-green line moving through a page that has, until that exact moment, refused every colour.
Her calligraphy, untouched. Her pressure, her taper, her curve.
It just happens to be revealed by eight invisible lines that nobody will ever see.