The splash

The mark, there at once, with a light running round it. It is centred on the page surface on every full page load, the first visit and every refresh, until the app is ready, and then it fades away. It never appears for a move inside the app.

Animated · one-link-splash.svg Replay

Reduced motion · one-link-splash-still.svg

What it does

1. From the first frame: the mark, whole and filled, exactly as the still shows it. Nothing is drawn or faded in; the page appearing is the entrance.
2. From 0.15s: a soft white light runs round the inside of the loops, once every 1.8s, for as long as the wait lasts. It is clipped to the mark.

In an app

• Before any script. The splash is in the page's own HTML, so it is in the very first frame, not after the bundle arrives. Its layout sits in a style block in the page head, not in the main stylesheet, which may still be loading.
• Reduced motion is the page's job. Chrome does not apply the SVG's own prefers-reduced-motion rule to an SVG shown as an image, so the page swaps files: <picture><source srcset="…still.svg" media="(prefers-reduced-motion: reduce)"><img src="…splash.svg" alt=""></picture>. The two files share a viewBox, and the animated one's first frame is pixel identical to the still.
• About 120px wide, centred both ways, with role="status" and the hidden words "Loading One Link".
• At least 600ms, then out. It stays until the first navigation settles and at least 600ms after the page started loading, so a fast load never blinks it for a single frame and the light has visibly begun. Then it fades over --dur-splash-out and is removed from the page.
• Honest when stuck. After --dur-splash-stuck a line appears under the mark, with no script needed: Still loading. If this stays, refresh the page.
• Never inline the SVG or redraw it: use the two files. They are written from one-link-mark.svg by scripts/splash.mjs, and the build fails if they drift.