B&B#4

B&B#4.markdown

B&B#4

Reference: http://beesandbombs.tumblr.com/post/101608610949/lenses

A Pen by wontem on CodePen.

License.

index.jade

.wrapper
  - for(var i = 0; i < 10; i++)
    - for(var j = 0; j < 10; j++)
      if ((i + j) % 2)
        .leaf.l
      else
        .leaf.r

style.sass

$side: 30px
$num: 10

@mixin center
  position: absolute
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto

html, body
  background: white
  overflow: hidden
  width: 100%
  height: 100%
  pointer-events: none
  user-select: none  
  
.wrapper
  @include center
  width: $side * $num
  height: $side * $num

.leaf
  float: left
  width: $side
  height: $side
  background: #222
  animation: rotate 4s infinite

  &.l
    border-bottom-left-radius: 100%
    border-top-right-radius: 100%
  &.r
    border-bottom-right-radius: 100%
    border-top-left-radius: 100%
    
  $half: $num / 2 + 0.5
  @for $i from 1 through $num
    @for $j from 1 through $num
      $k: ($i - 1) * $num + $j
      $m: floor(abs($half - $i))
      $n: floor(abs($half - $j))
      &:nth-child(#{$k})
        animation-delay: -16s + 16s * (max($m, $n) / $num / $num)

    
@keyframes rotate
  0%
    transform: rotateZ(0deg)
  25%, 50%
    transform: rotateZ(90deg)
  75%, 100%
    transform: rotateZ(180deg)