<canvas id="canvas"></canvas>
html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#canvas {
  display: block;
  background: #ccc;
}
const canvas = document.getElementById("canvas");

// Set the canvas to use the whole body
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;

const ctx = canvas.getContext("2d");

const rectSize = [canvas.width / 8, canvas.height / 8];
const path = new Path2D();
path.rect(0, 0, ...rectSize);
const rectCenter = rectSize.map(x => x / 2);
const reverseRectCenter = rectCenter.map(x => x * -1);

const radianCircle = Math.PI * 2;

let shouldLoop = true;
function loop () {
  if (shouldLoop) {
    requestAnimationFrame(loop);
  }
  
  draw();
}

let i = 0;
function draw () {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  i++;

  ctx.save();

  ctx.translate(...getPositions(i / 100));
  ctx.translate(...reverseRectCenter);
  
  ctx.translate(...rectCenter);
  ctx.rotate(getRotation(i / 100));
  ctx.translate(...reverseRectCenter);
  
  ctx.fill(path);

  ctx.restore();
}

function getPositions (i) {
  return [
    canvas.width / 2 - (Math.cos(radianCircle * i / 2) * canvas.width / 4),
    canvas.height / 2 + (Math.sin(radianCircle * i / 2) * canvas.height / 4),
  ];
}

function getRotation (i) {
  return radianCircle * i;
}

loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.