A CodePen by Hugo Giraudel. CSS kaleïdoscop - A small pen to try with SASS for loops, HSLa and Zen Coding. ALL IN ONE ! Plus a colorful result. :P

index.html

<ul>
  <li class="a-1"></li>
  <li class="a-2"></li>
  <li class="a-3"></li>
  <li class="a-4"></li>
  <li class="a-5"></li>
  <li class="a-6"></li>
  <li class="a-7"></li>
  <li class="a-8"></li>
  <li class="a-9"></li>
  <li class="a-10"></li>
  <li class="a-11"></li>
  <li class="a-12"></li>
  <li class="a-13"></li>
  <li class="a-14"></li>
  <li class="a-15"></li>
  <li class="a-16"></li>
  <li class="a-17"></li>
  <li class="a-18"></li>
  <li class="a-19"></li>
  <li class="a-20"></li>
  <li class="a-21"></li>
  <li class="a-22"></li>
  <li class="a-23"></li>
  <li class="a-24"></li>
  <li class="a-25"></li>
  <li class="a-26"></li>
  <li class="a-27"></li>
  <li class="a-28"></li>
  <li class="a-29"></li>
  <li class="a-30"></li>
  <li class="a-31"></li>
  <li class="a-32"></li>
  <li class="a-33"></li>
  <li class="a-34"></li>
  <li class="a-35"></li>
  <li class="a-36"></li>
</ul>

style.scss

@import "compass";
html {
  height: 100%;  
}

body { 
  height: 100%;
  background: linear-gradient(#fff, #eee);
}

ul {
 	width: 200px;
  height: 200px;
  position: relative;
  margin: 50px auto;
  transform-origin: 50% 50%;
  transform: rotate(-20deg);
  animation: rota 20s linear infinite;
}

ul:after {
 	content: "";
  position: absolute;
  border-radius: 50%;
  left: -25px;
  top: -25px;
  bottom: -25px;
  right: -25px;
  background: #2d2d2c;
  z-index: -1;
  box-shadow: 0 0 10px 3px rgba(0,0,50,0.3), 0 3px 10px rgba(0,0,0,0.4);
}

/*
ul:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%; 
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: white;
  margin: -10px 0 0 -10px;
}
*/

li {
  width: 100px;
  height: 100px;
 	position: absolute; 
  left: 50%;
  margin-left:-50px;
  transform-origin: bottom center;
  border-radius: 50% 0 50% 50%;
}

@for $i from 1 through 36 {
  li:nth-child(#{$i}){
    transform: rotate($i*10deg);
    background: hsla($i*10.5, 80, 60, 0.15);
  }
}

@keyframes rota {
  100% { transform: rotate(360deg); } 
}