- var n_arm = 8, n_rot = 10;

style
	- for(var i = 0; i < n_rot; i++)
		| .rot:nth-child(#{i + 1}) { --i: #{i} }
.a3d(style=`--nr: ${n_rot}; --f: ${1/Math.tan(Math.PI/n_arm)}`)
	- for(var j = 0; j < n_arm; j++)
		.arm(style=`--k: ${j/n_arm}`)
			- for(var i = 0; i < n_rot; i++)
				.rot
View Compiled
$d: .25em;
$t: 2s;
$o: calc(var(--f)*3*#{$d});

body {
	overflow: hidden;
	height: 100vh;
	perspective: 21em;
	background: #141e37
}

div, :before, :after { position: absolute }

div { transform-style: preserve-3d }

.a3d { top: 50%; left: 50% }

.arm {
	margin-left: $o;
	transform-origin: calc(-1*#{$o}) 0;
	transform: rotate(calc(var(--k)*1turn));
}

.rot {
	--d: calc((var(--i) + 1)*#{$d});
	--dt: calc((var(--i)/var(--nr) + var(--k))*#{-$t});
	--a: r #{$t} linear var(--dt) infinite;
	margin-left: calc(.5*var(--i)*(var(--i) + 1)*#{1.25*$d});
	animation: var(--a);
	
	&:before, &:after {
		--s: 0;
		margin: calc(-.5*var(--d) + .625*(2*var(--s) - 1)*var(--d)) calc(-.5*var(--d));
		width: var(--d); height: var(--d);
		border-radius: 50%;
		background: hsl(295, 61%, calc(100% - var(--s)*38%));
		animation: var(--a) reverse, f .5*$t calc(var(--dt) + (.25 + var(--s)*.5)*#{$t}) ease-in infinite alternate;
		content: ''
	}
	
	&:after { --s: 1 }
}

@keyframes r { 0% { transform: rotatex(1turn) } }

@keyframes f { to { opacity: .1 } }

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js