mask-text.html

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Masking Text</title>
  <link href="css/mask-text.css" rel="stylesheet">
</head>
<body>

<svg width="500" height="200" viewBox="0 0 500 200">
  <style>
    text {
      font-size: 120px;
      font-weight: bold;
      mask: url(#mask);
    }
  </style>
  <defs>
    <mask id="mask">
      <image width="500" height="200" xlink:href="images/text-mask.png" />
    </mask>
  </defs>
  <text x="0" y="180">Splatter!</text>
</svg>

</body>
</html>