Rainbow

https://stackoverflow.com/a/22019704

by MegaScience

HTML

<div id="rainbow"></div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#rainbow {
  display: grid;
  width: 100vmin;
  height: 100vmin;
  border-radius: 50%;
}

#rainbow.spin {
  animation: spin 5s linear infinite;
}

#rainbow div {
  border: 1.5vmin groove transparent;
  pointer-events: none;
}

#rainbow.spin div {
  animation: spin 5s linear infinite reverse;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
    border-width: 1.5vmin;
  }
  50% {
    border-width: 2.5vmin;
  }
  100% {
    transform: rotate(360deg);
    border-width: 1.5vmin;
  }
}

JavaScript

function Rainbow() {
  const getRandomColor = () => '#' + Array.from(Array(6), () => (~~(Math.random() * 16)).toString(16)).join('')
  const el = document.getElementById('rainbow')
  const maxSquares = 256
  const squareRoot = Math.floor(Math.sqrt(maxSquares))
  const cols = squareRoot
  const rows = squareRoot
  el.style.gridTemplateColumns = `repeat(${cols}, 1fr)`
  el.style.gridTemplateRows = `repeat(${rows}, 1fr)`

  const elements = Array.from(Array(cols * rows), () => {
    const pixel = document.createElement('div')
    pixel.style.background = getRandomColor()
    pixel.style.borderColor = getRandomColor()
    return pixel
  })

  el.append(...elements)
  el.addEventListener('click', e => e.target.classList.add('spin'), {
    once: true
  })
}

Rainbow()