A ideia aqui é imaginar três camadas empilhadas uma sobre a outra, onde a camada superior é usada para cortar uma forma na segunda camada para revelar a terceira camada.
Se o texto na camada superior do diagrama acima tiver a forma que estamos recortando da segunda camada, a imagem a seguir ilustra o conceito de texto vazado.
Snippet SVG
Aqui está um trecho que configura a camada inferior ( .knockout) que o texto vazado irá revelar, a camada do meio ( .knockout-text-bg) que estamos cortando e a camada superior ( .knockout-text) que contém o texto SVG que atuará como uma máscara para cortar a segunda camada.
Knock Out Text As coordenadas são totalmente arbitrárias neste exemplo e podem ser ajustadas para se adequar ao tamanho real e ao posicionamento do texto adicionado.
Observe que o fillda segunda camada é preto e o fillda camada superior é branco. É assim que as máscaras funcionam: o branco é o contraste perfeito com o preto e irá esconder as partes pretas. Poderíamos fazer a camada superior com uma cor totalmente diferente e ela não esconderia completamente o preto, mas permitiria que parte dele escapasse.
Estilo CSS
O resto é estilo CSS. Por exemplo, podemos adicionar um gradiente de fundo à camada inferior e aumentar o tamanho da fonte para obter um efeito mais dramático.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )Veja o Pen SVG Knock Out Text de Geoff Graham (@geoffgraham) no CodePen.