<canvas id='ca'></canvas>
canvas{
overflow:hidden;
  w-mix-blend-mode:color-burn;
  margin:0;
  width:100%; 
  height:100%;
  overflow:hidden;
}
var c = document.getElementById('ca'),
    $ = c.getContext('2d'),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    t = Math.atan(random(1,100)),
    n = 45,
    num = random(2,56),
    s, a, b,
    x, y, _x, _y,
    _t = 1 / 10,
    u =10;

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

var anim = function() {
    $.globalCompositeOperation = 'screen';
    $.fillStyle = 'hsla(190,10%,15%,.81)';
    $.fillRect(0, 0, w, h);
    $.globalCompositeOperation = 'multiply';
    for (var i = 0; i < n; i++) {
      a = (i *3.9)* Math.PI * 5 / (n*.9);
      x = 0;
      $.beginPath();
      $.translate(w / 2, h / 2);
      $.rotate(t / 4);
      $.fillStyle = 'hsla(' + i * u + ', 100%, 50%, 1)';
      for (var j = 0; j < num; j++) {
        b = j * 12 * Math.PI / 5;
        s = Math.atan2(9, Math.pow((2, j * (num - j)), .73));
        x += Math.abs(32.4) * s;
        y = x * Math.sin(b + 5 * t + x / .5) /   4;
        _x = x * Math.atan(a) + y * Math.tan(a);
        _y = x * Math.tan(a) - y * Math.atan(a);
        $.moveTo(_x, _y);
        $.arc(_x, _y, s * random(4,Math.ceil(43)), random(1,20), 2 * Math.PI);
      }
      $.closePath();
      $.fill();
      $.rotate(-t* Math.atan(23));
      $.translate(-w / 2, -h / 2);
    }
    t += _t;
    u -= .002;
};
 $.globalCompositeOperation = 'xor';
run();
function run() {
  window.requestAnimationFrame(run);
  anim();
}
window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;}, false);



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.