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: #000; 
}

.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 {
  border: 1px solid var(--theme);
  background-color: var(--theme);
  width: 1px;
  transition: all 1s ease-in;
  transform: skew(var(--deg));
  transform-origin: top;
}

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 getRandomBoolean = () => Math.floor(Math.random() * Math.floor(2));
const randomColor = () => {
  const color = Math.floor(Math.random()*16777215).toString(16);
  return color.length !== 6 ? `f${color}` : color;
};

let sign = '+';
let theme = randomColor();
const root = document.documentElement;
const divs = document.querySelectorAll('.grid > div');
setRAFInterval(() => {
  theme = randomColor();
  divs.forEach(div => {
    sign = (getRandomBoolean() === 1) ? '+' : '-';
    div.style.setProperty('transform', `skew(${sign}45deg)`);
    root.style.setProperty('--theme', `#${theme}`);
  });
}, 2000);