SVG — Clipping & Masking

Two ways to hide parts of a drawing. clipPath is a hard cookie-cutter — a pixel is fully in or fully out. mask is soft — luminance (or alpha) sets per-pixel opacity, so you can feather edges.

clipPath vs mask — side by side

shape position 60

mask feather 30

clipPath — binary, crisp edge

mask — soft, gradient opacity

clipPath

<clipPath id="clip">
  <circle cx="…" cy="80" r="55"/>
</clipPath>
<image … clip-path="url(#clip)"/>

mask (luminance: white = visible, black = hidden)

<mask id="mask">
  <radialGradient id="g">
    <stop offset="0%"  stop-color="white"/>
    <stop offset="100%" stop-color="black"/>
  </radialGradient>
  <circle cx="…" cy="80" r="55" fill="url(#g)"/>
</mask>
<image … mask="url(#mask)"/>

Drag shape position to move both cut-outs together; drag mask feather to soften only the mask. The clip never softens — that's the whole point.