div
	each val in Array(300)
		i

$amount: 300; // decrease that if your browser is too slow

body {
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background-color: black;
}

div {
	position: relative;
}

i {
	--radius: 6rem;
	--angle: 0deg;
	--speed: 0ms;
	--hue: 0deg;
	--size: 0.75rem;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background-color: hsl(var(--hue), 100%, 50%);
	box-shadow: 0rem 0rem 1rem #ffffff2a, 0rem 0rem 2rem #ffffff02;
	position: absolute;
	transform: rotate(var(--angle)) translateX(var(--radius));

	@for $i from 0 to $amount {
		&:nth-child(#{$i + 1}) {
			--angle: calc(#{$i} * 360deg / #{$amount});
			--speed: calc(2s + 0.001s * (#{$i} + 1));
			--hue: calc(50deg + #{$i} * 100deg /#{$amount});
		}
	}

	animation: walk var(--speed) ease-in-out infinite alternate;

	@keyframes walk {
		from {
			transform: rotate(var(--angle)) translateX(var(--radius));
		}
		to {
			transform: rotate(var(--angle)) translateX(calc(-1 * var(--radius)));
		}
	}
}