` — marks do not replace letters. - Initials disc `aria-hidden`. Legend `aria-hidden` (the footer sentence explains hover). - Replay is a real `` with visible "Replay" text and a 16px undo icon. - Subscribe is a link, 40px-class padding (10 16) plus 1px border, radius 999. - Tab order: Subscribe → Replay. Quote is not interactive; hover-redraw is pointer-only (Replay is the keyboard equivalent for the full sequence). - Contrast: navy on paper is high; `--ink-2` for 12–15px meta; yellow marker is a graphic over black type (multiply), not text colour. Red pen on paper ~4.7:1 at 2.2px — it is decoration around already-readable type. - Hit target: Replay 40px. Mark hover uses the word boxes (large display type). ## Responsive rules - ≥ 1280: quote 58px, main `1fr 250px`, page pad 0 56 0 96, rule at 55px. - 1024–1279: quote 48px; keep two columns. - 768–1023: quote 40px; stack the note under the byline (one column); left pad 64px; rule at 32px. - < 640: quote 32px; header pill may wrap; Replay stays 40px. Highlights stay nowrap — if a phrase would overflow, drop quote size before allowing a wrap through a `.mk`. - Reduced motion: no dash or clip animation; every mark is drawn on first paint. ## Acceptance checklist - [ ] Quote is 58px Newsreader / 1.16 / −0.022em / opsz 72, on paper with a 1px rule at x=55. - [ ] Highlight strokes are 9px `#FFD43B`, opacity .92, `mix-blend-mode: multiply`, behind the glyphs. - [ ] Circle and underline are `#D9402A` 2.4 / 2.2px and use the paths in Structure. - [ ] Sequence delays are 300, 900, 1400, 1900, 2250, 2500ms; circle draws in 820ms, others 650ms, easing `cubic-bezier(.65,0,.35,1)`. - [ ] Note is Caveat 30/600, −5deg, with the 150×84 arrow; words clip in 700ms steps(14) after the arrow starts + 380ms. - [ ] Hovering a mark retraces only that stroke; Replay retraces the whole timeline. - [ ] `pathLength="1"` + `stroke-dasharray: 1` (not a huge computed length). - [ ] Masthead "The Margin", Issue 31 · Autumn 2026, Subscribe — €48/yr, Ines Okafor, 2 October 2026. - [ ] Reduced motion shows finished marks with no draw. - [ ] Focus rings are 2px pen-red on Subscribe and Replay. - [ ] Highlight spans do not wrap (`white-space: nowrap`). - [ ] Circle SVG sits above the italic; highlight SVGs sit behind. ## Implementation notes **`pathLength="1"`** so every curve, regardless of pixel length, uses the same 0–1 dash math: ```html ``` **Restart a single stroke on hover** without restarting the page: ```js m.addEventListener('mouseenter', () => { const p = m.querySelector('path'); if (!p) return; p.style.animation = 'none'; void p.getBBox(); p.style.animation = 'draw ' + (m.classList.contains('ci') ? 820 : 650) + 'ms cubic-bezier(.65,0,.35,1) 0ms backwards'; }); ``` **Replay the sequence** by cycling the class (inline styles from hover must be cleared first): ```js btn.addEventListener('click', () => { stage.querySelectorAll('path, .note span').forEach((p) => { p.style.animation = ''; }); stage.classList.remove('run'); void stage.offsetWidth; stage.classList.add('run'); }); ``` Common mistakes: a CSS `background` underline instead of a stretched path (it will be ruler-straight); `mix-blend-mode` on the text instead of `.hl` (the type will stain); animating `stroke-dashoffset` from a JS-measured length while also setting `pathLength="1"` (the two fight); putting the SVG after the words in DOM without `z-index: -1` so the yellow covers serifs; using `forwards` instead of `backwards` (marks flash finished during their delay). --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/text-marker-highlight-draw. Free to use in your products. Credit line: Designed using Design Lounge.*