spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/text-fx/text-knockout-video-feel.html7  Desc   : Animated gradient sheet visible only through knockout letterforms8  ============================================================9-->10<!--svgarden11title: Knockout gradient text12slug: text-knockout-video-feel13category: text-fx14tags: [text, mask, knockout, gradient]15difficulty: advanced16techniques: [svg-mask, mask-knockout, spreadMethod-repeat, translate-property]17how_it_works: >18  An SVG <mask> is a grayscale stencil: white areas of the mask let the masked19  element show through, black areas erase it. Here the mask is a black rect with20  white bold <text> on top, so the animated gradient sheet underneath is visible21  only inside the letterforms — the classic "video-in-text" knockout without any22  background-clip hacks. The sheet itself is a triple-width rect whose gradient23  uses spreadMethod="repeat" with a period of exactly 320 units, so sliding it24  left by one period with the modern translate property loops seamlessly forever.25customizable:26  - { var: "--sg-color",    label: "Base color", type: color, default: "#7F77DD" }27  - { var: "--sg-size",     label: "Width",      type: range, min: 160, max: 480, default: 320, unit: px }28  - { var: "--sg-duration", label: "Speed",      type: range, min: 2, max: 12, step: 0.5, default: 5, unit: s }29created: 2026-08-1030-->31<div class="sg-text-knockout-video-feel" style="--sg-color:#7F77DD; --sg-size:320px; --sg-duration:5s;">32  <svg viewBox="0 0 320 90" role="img" aria-label="SHINE">33    <title>SHINE</title>34    <defs>35      <linearGradient id="sg-text-knockout-video-feel-grad" x1="0" y1="0" x2="0.3333" y2="0" spreadMethod="repeat">36        <stop offset="0" class="sg-text-knockout-video-feel-stop-a" />37        <stop offset="0.33" stop-color="#3fb6f0" />38        <stop offset="0.66" stop-color="#e05fa0" />39        <stop offset="1" class="sg-text-knockout-video-feel-stop-a" />40      </linearGradient>41      <mask id="sg-text-knockout-video-feel-mask">42        <rect x="0" y="0" width="320" height="90" fill="black" />43        <text class="sg-text-knockout-video-feel-txt" x="160" y="68" fill="white">SHINE</text>44      </mask>45    </defs>46    <g mask="url(#sg-text-knockout-video-feel-mask)">47      <rect class="sg-text-knockout-video-feel-sheet" x="0" y="0" width="960" height="90"48            fill="url(#sg-text-knockout-video-feel-grad)" />49    </g>50  </svg>51</div>52<style>53  .sg-text-knockout-video-feel {54    width: var(--sg-size);55  }56  .sg-text-knockout-video-feel svg {57    display: block;58    width: 100%;59  }60  .sg-text-knockout-video-feel-txt {61    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;62    font-size: 62px;63    font-weight: 800;64    letter-spacing: 2px;65    text-anchor: middle;66  }67  .sg-text-knockout-video-feel-stop-a {68    stop-color: var(--sg-color);69  }70  .sg-text-knockout-video-feel-sheet {71    animation: sg-text-knockout-video-feel-slide var(--sg-duration) linear infinite;72  }73  @keyframes sg-text-knockout-video-feel-slide {74    to { translate: -320px 0; }75  }76</style>77