.colours

@import "bourbon@5.*";

// Play with these values :)
$colours-laps: 6;
$colours-speed: 10s;
$colours-tones: 30;
$colours-size: 4.5em;

@function get-color($i, $total){  
  $base-colour: #dfef45;
  $spectrum: 360deg;
  $offset: 0deg;
  @return adjust-hue($base-colour, $offset + $spectrum / $total * $i);
}

@function shadow($i, $total, $alt: false){
  @if ($alt){
    @return 
      (($colours-size*1) * sin(($i) * (360deg / $total))) 
      (($colours-size*1)  * cos(($i) * (360deg / $total))) 
      0 
      $colours-size rgba(get-color($i, $total), 0.9);
  }@else{
    @return 
      (($colours-size*2) * sin(($i) * (360deg / $total))) 
      (($colours-size*2)  * cos(($i) * (360deg / $total))) 
      0 
      $colours-size rgba(get-color($i, $total), 0.2);
  }
}

// Builds the colours
@function build-colours($alt: false) {
  $shadows: ();
  
  @if ($alt){
	  @for $i from 0 to $colours-tones {
      $shadows: append($shadows, shadow($i, 3, true), comma);
    }
  }@else{
  	@for $i from 0 to $colours-tones {
      $shadows: append($shadows, shadow($i, $colours-tones), comma);
    }
	}
  @return $shadows;
}


@keyframes spectrum{
	0%, 10%{
    box-shadow: build-colours(true);
    transform: rotate(0deg);
  }
  90%,100%{
    box-shadow: build-colours();
    transform: rotate(360deg*$colours-laps);
  }
}

body{ background: #333; }

.colours{
  width: .5em;
  height: .5em;
  border-radius: 50%;
  
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  
  background: transparent;
  
  box-shadow: build-colours(true);
  
  animation: spectrum $colours-speed 1s cubic-bezier(.33,-0.46,.22,1.09) infinite alternate;
}