perfect

const bgCol = "#447abd";
const gCol = "#a2c2e8";
const nGrid = 20;
let w;
let gSpace;

function setup() {
  w = max(400, min(windowWidth, windowHeight) * 0.9);
  gSpace = (w / nGrid) * 0.95;
  describe(
    "perfect squares move around in a bluprint design with a low opacity white."
  );
  createCanvas(w, w);
  rectMode(CENTER);

  d = w;
  angleMode(DEGREES);
  textSize(16);
}

function draw() {
  background(bgCol);
  translate(w / 2, w / 2);
  drawGrid();
  t = frameCount / 3;
  stroke(255);
  strokeWeight(2);
  fill(255, 255, 255, 20);
  for (let i = 12; i > 0; i -= 1) {
    if (i % 2 === 0) {
      rect(
        -11 * gSpace + (0.5 + i) * gSpace + abs(2 * gSpace * sin(t + i * 20)),
        +abs(2 * gSpace * cos(t + i * 20)),
        i * gSpace
      );
    } else {
      rect(
        10.5 * gSpace - (0.5 + i) * gSpace - +abs(2 * gSpace * sin(t + i * 20)),
        -+abs(2 * gSpace * cos(t + i * 20)),
        i * gSpace
      );
    }
  }
  noStroke();
  fill(gCol);
  text("perfect", -w / 2 + 10, w / 2 - 5);
}

function drawGrid() {
  stroke(gCol);
  strokeWeight(0.3);
  for (let i = 1; i <= nGrid; i++) {
    for (let j = 1; j <= nGrid; j++) {
      line(
        -w / 2 + gSpace * i,
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace
      );
      line(
        -w / 2 + gSpace,
        -w / 2 + gSpace * i,
        w / 2 - gSpace,
        -w / 2 + gSpace * i
      );
    }
  }
  noFill();
  strokeWeight(3);
  rect(0, 0, w - 2 * gSpace);
}

function mousePressed() {
  setup();
  draw();
}
function windowResized() {
  setup();
  draw();
}