- var hxgns = 50;
main
  .hxgns
    - for (var h = 0; h < hxgns; ++h) {
      .hxgn
        - for (var s = 0; s < 6; ++s) {
          .s
        - }
    - }

@import 'compass';
$h: 50;
$c: #ffd239;
$dur: 0.5s;
$scale: 0.9;
$rotInc: 6deg;
$triH: sqrt(3)/2;
$x: 50%;
$y: 65%;
$maxSize: 720px;

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  height: 100vh;
}
main, .hxgns {
  position: relative;
}
main {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: $maxSize;
  height: 100%;
  max-height: $maxSize;
}
.hxgns, .hxgn {
  transform-origin: $x $y;
}
.hxgns {
  animation: twist $dur linear infinite;
  font-size: 28px;
  width: (40em * $triH); 
  height: (40em * $triH);
}
.hxgn, .s {
  position: absolute;
}
.hxgn {
  width: 100%; 
  height: 100%;
}
.s {
  top: 50%;
  left: 50%;
  width: 0; 
  height: 0; 
  border-left: 10em solid transparent;
  border-right: 10em solid transparent;
  border-bottom: (20em * $triH) solid $c;
  transform-origin: 50% 0;
}
.hxgn:nth-of-type(odd) > .s {
  border-bottom-color: $c/4;
}
@for $h from 1 through $h {
  .hxgn:nth-of-type(#{$h}) {
    $h: $h - 1;
    transform: rotate($rotInc * $h) scale(pow($scale,$h),pow($scale,$h));
    z-index: $h;
  }
}
@for $s from 1 through 6 {
  .s:nth-of-type(#{$s}) {
    transform: translateX(-50%) rotate(60deg * ($s - 1));
  }
}

@keyframes twist {
  from {
    transform: rotate(0deg) scale(1,1);
  }
  to {
    transform: rotate(-$rotInc*2) scale(pow($scale,-2),pow($scale,-2));
  }
}