Knockout gradient text

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/text-fx/text-knockout-video-feel.html
  Desc   : Animated gradient sheet visible only through knockout letterforms
  ============================================================
-->
<div class="sg-text-knockout-video-feel" style="--sg-color:#7F77DD; --sg-size:320px; --sg-duration:5s;">
  <svg viewBox="0 0 320 90" role="img" aria-label="SHINE">
    <title>SHINE</title>
    <defs>
      <linearGradient id="sg-text-knockout-video-feel-grad" x1="0" y1="0" x2="0.3333" y2="0" spreadMethod="repeat">
        <stop offset="0" class="sg-text-knockout-video-feel-stop-a" />
        <stop offset="0.33" stop-color="#3fb6f0" />
        <stop offset="0.66" stop-color="#e05fa0" />
        <stop offset="1" class="sg-text-knockout-video-feel-stop-a" />
      </linearGradient>
      <mask id="sg-text-knockout-video-feel-mask">
        <rect x="0" y="0" width="320" height="90" fill="black" />
        <text class="sg-text-knockout-video-feel-txt" x="160" y="68" fill="white">SHINE</text>
      </mask>
    </defs>
    <g mask="url(#sg-text-knockout-video-feel-mask)">
      <rect class="sg-text-knockout-video-feel-sheet" x="0" y="0" width="960" height="90"
            fill="url(#sg-text-knockout-video-feel-grad)" />
    </g>
  </svg>
</div>
<style>
  .sg-text-knockout-video-feel {
    width: var(--sg-size);
  }
  .sg-text-knockout-video-feel svg {
    display: block;
    width: 100%;
  }
  .sg-text-knockout-video-feel-txt {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 62px;
    font-weight: 800;
    letter-spacing: 2px;
    text-anchor: middle;
  }
  .sg-text-knockout-video-feel-stop-a {
    stop-color: var(--sg-color);
  }
  .sg-text-knockout-video-feel-sheet {
    animation: sg-text-knockout-video-feel-slide var(--sg-duration) linear infinite;
  }
  @keyframes sg-text-knockout-video-feel-slide {
    to { translate: -320px 0; }
  }
</style>