create a Constant Moving Gradient with a Random Color Gen?

4

Ok - here is a way of animating gradient colors using JavaScript:

<!DOCTYPE html>
<html>

<head>
  <title>Animated Gradients</title>

  <style>
    body {
      margin: 0px;
      padding: 0px;
      --hue1: 176;
      --hue2: 341;
    }

    #container {
      width: 100vw;
      height: 100vh;
      background: radial-gradient(50% 50% at 50% 50%, hsl(var(--hue1), 90%, 80%, 1) 0%, hsl(var(--hue2), 90%, 80%, 1) 100%) 50% 50% / 100% 100% no-repeat;
    }
  </style>
</head>

<body>
  <div id="container">

  </div>

  <script>
    var newHue1;
    var newHue2;

    var currentHue1;
    var currentHue2;

    var hueDiff1;
    var hueDiff2;

    var incrementer1 = 0;
    var incrementer2 = 0;

    var counter = 0;
    var iterations = 200;

    function setNewColor() {

      var bodyStyle = getComputedStyle(document.body);

      currentHue1 = Number(bodyStyle.getPropertyValue("--hue1"));
      currentHue2 = Number(bodyStyle.getPropertyValue("--hue2"));

      newHue1 = getRandomNumber(0, 360);
      newHue2 = getRandomNumber(0, 360);

      hueDiff1 = newHue1 - currentHue1;
      hueDiff2 = newHue2 - currentHue2;

      incrementer1 = hueDiff1 / iterations;
      incrementer2 = hueDiff2 / iterations;
    }

    function animate() {

      if (counter == 0) {
        setNewColor();
      }
      
      counter++;

      currentHue1 += incrementer1;
      currentHue2 += incrementer2;

      if (counter == iterations) {
        counter = 0;
      }

      document.body.style.setProperty("--hue1", currentHue1);
      document.body.style.setProperty("--hue2", currentHue2);

      requestAnimationFrame(animate);
    }
    animate();

    function getRandomNumber(low, high) {
      var r = Math.floor(Math.random() * (high - low + 1)) + low;
      return r;
    }
  </script>
</body>

</html>

This isn’t optimized or cleaned-up code, but it may help you get unblocked. I’ll fiddle with this some more over the next few hours. Here is a video of what this looks like:

Cheers,
Kirupa