Clipping effects

Clipping effects in CSS are used when the design calls for a “revealing” or “windowing” effect. You can do most everything with clip-path.

• Clipping vs. masking: Clipping refers to geometric shapes; masking refers to raster images that represent a map of opacity.
• clip has good support but is outdated and can only do rectangles; ignore

clip-path

clip-path is probably what you want. It can be animated and interpolated between different values! See MDN for rules on interpolation between different clip paths. Broadly, you can interpolate between the same type of shape with the same number of points (e.g. so no circle to polygon, but you can do polygon to polygon if the number of points are the same).

You can sync clip-path to input events (mouse, scroll) by setting element.style.clipPath in requestAnimationFrame.

Filling text with a background

This is done by giving the text the appropriate background-image (such as a gradient or image file), setting the color to transparent, and then using background-clip: text.