copy and paste this into an `about:blank` JS console

golden-ratio-squares.js

((goldenRatioConjugate = 0.618033988749895) => {
    // console.clear();
    document.body.style.background = 'gray';
    Array.from(document.body.children).forEach((x) => {
        document.body.removeChild(x);
    });
    const cnv = document.body.appendChild(document.createElement('canvas'));
    cnv.style.width = '100%';
    cnv.style.height = '100%';
    cnv.width = window.innerWidth;
    cnv.height = window.innerHeight;

    const ctx = cnv.getContext('2d');
    const fs = 24, fs_h = fs / 2;

    ctx.lineWidth = 1;
    ctx.strokeStyle = 'blue';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.font = `${fs}px sans-serif`;

    const xMin = 0;
    const yMin = 0;
    const xMax = cnv.width;
    const yMax = cnv.height;
    const phi = (1 + Math.sqrt(5)) / 2;
    const colors = Colors();

    let w = xMax - xMin;
    let h = yMax - yMin;
    let x0 = xMin;
    let y0 = yMin;
    let x1 = xMax;
    let y1 = yMax;
    
    let x = x1 - fs_h, y = y1 - fs_h;

    for (let i = -1; ++i < 100 && w > 1 && h > 1;) {
        
        switch (i % 4) {
            case 0:
                x1 = x0 - (x0 - x1) / phi;
                x = x0 + fs_h;
                y = y0 + fs_h;
                break;
            case 1:
                y1 = y0 - (y0 - y1) / phi;
                x = x1 - fs_h;
                y = y0 + fs_h;
                break;
            case 2:
                x0 = x0 + (x1 - x0) / phi;
                x = x1 - fs_h;
                y = y1 - fs_h;
                break;
            case 3:
                y0 = y0 + (y1 - y0) / phi;
                x = x0 + fs_h;
                y = y1 - fs_h;
                break;
        }

        w = (x1 - x0);
        h = (y1 - y0);
        
        const color = colors.get(i);
        color[3] /= 255;
        ctx.strokeStyle = `rgba(${color.join(', ')}`;
        ctx.strokeRect(x0, y0, w, h);
        ctx.fillText(i, x, y);
    }
  
    function Colors() {
        class ColorMapper {
          constructor(hue = 0.99, saturation = 0.99, brightness = 0.99) {
            this._h   = hue % 1;
            this._s   = saturation % 1;
            this._v   = brightness % 1;
            this._map = Object.create(null);
          }
          get(id) { return this._map[id] || (this._map[id] = this.generate()); }
          generate() {
            const rgba = HSVtoRGBA(this._h, this._s, this._v);
            this._h    = (this._h + goldenRatioConjugate) % 1;
            return rgba;
          }
        }
        return new ColorMapper();
    }
    
    function HSVtoRGBA(h, s, v) {
      var r, g, b, i, f, p, q, t;
      if (arguments.length === 1) { s = h.s, v = h.v, h = h.h; }
      i = Math.floor(h * 6);
      f = h * 6 - i;
      p = v * (1 - s);
      q = v * (1 - f * s);
      t = v * (1 - (1 - f) * s);
      switch (i % 6) {
        case 0: r = v, g = t, b = p; break;
        case 1: r = q, g = v, b = p; break;
        case 2: r = p, g = v, b = t; break;
        case 3: r = p, g = q, b = v; break;
        case 4: r = t, g = p, b = v; break;
        case 5: r = v, g = p, b = q; break;
      }
      return [
        Math.round(r * 255),  // r
        Math.round(g * 255),  // g
        Math.round(b * 255),  // b
        255,                  // a
      ]
    }
})();