div.grid
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div
  div

:root {
  --theme: #FF9800;
  --deg: 45deg;
  --gride-size: 50px;
}

html, body { 
  height: 100%; 
  margin: 0; 
  overflow: hidden; 
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333; 
}

.grid {
  width: calc(var(--gride-size) * 5);
  margin: 0 auto;
  display: grid;
  border: 5px solid var(--theme);
  box-shadow: 0 0 18px 1px var(--theme) inset;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: var(--gride-size);
  overflow: hidden;
}

.grid div {
  clip-path: circle(50% at 50% 0);
  background-color: var(--theme);
  transition: all 1s ease-in;
  transform: rotate(var(--deg));
}

const setRAFInterval = (cb, interval) => {
  let now = Date.now;
  let startTime = now();
  let endTime = startTime;
  let loop = () => {
    this.intervalTimer = requestAnimationFrame(loop);
    endTime = now();
    if (endTime - startTime >= interval) {
      startTime = now();
      endTime = startTime;
      cb();
    }
  };
  this.intervalTimer = requestAnimationFrame(loop);
  return this.intervalTimer;
};

const getRandomNum = (max) => Math.floor(Math.random() * Math.floor(max));
const randomColor = () => {
  const color = Math.floor(Math.random()*16777215).toString(16);
  return color.length !== 6 ? `f${color}` : color;
};

let sign = '+';
const root = document.documentElement;
const divs = document.querySelectorAll('.grid > div');
setRAFInterval(() => {
  divs.forEach(div => {
    sign = (getRandomNum(2) === 1) ? '+' : '-';
    div.style.setProperty('transform', `rotate(${sign}${getRandomNum(4)*90}deg)`);
    div.style.setProperty('clip-path', `circle(${getRandomNum(100)}% at ${getRandomNum(100)}% 50)`);
    div.style.setProperty('background-color', `#${randomColor()}`);
  });
}, 2000);