JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="300" height="40" id="c"> </canvas>

JavaScript

var c = document.getElementById('c');
var ctx = c.getContext('2d');

for (var t = -30; t < 30; t += 0.2) {
    
    var x0 = (t + 30) * 5;
    var x1 = x0 + 10;
    
    var hue = 30 + 240 * (30 - t) / 60;
    ctx.fillStyle = 'hsl(' + [hue, '70%', '50%'] + ')';
    
    ctx.fillRect(x0, 0, x1, 40);
}