JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div id="fib" style="width:calc(1px + 1px);">
  <div class="fib-0">
    <div class="fib-1" style="width: calc(1px * var(--scale)); height: calc(1px * var(--scale)); top: 100%; right: 0px;"></div>
  </div>
</div>

SCSS

:root {
  --scale: 4;
}

#fib {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: scale(1);

  *:hover {
    background: red;
  }

  div {
    box-sizing: border-box;
    position: absolute;
    z-index: -1;
    background: #fff;

    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      border: 1px solid black;
    }

    &.fib-0 {
      &::before {
        display: none;
      }
    }

  }

}

JavaScript

let rand_color = function(index) {
  var colorR = Math.floor((Math.random() * 256));
  var colorG = Math.floor((Math.random() * 256));
  var colorB = Math.floor((Math.random() * 256));
  return "rgb(" + colorR + "," + colorG + "," + colorB + ")";
}

let $fib = $('#fib');

var i;
var o = 0;
var fib = []; // Initialize array!
var levels = 20;
var scale = 4;

fib[0] = 0;
fib[1] = 1;

for (i = 2; i <= levels; i++) {

  o++;

  fib[i] = fib[i - 2] + fib[i - 1];

  $fib.find('.fib-' + (i - 1)).html('<div class="fib-' + i + '" style="width:' + (fib[i] * scale) + 'px; height:' + (fib[i] * scale) + 'px; background: ' + rand_color() + ';"></div>');

  //console.log(o);

  switch (o) {
    case 1:
      $fib.css({
        width: 'calc(' + (fib[i - 2] * scale) + 'px + ' + (fib[i - 1] * scale) + 'px)',
        height: 'calc(' + (fib[i - 2] * scale) + 'px)'
      }).find('.fib-' + (i)).css({
        right: '100%',
        bottom: 0,
      });
      break;
    case 2:
      $fib.css({
        height: 'calc(' + (fib[i - 2] * scale) + 'px + ' + (fib[i - 1] * scale) + 'px)',
        width: 'calc(' + (fib[i - 2] * scale) + 'px)'
      }).find('.fib-' + (i)).css({
        bottom: '100%',
        left: 0
      });
      break;
    case 3:
      $fib.css({
        width: 'calc(' + (fib[i - 2] * scale) + 'px + ' + (fib[i - 1] * scale) + 'px)',
        height: 'calc(' + (fib[i - 2] * scale) + 'px)'
      }).find('.fib-' + (i)).css({
        left: '100%',
        top: 0
      });
      break;
    case 4:
      $fib.css({
        height: 'calc(' + (fib[i - 2] * scale) + 'px + ' + (fib[i - 1] * scale) + 'px)',
        width: 'calc(' + (fib[i - 2] * scale) + 'px)'
      }).find('.fib-' + (i)).css({
        top: '100%',
        right: 0
      });
      o = 0;
      break;
  }

}

$fib.on('mouseover', '[class*="fib-"]', function(e) {

  //console.log(e.target);

  //$(this).addClass('active').children().removeClass('active');

});