console
<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>
body {
overflow: hidden;
height: 100vh;
perspective: 20em;
perspective-origin: 50% calc(50% - 10em);
background: #000;
}
div {
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%;
left: 50%;
--bc: translatez(-8em) 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(8em);
animation: rx 10s ease-in-out var(--dt) infinite;
}
.ring:nth-child(1) {
--ry: 0deg;
--rx: 0deg;
--dt: 0s;
}
.ring:nth-child(2) {
--ry: 10deg;
--rx: 10deg;
--dt: -0.27778s;
}
.ring:nth-child(3) {
--ry: 20deg;
--rx: 20deg;
--dt: -0.55556s;
}
.ring:nth-child(4) {
--ry: 30deg;
--rx: 30deg;
--dt: -0.83333s;
}
.ring:nth-child(5) {
--ry: 40deg;
--rx: 40deg;
--dt: -1.11111s;
}
.ring:nth-child(6) {
--ry: 50deg;
--rx: 50deg;
--dt: -1.38889s;
}
.ring:nth-child(7) {
--ry: 60deg;
--rx: 60deg;
--dt: -1.66667s;
}
.ring:nth-child(8) {
--ry: 70deg;
--rx: 70deg;
--dt: -1.94444s;
}
.ring:nth-child(9) {
--ry: 80deg;
--rx: 80deg;
--dt: -2.22222s;
}
.ring:nth-child(10) {
--ry: 90deg;
--rx: 90deg;
--dt: -2.5s;
}
.ring:nth-child(11) {
--ry: 100deg;
--rx: 100deg;
--dt: -2.77778s;
}
.ring:nth-child(12) {
--ry: 110deg;
--rx: 110deg;
--dt: -3.05556s;
}
.ring:nth-child(13) {
--ry: 120deg;
--rx: 120deg;
--dt: -3.33333s;
}
.ring:nth-child(14) {
--ry: 130deg;
--rx: 130deg;
--dt: -3.61111s;
}
.ring:nth-child(15) {
--ry: 140deg;
--rx: 140deg;
--dt: -3.88889s;
}
.ring:nth-child(16) {
--ry: 150deg;
--rx: 150deg;
--dt: -4.16667s;
}
.ring:nth-child(17) {
--ry: 160deg;
--rx: 160deg;
--dt: -4.44444s;
}
.ring:nth-child(18) {
--ry: 170deg;
--rx: 170deg;
--dt: -4.72222s;
}
.ring:nth-child(19) {
--ry: 180deg;
--rx: 180deg;
--dt: -5s;
}
.ring:nth-child(20) {
--ry: 190deg;
--rx: 190deg;
--dt: -5.27778s;
}
.ring:nth-child(21) {
--ry: 200deg;
--rx: 200deg;
--dt: -5.55556s;
}
.ring:nth-child(22) {
--ry: 210deg;
--rx: 210deg;
--dt: -5.83333s;
}
.ring:nth-child(23) {
--ry: 220deg;
--rx: 220deg;
--dt: -6.11111s;
}
.ring:nth-child(24) {
--ry: 230deg;
--rx: 230deg;
--dt: -6.38889s;
}
.ring:nth-child(25) {
--ry: 240deg;
--rx: 240deg;
--dt: -6.66667s;
}
.ring:nth-child(26) {
--ry: 250deg;
--rx: 250deg;
--dt: -6.94444s;
}
.ring:nth-child(27) {
--ry: 260deg;
--rx: 260deg;
--dt: -7.22222s;
}
.ring:nth-child(28) {
--ry: 270deg;
--rx: 270deg;
--dt: -7.5s;
}
.ring:nth-child(29) {
--ry: 280deg;
--rx: 280deg;
--dt: -7.77778s;
}
.ring:nth-child(30) {
--ry: 290deg;
--rx: 290deg;
--dt: -8.05556s;
}
.ring:nth-child(31) {
--ry: 300deg;
--rx: 300deg;
--dt: -8.33333s;
}
.ring:nth-child(32) {
--ry: 310deg;
--rx: 310deg;
--dt: -8.61111s;
}
.ring:nth-child(33) {
--ry: 320deg;
--rx: 320deg;
--dt: -8.88889s;
}
.ring:nth-child(34) {
--ry: 330deg;
--rx: 330deg;
--dt: -9.16667s;
}
.ring:nth-child(35) {
--ry: 340deg;
--rx: 340deg;
--dt: -9.44444s;
}
.ring:nth-child(36) {
--ry: 350deg;
--rx: 350deg;
--dt: -9.72222s;
}
@keyframes rx {
0%, 75% {
transform: var(--bc) rotatex(var(--rx));
}
100% {
transform: var(--bc) rotatex(calc(var(--rx) - 120deg));
}
}
.dot {
margin: -0.375em;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
backface-visibility: hidden;
transform: rotatex(var(--rx)) translatez(5em);
background: currentcolor;
}
.dot:nth-child(6n + 1) {
background: #ffb7e5;
}
.dot:nth-child(6n + 2) {
background: #d381c1;
}
.dot:nth-child(6n + 3) {
background: #d9dbf0;
}
.dot:nth-child(6n + 4) {
background: #a7e9e7;
}
.dot:nth-child(6n + 5) {
background: #faec72;
}
.dot:nth-child(6n + 6) {
background: #fea994;
}
.dot:nth-child(1) {
--rx: 0deg;
}
.dot:nth-child(2) {
--rx: 20deg;
}
.dot:nth-child(3) {
--rx: 40deg;
}
.dot:nth-child(4) {
--rx: 60deg;
}
.dot:nth-child(5) {
--rx: 80deg;
}
.dot:nth-child(6) {
--rx: 100deg;
}
.dot:nth-child(7) {
--rx: 120deg;
}
.dot:nth-child(8) {
--rx: 140deg;
}
.dot:nth-child(9) {
--rx: 160deg;
}
.dot:nth-child(10) {
--rx: 180deg;
}
.dot:nth-child(11) {
--rx: 200deg;
}
.dot:nth-child(12) {
--rx: 220deg;
}
.dot:nth-child(13) {
--rx: 240deg;
}
.dot:nth-child(14) {
--rx: 260deg;
}
.dot:nth-child(15) {
--rx: 280deg;
}
.dot:nth-child(16) {
--rx: 300deg;
}
.dot:nth-child(17) {
--rx: 320deg;
}
.dot:nth-child(18) {
--rx: 340deg;
}