Trippy Fan

HTML

<style id="style"></style>
<div class="spinner">
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
  <div class="spin-bar"></div>
</div>

CSS

body {
  margin: 0;
  height: 100vh;
  background-color: #333;
  //background-color: white;
}
.spinner {
  width: 60vw;
  height: 60vw;
  margin: 0 auto;
  margin-top: 5vw;
  position: relative;
}
.spin-bar {
  width: 60vw;
  height: 6vw;
  position: absolute;
  box-sizing: border-box;
  border-left: 10vw solid deeppink;
  background-color: dodgerblue;
  outline: 2vw solid black;
  box-shadow: 0 0 2vw 3vw yellow;
  top: 30vw;
}

JavaScript

var spinner = document.querySelector('.spinner');
var spinBars = document.querySelectorAll('.spin-bar');
var style = document.querySelector('#style');

var step = 0;
setRotation(step);
setInterval(function(){
  setRotation(step);
  step = step >= 15 ? 0 : step + 1;
}, 30);

function setRotation(step){
  for(var i = 0; i < spinBars.length; i++){
    var styles = [
      "transform: rotate(calc(22.5deg * " + (i - step) + "))",
      "opacity: " + (1 - ((i) / 10))
    ].join(';');
    spinBars[i].style = styles;
  }
}

function changeColors(){
  var css = ".spin-bar {"+
      "background-color: " + randomColor() + ";" +
      "border-color: " + randomColor() + ";" +
      "outline-color: " + randomColor() + ";" +
      "box-shadow: 0 0 2vw 3vw " + randomColor() + ";"
  style.innerHTML = css;
}
setInterval(changeColors, 2000);

changeColors();
document.body.addEventListener('click', function(){
	changeColors();
});

function randomColor(){
  var r = randomInt();
  var g = randomInt();
  var b = randomInt();
  return "rgb(" + r + ", " + g + ", " + b + ")";
}

function randomInt(){
  return Math.ceil(Math.random() * (255 + 1)) - 1;
}