SVG Mask Sweep Text Reveal — Clip-Path Wipe Animation

An SVG mask sweep reveals a headline by moving a shape — here a tall, narrow ellipse — through an SVG <mask> referenced by the heading's own mask CSS property, so the text appears wherever the shape currently overlaps it, like a spotlight passing across a dark room. This is a different mechanism from a CSS clip-path scroll-driven reveal: a <mask> supports soft, blurred, and gradient-edged shapes (not just hard polygon boundaries), and moving an SVG shape's own geometric attribute produces a smoother, more organic sweep than animating clip-path polygon coordinates directly. Trigger it on click, hover, or page load — this demo replays on click so you can see the sweep repeatedly.

The SVG mask structure

Inside <defs>, a <mask id="sweepMask" maskUnits="objectBoundingBox"> contains two shapes: a full-size black <rect> covering the entire bounding box (mask value 0 = fully hidden) and a white <ellipse id="sweepShape"> (mask value 1 = fully visible) positioned at cx="-0.25" — just outside the left edge of the box. maskUnits="objectBoundingBox" means every coordinate in the mask is expressed as a fraction of the masked element's own size (0 to 1), so the mask works correctly regardless of the heading's actual pixel dimensions or how the text reflows at different widths.

Applying the mask to HTML text

mask: url(#sweepMask) (with the -webkit- prefix for Safari) applies the SVG mask directly to the <h1> element as a CSS property — this works on ordinary HTML elements, not just SVG shapes, because CSS Masking is a separate spec from SVG that happens to be able to reference SVG <mask> definitions by ID. Wherever the mask is white, the heading is visible; wherever it is black, the heading is invisible; the soft edge of the ellipse (versus a hard polygon edge) naturally anti-aliases into a slightly feathered reveal boundary.

Animating the shape's own attribute, not a CSS property

playSweep() directly sets the ellipse's cx attribute — first snapping it back to -0.25 with transition: none (so the reset is instant and invisible), forcing a layout read via shape.getBoundingClientRect() to flush that instant snap, then re-enabling a cx transition and setting cx to 1.25 (past the right edge) on the next animation frame. Because cx is animated as a plain SVG presentation attribute rather than a CSS transform, this technique works even in contexts where transforming a mask's internal shape via CSS transforms is unreliable across browsers — animating the geometry attribute directly is the more portable choice for SVG mask content.

Why 1.25 and -0.25, not 0 and 1

Starting the ellipse's center at -0.25 (rather than 0) and ending at 1.25 (rather than 1) ensures the shape's full width — including its rx="0.22" radius — is completely outside the bounding box at both the start and end of the animation, so the sweep begins and ends on a fully hidden and fully revealed headline respectively, with no shape edge visibly clipped by the box boundary mid-transition.