HAML
.cont
- (1..10).each do |i|
%svg{:class => "cu#{i}" " cu"}(height="300" width="260" viewBox="0 0 260 300")
%polygon.p1(points="130,0 130,150 0,225 0,75")
%polygon.p2(points="130,0 260,75 260,225 130,150")
%polygon.p3(points="130,150 260,225 130,300 0,225")
SASS
$cb: #333
$c1: #63b995
$c2: #86deb7
$c3: #adeee3
$cp: $c1, $c2, $c3
$wi: 60px
$he: $wi * 1.15384615385
$t: 1s
$d: $t / 11
@keyframes anim
50%
transform: scale(1.1) rotate(2deg)
opacity: 0.9
@keyframes anim2
50%
stroke-width: 10px
body
background-color: $cb
height: 100vh
margin: 0
display: flex
align-items: center
justify-content: center
.cont
width: $wi*4
height: $he*4-($he/4)*3
.cu
overflow: visible
height: $he
width: $wi
display: inline-block
margin: 0 auto
float: left
box-sizing: border-box
position: relative
animation: anim $t infinite
opacity: 0.8
> polygon
animation: anim2 $t infinite
stroke: $cb
transform-origin: 50% 50%
@for $i from 1 through 3
.p#{$i}
fill: nth($cp, $i)
.cu2, .cu4, .cu7
clear: left
.cu1
left: $wi*2-$wi/2
.cu2,.cu3
left: $wi
top: -$he/4
.cu4,.cu5,.cu6
left: $wi/2
top: -$he/2
.cu7,.cu8,.cu9,.cu10
top: -$he/2-$he/4
// Animation
@for $i from 1 through 10
.cu#{$i}
animation-delay: $d * $i
filter: hue-rotate($i*36deg)
> polygon
animation-dely: $d * $i
