<canvas id='canv'></canvas>
body {
  background: hsla(0, 0%, 95%, 1);
  margin: 0;
  width: 100%;
  overflow: hidden;
}
var c = document.getElementById('canv'),
  $ = c.getContext('2d'),
  w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  t = 0,
  n = 70,
  num = 55,
  s, a, b,
  x, y, _x, _y,
  _t = 1 / 90,
  rot = t / 4,
  u = 0;

var anim = function() {
  window.requestAnimationFrame(anim);
  $.fillStyle = 'hsla(0,0%,95%,1)';
  $.fillRect(0, 0, w, h);
  for (var i = 0; i < n; i++) {
    a = (i * 2) * Math.PI / (n);
    x = 0;
    $.beginPath();
    $.rotate(rot);
    $.strokeStyle = 'hsla(0, 0%, 0%, 1)';
    for (var j = 0; j < num; j++) {
      s = Math.atan2(2, Math.sin((2, j * (num + j)), .2));
      x += 8.4 / s;
      y = x * Math.sin(b + 2 * t + x / 5) / 7;
      _x = x * Math.cos(a) + y * Math.sin(a);
      _y = x * Math.sin(a) - y * Math.cos(a);
      b = j * Math.PI / 3;
      $.arc(w / 2 + _x, h / 2 + _y, 0, 0, 2 * Math.PI);
    }
    $.stroke();
    $.rotate(-rot);
  }
  t += _t;
  u -= .2;
};
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.