cs4.html

<div id='colorsquare4' style='width: 200px; height: 200px; position: relative'></div>

<script>
  var cs4 = window.colorsquare4
  var els = ([[0, 0], [1, 0], [0, 1], [1, 1]]).map(function (xy) {
    var el = document.createElement('div')
    el.style.cssText = `
      position: absolute;
      left: ${xy[0] * 100}px;
      top: ${xy[1] * 100}px;
      width: 100px;
      height: 100px;
      border: 2px solid black;
    `
    cs4.appendChild(el)
    return el
  })

  window.addEventListener('mousemove', function (evt) {
    var x = evt.clientX / window.innerWidth
    var y = evt.clientY / window.innerHeight
    els.forEach(function (el, i) {
      var elX = x + (i * 0.01)
      var elY = y + (i * 0.1)
      var hue = Math.round(elY * 360)
      var light = Math.round(elX * 100)
      var w = `${elX * 100}px`
      var h = `${elY * 100}px`
      var trans = `rotate(${elX * 360}deg)`
      var color = `hsl(${hue}, 100%, ${light}%)`
      el.style.background = color
      el.style.width = w
      el.style.height = h
      el.style.transform = trans
    })
  })
</script>