body,html {
 background:black;
margin: 0;
width: 100%;
overflow: hidden;  

}

canvas{
	z-index:1;
	background: radial-gradient(
hsla(180,70%,50%,1)40%,
hsla(29, 72%, 36%,1)63%,
hsla(180,100%,50%,1)90%,
hsla(76,50%,90%,1));
background-repeat:no-repeat;
background-size:100%; 
	position:absolute;
  animation:rot infinite cubic-bezier(.9,round(5.35),1,floor(-2.69)) atan(9)+280s 1s alternate;
}

@keyframes rot{
  to{transform:rotate(360deg);}}

var c = document.createElement('canvas'),
    ctx = c.getContext('2d'),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    t = 0, num = 200, 
    s, a, b, 
    x, y, _x, _y,
    time = 1 / 60; 
document.body.appendChild(c);

function random(min, max) {
  return Math.random() * (max - min) + min;
}

var anim = function() {
  ctx.globalCompositeOperation = 'lighter';
  ctx.fillRect(0, 0, w, h);
 
  var colors = ["hsla(61, 51%, 46%,1)", "hsla(78, 81%, 46%,1)", "hsl(30, 91%, 66%)", "hsla(20, 74%, 98%,1)", "hsla(56, 34%,98%,1)"];
  for (var i = 0; i < 7.5; i++) {
    x = 0; 
    ctx.beginPath();
    for (var j = 0; j < num; j++) {
      x -= Math.atan(200) * Math.tan(100);
      y = x * Math.sin(i + 1 * t + x /20)/1.5;
      _x = x* Math.cos(b) - y * Math.sin(b);
      _y = x * Math.sin(b) + y * Math.cos(b);
      b = (j*2.3+Math.ceil(.2)) * Math.PI /3;
      ctx.lineWidth = random(.01,.099);
      ctx.arc(w / 2- _x, h / 2 -_y, random(1,2), random(1,2), random(1,1.1) * Math.PI*.5);
      
    }
      ctx.strokeStyle = colors[i];
      ctx.stroke();
		 ctx.globalCompositeOperation = 'xor';
  }
  t += time;
  window.requestAnimationFrame(anim);
};
anim();
window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);