Channel · 22
Clip and mask
裁剪与遮罩 · clip-maskA clip gives content a hard edge; a gradient mask gives its edge a soft reveal.
A reveal can control which part of an image is visible instead of fading the whole image. Circle reveals often miss a corner when they use half the diagonal from the container center. Measure from the click to the farthest corner so the final circle truly covers the stage.
Formula
R = max distance((cx,cy), each of four corners) clip-path: circle(r px at cx px cy px) mask-image: linear-gradient(90deg, opaque, transparent)
Parameters
| This page | Mature libraries | |
|---|---|---|
| origin | click position | — |
| radius | distance to farthest corner | —Recompute when the stage or origin changes. |
| edge | hard circle / soft gradient | — |
Doing it well
- For a click-origin circle, use the maximum distance to the four corners. A center-based half diagonal leaves the far corner uncovered.
- Use
clip-pathfor a crisp edge and gradientmask-imagefor a feathered edge; the site uses these in iris and benchmark respectively.www-motion/rewrite/iris/app.js:5; www-motion/rewrite/benchmark/index.html:30–31 - Use element-local coordinates for the origin and recalculate the radius after resize; viewport coordinates do not belong in an element-local clip.
- Clipping and opacity can work together. In
pixels, only the outgoing and incoming text remain visible while each gets its owninset().www-motion/rewrite/pixels/render.js:4
In our cases
Ten studies use clip-path or a mask; only cutout is tagged as mask. iris opens a circular aperture, while pixels uses opposing inset() clips to hand text from one panel to the next.
Used in 10 cases
Reference implementation · basics.js
/** Radius that covers the whole element from (cx, cy): the distance to its farthest corner. */
export const coverRadius = (w, h, cx, cy) => Math.max(Math.hypot(cx, cy), Math.hypot(w - cx, cy), Math.hypot(cx, h - cy), Math.hypot(w - cx, h - cy));
export const circleClip = (r, cx, cy) => `circle(${r.toFixed(1)}px at ${cx}px ${cy}px)`;