<canvas id="canvas"></canvas>

body {
  margin: 0;
  min-width: 800px;
  min-height: 800px;
  background: #222222;
  display: flex;
  justify-content: center;
}

canvas {
  margin-top: 10px;
}

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvasSize = 800;

let ratio = window.devicePixelRatio || 1;
canvas.width = canvasSize * ratio;
canvas.height = canvasSize * ratio;
canvas.style.width = canvasSize + "px";
canvas.style.height = canvasSize + "px";
ctx.scale(ratio, ratio);

const colors = ["#D9D9D9", "#F17063", "#F23E2E"];

draw();

function draw() {
  drawCube(canvasSize / 2, 760, 340, 340, 340);

  ctx.save();
  ctx.translate(canvasSize / 2, canvasSize / 2);
  let degrees = 180;
  ctx.rotate((Math.PI / 180) * degrees);
  drawCube(0, 140, 160, 160, 160);
  ctx.restore();

  let lastColor = colors.pop();
  colors.unshift(lastColor);
  setTimeout(() => requestAnimationFrame(draw), 600);
}

function drawCube(x, y, wx, wy, h, color) {
  // left face
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x - wx, y - wx * 0.5);
  ctx.lineTo(x - wx, y - h - wx * 0.5);
  ctx.lineTo(x, y - h * 1);
  ctx.closePath();
  ctx.fillStyle = colors[0];
  ctx.fill();

  // right face
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + wy, y - wy * 0.5);
  ctx.lineTo(x + wy, y - h - wy * 0.5);
  ctx.lineTo(x, y - h * 1);
  ctx.closePath();
  ctx.fillStyle = colors[1];
  ctx.fill();

  // center face
  ctx.beginPath();
  ctx.moveTo(x, y - h);
  ctx.lineTo(x - wx, y - h - wx * 0.5);
  ctx.lineTo(x - wx + wy, y - h - (wx * 0.5 + wy * 0.5));
  ctx.lineTo(x + wy, y - h - wy * 0.5);
  ctx.closePath();
  ctx.fillStyle = colors[2];
  ctx.fill();
}