JSFiddle - React, Tailwind, and code Playground

https://old.reddit.com/r/javascript/comments/9vix8g/share_examples_of_technical_assessments_you_have/e9cmm7x/

by alexb

CSS

.circle {
  border: 2px solid black;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
}

JavaScript

const NUM_CIRCLES = 7;
const RADIUS = 200;
const ROTATION_SPEED = 10000;
const INTENSITY_SPREAD = 1 / NUM_CIRCLES / 2;

const circles = [];
for (let i = 0; i < NUM_CIRCLES; i++) {
	const angle = Math.PI * 2 / NUM_CIRCLES * i;
  const el = document.createElement('div');
  el.className = "circle";
  const x = Math.cos(angle) * RADIUS;
  const y = Math.sin(angle) * RADIUS;
  el.style.transform = `translate(-50%, -50%) translate(${x}px, ${y}px)`;
  document.body.appendChild(el);
  circles.push(el);
}


function update(timestamp) {
	const pulse = (timestamp % ROTATION_SPEED) / ROTATION_SPEED;
  for (let i = 0; i < NUM_CIRCLES; i++) {
    const pos = i / NUM_CIRCLES;
    let dist = Math.abs(pulse - pos);
    if (dist > 0.5) dist = Math.abs(dist - 1);
    const intensity = Math.max(0, 1 - dist / INTENSITY_SPREAD);
    circles[i].style.borderColor = `rgba(${255 * intensity}, 0, 0)`;
	}
  requestAnimationFrame(update);
}
requestAnimationFrame(update);