HTML
<div class='assembly'>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
<div class='ring'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>
</div>
SCSS
$palette: #ffb7e5 #d381c1 #d9dbf0 #a7e9e7 #faec72 #fea994;
$n: length($palette);
$n-dots: 18;
$dot-a: 360deg/$n-dots;
$dot-d: .75em;
$n-rings: 36;
$ring-a: 360deg/$n-rings;
$ring-r: 5em;
$torus-r: 8em;
$t: 10s;
body {
overflow: hidden;
height: 100vh;
perspective: 20em;
perspective-origin: 50% calc(50% - #{1.25*$torus-r});
background: #000;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%; left: 50%;
--bc: translatez(-$torus-r) rotatex(-30deg) scalex(1.25);
transform: var(--bc) rotatey(0turn);
animation: ry 43s linear infinite;
}
@keyframes ry { to { transform: var(--bc) rotatey(1turn); } }
.ring {
--bc: rotatey(var(--ry)) translatez($torus-r);
animation: rx $t ease-in-out var(--dt) infinite;
@for $i from 0 to $n-rings {
&:nth-child(#{$i + 1}) {
--ry: $i*$ring-a;
--rx: $i*.5*$dot-a;
--dt: -$i*$t/$n-rings;
}
}
}
@keyframes rx {
0%, 75% { transform: var(--bc) rotatex(var(--rx)); }
100% {
transform: var(--bc) rotatex(calc(var(--rx) - #{$n*$dot-a}));
}
}
.dot {
margin: -.5*$dot-d;
width: $dot-d; height: $dot-d;
border-radius: 50%;
backface-visibility: hidden;
transform: rotatex(var(--rx)) translatez($ring-r);
background: currentcolor;
@for $i from 1 through $n {
&:nth-child(#{$n}n + #{$i}) {
background: nth($palette, $i);
}
}
@for $i from 0 to $n-dots {
&:nth-child(#{$i + 1}) {
--rx: $i*$dot-a;
}
}
}
