@import url(https://fonts.googleapis.com/css?family=Poiret+One);

body {
  margin: 0;
  overflow: hidden;
  width: 100%;
  background: hsla(9, 95%, 5%, 1);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: radial-gradient(top, circle cover, hsla(9, 95%, 15%, 1)20%, hsla(9, 95%, 5%, 1) 80%);
  font-family: 'Poiret One', cursive;
}

canvas {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate( -50%, -50%);
}

h1 {
  margin-top: 5%;
  letter-spacing: 15px;
  font-size: 3em;
  text-align: center;
  color: hsla(33, 95%, 45%, 1);
}

/*
Simplex Noise Params loaded separately. 
Avail here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/sunNoise.js
*/
var s1 = 0,
  s2 = 10,
  s3 = 0,
  s4 = -2,
  s5 = 0,
  s6 = 0.2,
  s7 = 3,
  c, $, id;

var _w, _h, g;

c = document.getElementById('canv');
$ = c.getContext('2d');

_w = c.width * 0.5;
_h = c.height * 0.5;

g = $.createRadialGradient(_w, _h, 0, _w, _h, _w);
g.addColorStop(0.0, 'hsla(53, 95%, 75%, 1)');
g.addColorStop(0.3, 'hsla(33, 85%, 50%, .8)');
g.addColorStop(0.8, 'hsla(53, 95%, 50%, .8)');
g.addColorStop(1.0, 'hsla(41, 95%, 45%, 1)');

$.fillStyle = g;
$.fillRect(0, 0, c.width, c.height);
id = $.getImageData(0, 0, c.width, c.height);

var draw = function() {
  var img = id.data,
    w = id.width,
    h = id.height,
    t = new Date() / 1000,
    p = -1,
    x, y, ax, ay, bx, by, nx, ny, n;

  for (y = 0; y < h; y++) {
    ay = y / h * 2 - 1;

    for (x = 0; x < w; x++) {

      ax = x / w * 2 - 1;

      bx = Math.sqrt(ax * ax + ay * ay);
      by = Math.atan2(ay, ax) / Math.PI * 2 - 1;
      nx = bx * s1 + by * s2 + t * s3;
      ny = bx * s4 + by * s5 + t * s6;

      n = s7 - bx * (s7 + 1);
      n += SimplexNoise.noise2(nx, ny);
      n += SimplexNoise.noise2(nx * 2, ny * 2) / 2;

      img[p += 4] = n <= 0 ? 0 : n < 1 ? n * 256 | 0 : 255;
    }
  }
  $.putImageData(id, 0, 0);
  return draw;
}

var run = function() {
  window.requestAnimationFrame(run);
  draw();
}
run();

window.addEventListener('resize', function() {
  c.width * 0.5;
  c.height * 0.5;
}, false);