December 27th, 2020
The big thing is that
clipPath (the element in SVG, as well as
clip-path in CSS) is vector and when it is applied, whatever you are clipping is either in or out. With a mask, you can also do partial transparency, meaning you can use a gradient to, for example, fade out the thing you are masking. So it occurs to me that masks are more powerful, as they can do everything a clip-path can do and more.
Sarah has a whole post going into this as well.
What always bends my brain with masks is the idea that they can be
luminance-style, meaning white is transparent, black is opaque, and everything in between is partially transparent. Or they can be
alpha-style, where the alpha channel of the pixel is the alpha-ness of the mask. Writing that feels relatively clear, but when you then apply it to an element it feels all Reverso and confusing.
The original post clipPath vs. mask.