@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

svg[height="0"] {
  position: absolute;
}

.iftext {
  /* no pseudo needed */
  --k: 0;
  place-self: center;
  background: linear-gradient(90deg, hsl(calc(var(--k)*1turn), 95%, 65%), hsl(calc(var(--k)*1turn + 90deg), 95%, 65%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 900 clamp(.875em, 7.25vw, 5em) arial black, sans-serif;
  filter: url(#f);
  text-align: left;
  text-transform: uppercase;
  /* needs support for animating custom properties */
  /* Firefox not quite there yet, but it's coming */
  animation: k 4s linear infinite;
  line-height:100%;
}

@keyframes k {
  to {
    --k: 1 ;
  }
}