var num = 10; //change this for number of circles

function setup(){
  for(var i=0; i<num; i++){
    
    if((i/2)%1 != 0){//if even
      var t = "";
    } else {
      var t = ", rainbow 6s infinite linear "+i/(num*2)+"s";
    }
    
    var button = document.createElement('div');
    button.className = "dot";
    button.style.top = i*-20+"px";
    button.style.marginLeft = i*-20+"px";
    button.style.width = i*40+"px";
    button.style.height = i*40+"px";
    button.style.zIndex = num-i; //set circles infront

    button.style.webkitAnimation = "osc "+Math.sqrt(i)*0.8+"s infinite 0s"+t;
    button.style.animation = "osc "+Math.sqrt(i)*0.8+"s infinite 0s"+t;

    document.getElementById("hold").appendChild(button);
  }
}

setup();