const a = document.body.appendChild(document.createElement('div')),
      b = document.body.appendChild(document.createElement('div'));
let degA = degB = 0;
 
const size = {
  width: '100px',
  height: '100px'
};
Object.assign(a.style, size);
Object.assign(b.style, size);
 
function loop() {
  degA += 1;
  degB = degA + 180;
  a.style.background = `hsl(${degA}deg, 100%, 50%)`;
  b.style.background = `hsl(${degB}deg, 100%, 50%)`;
  requestAnimationFrame(loop);
}
loop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.