Canvas: gitkraken background

by Jens Kühn

HTML

<div class="canvas-wrapper" style="overflow: hidden; position: relative">
  <canvas id="c"></canvas>
</div>

CSS

.canvas-wrapper {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

canvas#c {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 0;
  height: auto;
  margin: auto;
}

JavaScript

function d(a, b, c, d, e) {
      this.generation = a, this.size = d, this.rotation = -e, this.start = {
        x: b,
        y: c
      }, this.end = {
        x_1: this.start.x + Math.cos(f(this.rotation)) * this.size,
        y_1: this.start.y + Math.sin(f(this.rotation)) * this.size,
        x_2: this.start.x + Math.cos(f(this.rotation + 120)) * this.size,
        y_2: this.start.y + Math.sin(f(this.rotation + 120)) * this.size,
        x_3: this.start.x + Math.cos(f(this.rotation + 240)) * this.size,
        y_3: this.start.y + Math.sin(f(this.rotation + 240)) * this.size
      }, this.init()
    }

    function e() {
      v.clearRect(0, 0, w, x), v.globalCompositeOperation = "source-over", v.fillStyle = "rgba(20,20,34,.1)", v.fillRect(0, 0, w, x), v.globalCompositeOperation = "lighter", y = [], y.push(new d(0, w / 2, x / 2, D, C)), h(), z++, D < s && (D += t), C += q, m = g(z, 1 - B * A, 2 * B * A, r), z >= r && (z = 0, A *= -1)
    }

    function f(a) {
      return Math.PI / 180 * a
    }

    function g(a, b, c, d) {
      return c / 2 * (1 - Math.cos(Math.PI * a / d)) + b
    }

    function h() {
      0 != E && 255 != E || (F *= -1), 0 != G && 255 != G || (H *= -1), 0 != I && 255 != I || (J *= -1), E += 1 * F, G += 1 * H, I += 1 * J
    }

    function i() {
      K = 1e3 / P, N = Date.now(), L = N, j()
    }

    function j() {
      setTimeout(function() {
        window.requestAnimationFrame(j)
      }, 50), M = Date.now(), O = M - N, O > K && e()
    }

    var m, n = ((1 + Math.sqrt(5)) / 2, navigator.userAgent.toLowerCase().indexOf("firefox") > -1 ? 5 : 6),
      o = 62.5,
      p = 1e3,
      q = .1,
      r = Math.floor(p / o),
      s = 100,
      t = .005,
      u = document.getElementById("c"),
      v = u.getContext("2d"),
      w = window.innerWidth,
      x = window.innerHeight,
      y = [],
      z = 0,
      A = 1,
      B = 0,
      C = 0,
      D = 100,
      E = 43,
      F = 1,
      G = 205,
      H = 1,
      I = 255,
      J...