<span class="stroke linear-hstripes rainbow-text ">RAINBOW</span>

<svg version="1.1" xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" style="display:none;">
  <defs>
    <filter id="stroke-text-svg-filter">
<feMorphology in="SourceAlpha" operator="dilate" radius="10" result="dcb8db97-ba3a-4b59-a64d-600343a150b6"></feMorphology>

<feComposite result="afa951d2-5af5-4c5f-b4be-9f91a19139cf" in="SourceGraphic" in2="0dc8c46f-8230-4bf2-b02b-b8fd31b08920"></feComposite>


    </filter>
  </defs>
</svg>

<footer>inspired by <a href="https://www.mockofun.com/template/rainbow-font-generator/">Rainbow Text Generator</a> <br/>
original article <a href="https://www.coding-dude.com/wp/css/css-rainbow-text/">CSS Rainbow Text</a></footer>

:root{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.rainbow-text:is(.linear-hstripes) {
background: linear-gradient(to bottom,   red 0%,   red 12.5%,   orange 12.5%,   orange 25%,   yellow 25%,   yellow 37.5%,   green 37.5%,   green 50%,   blue 50%,   blue 62.5%,   indigo 62.5%,   indigo 75%,   violet 75%,   violet 87.5%, white 87.5%) 0 0.3em/100% 1em repeat-y;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 15vw;
font-family:sans-serif;
font-weight: bold;
text-align: center;
display:inline!important;
  text-align:center;
  display:block;
animation:scroll 2s infinite;
  animation-timing-function: linear;
}

.stroke{
    filter:url(#stroke-text-svg-filter);
}

@keyframes scroll{
  0%{
    background-position-y:0;
  }
  100%{
    background-position-y:1em;
  }
}

footer{
  position:absolute;
  bottom:0;
  right:0;
  padding:0.5em;
  font-family:sans-serif;
}
footer a{
  font-weight:bold;
}