<div class="background" id="gradient">
<canvas id="paper" width="500" height="500"></canvas>
</div>
.background{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

canvas {
  width: 100%;
  height: 100%;
}

window.onload = function(){
var mbackground = document.getElementById('gradient');
var blue = 20;
var red = 20;
var green = 100
var counter = 0;
function colorChange(){
 if(counter <= 100){
  blue += 2;
  red += 5;
  counter++;
 }
  if(counter > 100){
    red -= 5;
    blue -= 2;
    counter++;
  }
   if(counter == 200){
     counter = 0;
     console.log("counter reset");
   }
  

  
  mbackground.style.backgroundImage = 'linear-gradient(rgb(0, 0, 0) 10%,   rgb(' + red + ', 20,' + blue + ') 100%)';
  console.log(counter);
}

setInterval(colorChange, 80);


  var canvas = document.getElementById('paper'); 
  c = canvas.getContext("2d"); //establish context
  var TWO_PI = Math.PI * 2;

  var posX = 0;
  var  posY = 0;
  
  setInterval(function(){
    
    c.clearRect(0,0,canvas.width,canvas.height);
    
    
  posX += .2;
  posY += .2;
    
  c.fillStyle = "rgba(195,43,37, 0.20)";
  c.beginPath();
  c.arc(posX + 200, posY + 200, 10, 0, Math.PI * 2, true);
  c.fill();
    
  c.fillStyle = "rgba(195,43,37, 0.20)";
  c.beginPath();
  c.arc(posX + 103, posY + 100, 50, 0, Math.PI * 2, true);
  c.fill();
    
  c.fillStyle = "rgba(195,43,37, 0.20)";
  c.beginPath();
  c.arc(posX + 0, posY + 20, 30, 0, Math.PI * 2, true);
  c.fill();
    
  c.fillStyle = "rgba(195,43,37, 0.20)";
  c.beginPath();
  c.arc(posX + 300, posY + 30, 40, 0, Math.PI * 2, true);
  c.fill();
  
    
  c.fillStyle = "rgba(120,5,15, 0.20)";
  c.beginPath();
  c.arc(posX + 50, posY + 300, 30, 0, Math.PI * 2, true);
  c.fill();
    
  }, 30);

}






















External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.