010. ランダム魔法陣

body {
  margin: 0;
  min-height: 100vh;
  background: #111;
}

.spirit {
  position: fixed;
  background: gold;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

document.addEventListener('click', function(event) {
  const spirit = document.createElement('div');
  spirit.classList.add('spirit');
  spirit.style.left = event.clientX + 'px';
  spirit.style.top  = event.clientY + 'px';

  const size = Math.random() * 100 + 50;
  spirit.style.width  = size + 'px';
  spirit.style.height = size + 'px';

  const colors = ['gold', 'tomato', 'deepskyblue', 'limegreen', 'violet'];
const randomIndex = Math.floor(Math.random() * colors.length);
spirit.style.background = colors[randomIndex];
document.body.appendChild(spirit);
});