A Pen by thelitek.

index.haml

%div.container
  - (1..32).each do |i|
    %div{:class => "fl fl--#{i}"}

style.scss

@import "compass/css3";
$leaves : 32; 
$duration : .3s; 

html { height:100%; }

html { background:radial-gradient( #ccc, #9c9c9c ); }


.container { position:absolute; top:50%; left:50%;}

.circle { width:10em; height:10em; border:1em solid black; border-radius:50%; position:relative; top:50%; left:50%; }

.fl { position:absolute; width:100px; height:100px; border-radius:0 100% 0 100%; 
@include transform-origin( 0 0 0 ); @include animation( show $duration 1 both ); }

@for $i from 1 through $leaves {
  .fl--#{$i} { @include transform( rotate($i/$leaves *360deg) ); background:hsla( (($i/$leaves) * 255) , 100 , 50 , .15 ); 
    $delay : $i * $duration * .5; @include animation-delay($delay); }
  
}

@include keyframes( show ) {
  0% { opacity:0; }
  100%{ opacity:1; }
}

Yet-another-circle-hsla-flouerish-thingi.markdown

Yet another circle hsla flouerish thingi

A Pen by thelitek on CodePen.

License.