JSFiddle - React, Tailwind, and code Playground
JavaScript
var sheet = document.createElement('style');
var min = 54;
var max = 138; //color tone
var r = max;
var g = min;
var b = min;
var n = 0;
var i = 0;
var rgb = new Array();
for (var j = min; j < max + 1; j++) {
g = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
for (var j = max; j > min - 1; j--) {
r = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
for (var j = min; j < max + 1; j++) {
b = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
for (var j = max; j > min - 1; j--) {
g = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
for (var j = min; j < max + 1; j++) {
r = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
for (var j = max; j > min - 1; j--) {
b = j;
rgb[n] = "rgb(" + r + "," + g + "," + b + ")";
n++;
}
setInterval(function() {
sheet.innerHTML = "body {background-color: " + rgb[i++ % n] + ";}";
document.body.appendChild(sheet);
}, 50);