- (1..16).each do |a|
	.holder
		- (1..40).each do |b|
			.a
View Compiled
html, body {
	width: 100%;
	height: 100%;
	background: #000;
}

.holder {
	position: relative;
	animation: h 16s infinite;
	animation-timing-function: linear;
	width: 1px;
	height: 1px;
	top: 50%;
	left: 50%;
}

@for $i from 1 through 16 {
	.holder:nth-child(#{$i}) {
		animation-delay: $i - 1s;
	}
}

@keyframes h {
	from { transform: rotate(0) translate(-50%, -50%); }
	to { transform: rotate(360deg) translate(-50%, -50%); }
}

.a {
	width: 4px;
	height: 40px;
	position: absolute;
}


@for $i from 1 through 40 {
 .a:nth-child( #{$i} ) {
	 animation: a#{$i} 4s infinite;
	 animation-delay: $i * .08s;
	 background-color: hsl(160 + 3 * $i, 55%, 50%);
	 width: 1px + $i / 2;
	 height: 32px + $i * 1.4;
  }

	@keyframes a#{$i} {
		0% {
			transform: translate(10px, 10 * $i + px) rotate(60deg);
			background-color: hsl(160 + 3 * $i, 55%, 50%);
		}
		50% {
			transform: translate(10 * $i + px, 10px) rotate(120deg);
			background-color: hsl(100 + 3 * $i, 55%, 50%);
		}
		100% {
			transform: translate(10px, 10 * $i + px) rotate(60deg);
			background-color: hsl(160 + 3 * $i, 55%, 50%);
		}
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.