Flower

flower.markdown

Flower

A Pen by Giana on CodePen.

License.

index.pug

// https://codepen.io/pixelass/post/let-us-jade-4-mixins-on-steroids
mixin recur(levels)
  if levels > 0
    .n
      +recur(levels - 1)

.container
  +recur(20)

style.scss

.n {
  animation: anim 7s infinite alternate;
  box-sizing: border-box;
  border-radius: 30% 100% 0 100%;
  border: 3px groove;
  transform-origin: top left;
  width: 103%;
  height: 103%;
  will-change: transform-origin;
}

$nboxes : 20;
$deg : 360 / $nboxes;

@mixin nest($num) {
  @if ($num > 0) {
    .n {
      @if($num % 2 == 0 ) {
        border: 1px inset;
      } @else {
        border: 3px groove;
      }
      
      @include nest($num - 1);
    }
  }
}

@for $n from 1 to $nboxes {
  .n {
    transform: rotate($deg * 1deg);

    @include nest($nboxes);
  }
}

//=== Pen styling, ignore
body {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.container {
  width: 150px;
  height: 150px;
}

@keyframes anim {
  25% { transform-origin: bottom right; }
  50% { transform-origin: top left; }
  75% { transform-origin: center center; }
}