A Pen by Raphael.

index.haml

-(1..36).each do |i|
				.s

Random-circle.markdown

Random circle

Some fun with random()

A Pen by Raphael on CodePen.

License.

style.scss

@import "compass";
$n: 36;
$h: 1px;
$a: 360deg/$n;

html {
  position: fixed;
  height: 100%;
  width: 100%;
  background: linear-gradient(1deg, rgba(blue, .5), rgba(red,.8));
}
.s, .s:before {
  position: absolute;
  top: 50%; left: 50%;
}

.s {  
  @for $i from 0 to $n {    
      &:nth-child(#{$i + 1}) {
        transform: rotate($i*$a) translate(0px);      
        &:before {
          background:hsl($i*10,50%,50%);
          $rand:random(25)+10;
          width: $rand+px;
          height: $rand+px;
          $rand:random(15)+5;
          animation: translate $rand+s  ease-in-out infinite;
        }      
      }    
    }
  }  
   
  .s:before {      
    margin : 2px 0;
    border-radius:50%; 
    content: '';  
    transition:width 1s,height 1s;      
  }
#container{
  position: relative;
  top: 50%;
}
@keyframes translate { 0% { transform: translate(0px); }
                25% { transform: translate(-100px); }
                50% { transform: translate(0px); }
                75% { transform: translate( 100px); }
                100% { transform: translate(0px); } }