` ````
.assembly
- 313.times do
.square
```

` ````
@import "compass/css3";
$n-levels: 13;
$n-edges: 4;
$a: 2.5em;
$t: 5s;
$base-angle: 360deg/$n-edges;
html {
overflow: hidden;
background: #222;
color: white;
&:after {
$dim: $n-levels*$a;
position: absolute;
top: 50%; left: 50%;
margin: -$dim/2;
width: $dim; height: $dim;
box-shadow: 0 0 0 50vmax;
content: '';
}
}
.assembly {
&, *, :before {
position: absolute;
top: 50%; left: 50%;
}
animation: rot $t linear infinite;
}
.square {
$n: 1;
@for $l from 1 to $n-levels {
$n-level: $l*$n-edges;
$level-angle: $base-angle/$l;
&:nth-child(n + #{$n + 1}):before {
animation-name: ani#{$l};
}
@at-root {
@keyframes ani#{$l} {
#{($l + 1)/$n-levels*90%}, 100% {
transform: rotate($base-angle/2)
scale(if($l%2 == 0, 1, 0));
}
}
}
@for $i from 0 to $n-level {
$poly-ir: $l*$a;
$poly-cr: $poly-ir/cos($base-angle/2);
$poly-edge: 2*$poly-cr*sin($base-angle/2);
$j: $i%$l;
$poly-edge-diff: abs($j - $l/2)*$poly-edge/$l;
$dist: sqrt(pow($poly-ir, 2) + pow($poly-edge-diff, 2));
$curr-angle: $base-angle*floor($i/$l) + atan(($j - $l/2)*$poly-edge/$l/$poly-ir);
&:nth-child(#{$n + $i + 1}) {
transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
animation: collapse-#{$l}-#{$i} $t ease-in infinite
}
$poly-ir: $poly-ir*cos($base-angle/2);
$poly-cr: $poly-ir/cos($base-angle/2);
$poly-edge: 2*$poly-cr*sin($base-angle/2);
$poly-edge-diff: abs($j - $l/2)*$poly-edge/$l;
$dist: sqrt(pow($poly-ir, 2) + pow($poly-edge-diff, 2));
@at-root {
@keyframes collapse-#{$l}-#{$i} {
#{($l + 1)/$n-levels*90%}, 100% {
transform: rotate($curr-angle) translate($dist) rotate(-$curr-angle);
}
}
}
}
$n: $n + $n-level;
}
content: $n;
&:before {
margin: -$a/2;
width: $a; height: $a;
background: white;
animation: ani0 $t linear infinite;
content: '';
}
}
@keyframes ani0 {
#{1/$n-levels*90%}, 100% {
transform: rotate($base-angle/2);
}
}
@keyframes rot {
to {
transform: rotate($base-angle/2) //scale(cos($base-angle/2));
}
}
```

999px

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers