Reverse Knockout Text Mask Effect with SVG

Using design tricks on headings allows you to make more of the typography choices that you make and can have some interesting design outcomes. This approach will work with both custom headers (like a homepage that you set and forget) but also with a blog/CMS that has variable heading lengths/sizes

When SVG <mask> elements are applied to another shape, they hide by default, the objects that they are applied to. We need to essentially reverse this to show by default, then choose which areas to hide. We’ll use a simple <rect> shape with a white fill to show the entire area, and a <text> element with a black fill to hide, or knock-out that area.

An excerpt from Reverse Knockout Text Mask Effect with SVG

View original article