Ampersand
React + Tailwind
// One stroke: in at the tail, up the diagonal, round the head, down into the bowl and out to the right.
const AMP = 'M46 50C38 42 26 30 20 22C15 15 17 6 25 6C33 6 34 15 28 20C22 25 12 30 11 39C10 47 17 52 25 51C33 50 39 43 43 34';
const css = `
@keyframes loader-ampersand-write {
0% { stroke-dashoffset: 1; }
45% { stroke-dashoffset: 0; }
65% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1; }
}
@keyframes loader-ampersand-nib { 0%, 100% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 45% { offset-distance: 100%; opacity: 1; } 50%, 99% { offset-distance: 100%; opacity: 0; } }
.loader-ampersand { position: relative; width: 56px; height: 56px; transform: scale(1.15); }
.loader-ampersand svg { width: 100%; height: 100%; overflow: visible; }
.loader-ampersand__ghost { fill: none; stroke: light-dark(#ebedf0, #232529); stroke-width: 4.5; stroke-linecap: round; }
.loader-ampersand__ink { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: loader-ampersand-write 2.6s cubic-bezier(0.55, 0.1, 0.4, 0.95) infinite; }
.loader-ampersand__nib { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 8px 2px color-mix(in oklab, light-dark(#373a40, #f1f2f3) 50%, transparent); offset-path: path('${AMP}'); offset-rotate: 0deg; animation: loader-ampersand-nib 2.6s cubic-bezier(0.55, 0.1, 0.4, 0.95) infinite; }
@media (prefers-reduced-motion: reduce) {
.loader-ampersand__ink { animation: none; stroke-dashoffset: 0; }
.loader-ampersand__nib { display: none; }
}
`;
export function AmpersandLoader() {
return (
<>
<style>
{css}
</style>
<div className="loader-ampersand" role="status" aria-label="Loading">
<svg viewBox="0 0 56 56" aria-hidden="true">
<path className="loader-ampersand__ghost" d={AMP} />
<path className="loader-ampersand__ink" d={AMP} pathLength={1} />
</svg>
<span className="loader-ampersand__nib" aria-hidden="true" />
</div>
</>
);
}Markup where the component goes, CSS in your stylesheet. No JavaScript.
HTML
<div class="loader-ampersand" role="status" aria-label="Loading">
<svg viewBox="0 0 56 56" aria-hidden="true">
<path class="loader-ampersand__ghost" d="M46 50C38 42 26 30 20 22C15 15 17 6 25 6C33 6 34 15 28 20C22 25 12 30 11 39C10 47 17 52 25 51C33 50 39 43 43 34"></path>
<path class="loader-ampersand__ink" d="M46 50C38 42 26 30 20 22C15 15 17 6 25 6C33 6 34 15 28 20C22 25 12 30 11 39C10 47 17 52 25 51C33 50 39 43 43 34" pathLength="1"></path>
</svg>
<span class="loader-ampersand__nib" aria-hidden="true"></span>
</div>CSS
@keyframes loader-ampersand-write {
0% { stroke-dashoffset: 1; }
45% { stroke-dashoffset: 0; }
65% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -1; }
}
@keyframes loader-ampersand-nib { 0%, 100% { offset-distance: 0%; opacity: 0; } 4% { opacity: 1; } 45% { offset-distance: 100%; opacity: 1; } 50%, 99% { offset-distance: 100%; opacity: 0; } }
.loader-ampersand { position: relative; width: 56px; height: 56px; transform: scale(1.15); }
.loader-ampersand svg { width: 100%; height: 100%; overflow: visible; }
.loader-ampersand__ghost { fill: none; stroke: light-dark(#ebedf0, #232529); stroke-width: 4.5; stroke-linecap: round; }
.loader-ampersand__ink { fill: none; stroke: light-dark(#373a40, #f1f2f3); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: loader-ampersand-write 2.6s cubic-bezier(0.55, 0.1, 0.4, 0.95) infinite; }
.loader-ampersand__nib { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 8px 2px color-mix(in oklab, light-dark(#373a40, #f1f2f3) 50%, transparent); offset-path: path('M46 50C38 42 26 30 20 22C15 15 17 6 25 6C33 6 34 15 28 20C22 25 12 30 11 39C10 47 17 52 25 51C33 50 39 43 43 34'); offset-rotate: 0deg; animation: loader-ampersand-nib 2.6s cubic-bezier(0.55, 0.1, 0.4, 0.95) infinite; }
@media (prefers-reduced-motion: reduce) {
.loader-ampersand__ink { animation: none; stroke-dashoffset: 0; }
.loader-ampersand__nib { display: none; }
}Goal: Create a "Ampersand" loader.
Visual behavior: An ampersand written in one unbroken stroke behind a glowing nib, held for a moment, then wiped away from where it began.
Technique:
- The ampersand is a single SVG path with pathLength="1" and a dash of 1; a dash-offset animation goes from 1 to 0 to write it, holds, then on to -1 so it erases from the start.
- A faint copy of the same path sits underneath as a guide.
- The nib is a small glowing dot that rides the same path with offset-path and offset-distance on the same timing, fading out while the letter is held.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the ampersand is shown fully written, with no nib.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: neutral only. Black, white and grays, no hues. Use the color values above as written, or my project's closest neutral tokens.
Return a single self-contained component. No dependencies.Goal: Create a "Ampersand" loader.
Visual behavior: An ampersand written in one unbroken stroke behind a glowing nib, held for a moment, then wiped away from where it began.
Technique:
- The ampersand is a single SVG path with pathLength="1" and a dash of 1; a dash-offset animation goes from 1 to 0 to write it, holds, then on to -1 so it erases from the start.
- A faint copy of the same path sits underneath as a guide.
- The nib is a small glowing dot that rides the same path with offset-path and offset-distance on the same timing, fading out while the letter is held.
Accessibility: The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the ampersand is shown fully written, with no nib.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
My colors: use my project's existing color tokens. The color values above are grayscale placeholders. Map each one by its role (surface, text, border, accent, glow) to my theme, and keep their relative lightness so contrast and the effect still read.
Return a single self-contained component. No dependencies.Paste into Claude, ChatGPT or Cursor after filling in {{USER_STACK}}, {{USER_STYLING}} and {{USER_CONSTRAINTS}}. Neutral keeps the greys you see here; Match my project asks the model to map them onto your own colour tokens.
Free to use in any project, commercial included. MIT-0, no attribution required. Licence
About this component
An ampersand written in one unbroken stroke behind a glowing nib, held for a moment, then wiped away from where it began.
- Dependencies
- None
- Difficulty
- Intermediate
- Triggers
- continuous, loop, draw
- Techniques
- svg, stroke dashoffset, keyframes
- Reduced motion
- Respected
- Theme
- Light and dark (follows your page's color-scheme)
The root has role="status" and aria-label="Loading"; everything inside is decorative. Under prefers-reduced-motion the ampersand is shown fully written, with no nib.