Monogram

Build a fullscreen preloader called Monogram.

Centre an SVG about 54% of the stage's smaller dimension on warm off-white, drawn in near-black with no fill, a 3-unit stroke, and round caps and joins. In a 100 by 100 viewBox, draw three separate paths: a square frame from 18,18 to 82,82; a vertical stem from 38,30 down to 38,70; and a bowl running right from 38,30, arcing over a radius-11 curve and returning left at 38,52.

Give every path an explicit pathLength of 100. That is the trick that keeps this maintainable: the three paths have wildly different real lengths, but normalising them means one dash-array value of 100 works for all of them, and you can add or reshape a path later without recomputing anything.

Animate each with a 4.2s cubic-bezier(0.65, 0, 0.35, 1), staggered 170ms apart by index. Start at dash-offset 100 and 20% opacity; reach dash-offset 0 at full opacity by 38%; hold the completed mark until 70%; then continue to dash-offset -100 and back to 20% opacity.

Running the offset past zero into negative is what makes the line leave the way it arrived, sliding off its own far end rather than fading, so the whole loop feels like one continuous gesture.

Loop forever. Under prefers-reduced-motion, hold the mark fully drawn.