JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="500"></canvas>

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";

var cores = [
    [255,0,0],
    [255,255,0],
    [0,255,0],
    [0,0,255],
    [128,0,128]
];
var shift = 1;
var passos = ["0", "0.25", "0.5", "0.75", "1"];

// Faz uma média ponderada de cada componente das cores 1 e 2
function calcular(cor1, cor2, progresso) {
  var ret = [];
  for ( var i = 0 ; i < cor1.length ; i++ )
    ret[i] = Math.round(cor2[i] * progresso + cor1[i] * (1 - progresso));
  return ret;
}

setInterval(function() {
    shift -= 0.04;
    if ( shift < 0 ) {
        shift = 1;
        cores.unshift(cores.pop())
    }
    
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    for ( var i = 0 ; i < 5 ; i++ ) {
        var anterior = (i == 0 ? 4 : i-1);
        var media = calcular(cores[anterior], cores[i], shift);
        var cor = "rgb(" + media.join(",") + ")";
        gradient.addColorStop(passos[i], cor);
    }
    
    // Fill with gradient
    ctx.fillStyle=gradient;
    ctx.fillText("stackoverflow em Português",10,30);
}, 250);