WebAnimationsApi - Squares pattern

Rotating squares. 2015-12-15

by schrodingers

CSS

body {
  background: ghostwhite;  
  display: flex;  
  align-items: center;
  justify-content: center;
} 

ol {
  position: relative;
  margin: 50% 50%;
}


.box {
  position: absolute;  
  display: block;  
  /* margin: 0.5em; */
  width: 1em;
  height: 1em;
  /* background: dodgerblue; */
  }


body {
  font-size: 0.6em;
}

JavaScript

/* Web animations pattern SQUARES
rotating  */


var colors = ["#ff6699", "#ff9900", "#ffcc00", "#9adb1b", "#00cc66", "#00cccc", "#00ccff", "#6633cc", "#ff66cc"];


function newBox(width, height, x, y, color) {
  var box = document.createElement('div');
  box.style.width = width + 'px';
  box.style.height = height + 'px';
  box.style.backgroundColor = color;
  box.style.position = 'absolute';
  box.style.left = x + 'px';
  box.style.top = y + 'px';
  return box;
}

var container = newBox(450, 450, 0, 0, 'white');
container.style.overflow = 'hidden';
container.style.left = 'calc(50vw - 225px)';
container.style.top = 'calc(50vh - 225px)';
container.style.borderRadius = '50%';

function bezToEasing(b) {
  return 'cubic-bezier(' + b[0] + ', ' + b[1] + ', ' + b[2] + ', ' + b[3] + ')';
}

for (var y = 0; y < 15; y++) {
  for (var x = 0; x < 15; x++) {
    var box = newBox(30, 30, x * 30, y * 30, ((x + y) % 2 == 0 ? 'white' : 'black'));
    var xDest = (x - 7) * 60;
    var yDest = (y - 7) * 60 + 30;

    var x2 = 0.5;
    var y2 = 0.25;
    var x3 = 0.5;
    var y3 = 0.25;

    box.animate([{transform: 'translate(0px, 0px) scale(1)',
                  easing: bezToEasing([x2, y2, x3, y3])},
                 {transform: 'translate(' + xDest + 'px, ' + yDest + 'px) scale(3)'}],
                { duration: 2000, iterations: Infinity});

    container.appendChild(box);

    for (var yy = 0; yy < 3; yy++) {
      for (var xx = 0; xx < 3; xx++) {
        if ((xx + yy) % 2 == 0) {
          var boxbox = newBox(10, 10, x * 30 + xx * 10, y * 30 + yy * 10,
                              (x + y) % 2 == 0 ? 'black' : 'white');
          container.appendChild(boxbox);
          var xxDest = xDest + (xx - 1) * 20;
          var yyDest = yDest + (yy - 1) * 20;
          var distX = (x - 7) + (xx - 1);
          var distY = (y - 7) + (yy - 1);
          var dist = Math.sqrt(distX * distX + distY * distY) / 15;
          var offset = 0.2 + dist;

          // treat offset as a 't'...