These things are so similar, I find it hard to keep them straight. This is a nice little explanation from viewBox (what a cool name and URL, I hope they keep it up).
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.
Thanks for this Chris & Sarah!
I believe the simple difference between masks and clipPaths is this; one cuts out shapes, the other cuts out shades of grey.
Masks are explained as “white conceals, dark reveals”
Paths are explained as … well “shapes”
So since they both “cut out graphical information” the difference is what they do to achieve it: shades & shapes