// CSS fractalgenerator
// the fractal effect is generated by -webkit-box-reflect
// using vanilla CSS

//$primes: 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97;

$primes: 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41;


@function repeat ($a, $n) {
  $s: div; 
    @for $i from 1 to $n {
    $s: join($s, $a);
  }
  
  @return $s;
}
//square root of 2
$r: sqrt(2);
// relative size
$s: 100%/$r;
// bounding-box-size
$b: 150px;
// animation-duration
$d: 360s;
// color
$c: rgba(0,55,0,0.1);
// angle
$a: -30deg;
// animation range
$w: 200deg;
// filter
$f:  hue-rotate(1190deg) brightness(115%);
// reflect direction
$x: below; // above | below | left |right
$y: right; // above | below | left |right


div {
  // reflect
  -webkit-box-reflect: $x;
  border-radius: 100%;
}
 
//////START//////
// the logic behind the fractal
div div { 
  position: absolute;
  // offset the divs
  left: $s;
  top: -$s;   
  // scale divs
  padding-bottom: $s/2;
  width: $s;
  // rotate divs
  transform-origin: 0 -$s/2;
  transform: rotate3d(0,0,1,$a); 
  //set background-color
  background: $c;
  filter: $f;
  animation: p $d linear infinite alternate;
  @each $prime in $primes {
    $selector: div;
    $i: index($primes, $prime);
    $v: repeat($selector, $i);
    #{$v} {
      animation: p#{$i} $d/$prime linear infinite alternate;
      animation-delay: -$d/$prime;
    }
  }
}
//////END//////

@keyframes p {
  100% {transform: rotate3d(0,0,1,$a + $w)}
}

@each $prime in $primes {
    $selector: div;
    $i: index($primes, $prime);
    @keyframes p#{$i} {
      100% {transform: rotate3d(0,0,1,$a + $w*$i)}
    }
  }
// bounding-box
///////////////
// provide a playground
section {
  position: absolute;
  width: $b;
  padding-bottom: $b/2;
  top: 300px;
  left: 200px;
  -webkit-box-reflect: $y; 
  animation: color-pulse 14s linear infinite;
  filter: hue-rotate(0deg) contrast(25%);
}

@keyframes color-pulse {
  50% {
   filter: hue-rotate(100deg) contrast(75%);
  }
  100% {
   filter: hue-rotate(360deg) contrast(25%);
  }  
}
//
body { background: black; }