Space invaders - all species

dabblet.css

/**
 * Space invaders - all species
 */
body {
	font-size: 4px;
}
.row {
	overflow: hidden;
}
.invader {
	float: left;
	position: relative;
	margin-bottom: 7em !important; 
}
.invader .body {
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
	background: red;
	height: 1em;
	position: absolute;
	overflow: hidden;
	text-indent: 100%;
	width: 1em;
}

@keyframes species1 { 
0%, 49.99%, 100% { 
box-shadow:
/* row 1 */ 1.5em -0.5em 0 .5em red, 3em 0em 0 0 red,
/* row 2 */ 1.5em 1.5em 0 .5em red, -1em 1em 0 0 red, 0em 1em 0 0 red, 3em 1em 0 0 red, 4em 1em 0 0 red,
/* row 3 */ -1.5em 2.5em 0 .5em red, 0em 3em 0 0 red, 1em 3em 0 0 red, 2em 3em 0 0 red, 3em 3em 0 0 red, 4.5em 2.5em 0 .5em red, 
/* row 4 */ 0em 4em 0 0 red, 3em 4em 0 0 red,
/* row 5 */ -1em 5em 0 0 red, 1em 5em 0 0 red, 2em 5em 0 0 red, 4em 5em 0 0 red, 
/* row 6 */ -2em 6em 0 0 red, 0em 6em 0 0 red, 3em 6em 0 0 red, 5em 6em 0 0 red;
} 50%, 99.99% { 
box-shadow:
/* row 1 */ 1.5em -0.5em 0 .5em red, 3em 0em 0 0 red,
/* row 2 */ 1.5em 1.5em 0 .5em red, -1em 1em 0 0 red, 0em 1em 0 0 red, 3em 1em 0 0 red, 4em 1em 0 0 red,
/* row 3 */ -1.5em 2.5em 0 .5em red, 0em 3em 0 0 red, 1em 3em 0 0 red, 2em 3em 0 0 red, 3em 3em 0 0 red, 4.5em 2.5em 0 .5em red, 
/* row 4 */ -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red, 4em 4em 0 0 red,
/* row 5 */ -2em 5em 0 0 red, 5em 5em 0 0 red, 
/* row 6 */ -1em 6em 0 0 red, 4em 6em 0 0 red;
}  }

.species1 {
	height: 8em;
	margin-left: 2em;
	margin-right: 5em;
	width: 8em;
}
.species1 .body {
	animation-name: species1;
	left: 2em;
	top: 1em;
}


@keyframes species2 { 
0%, 49.99%, 100% { 
box-shadow:
/* row 1 */ -3em -3em 0 0 red, 3em -3em 0 0 red,
/* row 2 */ -2em -2em 0 0 red, 2em -2em 0 0 red,
/* row 3 */ -3em -1em 0 0 red, -2em -1em 0 0 red, 0 0 0 1em red, 2em -1em 0 0 red, 3em -1em 0 0 red,
/* row 4 */ -4em 0 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red,
/* row 5 */ -5em 1em 0 0 red, -4em 1em 0 0 red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, 4em 1em 0 0 red, 5em 1em 0 0 red,
/* row 6 */ -5em 2em 0 0 red, 5em 2em 0 0 red,
/* row 7 */ -5em 3em 0 0 red, -3em 3em 0 0 red, 3em 3em 0 0 red, 5em 3em 0 0 red,
/* row 8 */ -2em 4em 0 0 red, -1em 4em 0 0 red, 1em 4em 0 0 red, 2em 4em 0 0 red;} 50%, 99.99% { 
box-shadow:
/* row 1 */ -3em -3em 0 0 red, 3em -3em 0 0 red,
/* row 2 */ -5em -2em 0 0 red, -2em -2em 0 0 red, 2em -2em 0 0 red, 5em -2em 0 0 red,
/* row 3 */ -5em -1em 0 0 red, -3em -1em 0 0 red, -2em -1em 0 0 red, 0 0 0 1em red, 2em -1em 0 0 red, 3em -1em 0 0 red, 5em -1em 0 0 red,
/* row 4 */ -5em 0em 0 0 red, -4em 0em 0 0 red, -3em 0 0 0 red, 3em 0 0 0 red, 4em 0 0 0 red, 5em 0em 0 0 red,
/* row 5 */ -4em 1em 0 0 red, 0 1em 0 1em red, -2.5em 1.5em 0 .5em red, 2.5em 1.5em 0 .5em red, 4em 1em 0 0 red,
/* row 6 */
/* row 7 */ -3em 3em 0 0 red, 3em 3em 0 0 red,
/* row 8 */ -4em 4em 0 0 red, 4em 4em 0 0 red;
}  }
.species2 {
	width: 11em;
	height: 8em;
	margin-left: 1em;
	margin-right: 3em;
}
.species2 .body {
	animation-name: species2;
	left: 5em;
	top: 3em;
}

@keyframes species3 { 
0%, 49.99%, 100% {
box-shadow:
/* row 1 */-2em 0 0 0 red,-1em 0 0 0 red,1em 0 0 0 red,
/* row 2 */-4.5em 1.5em 0 .5em red,-2.5em 1.5em 0 .5em red,-0.5em 1.5em 0 .5em red,1.5em 1.5em 0 .5em red,3.5em 1.5em 0 .5em red,
/* row 3 */-5em 3em 0 1em red,-0.5em 3.5em 0 .5em red,4em 3em 0 1em red,
/* row 4 */-2.5em 4.5em 0 .5em red,1.5em 4.5em 0 .5em red,
/* row 5 */-4em 6em 0 0 red,-3em 6em 0 0 red,-1em 6em 0 0 red,0em 6em 0 0 red,2em 6em 0 0 red,3em 6em 0 0 red,
/* row 6 */-6em 7em 0 0 red,-5em 7em 0 0 red,4em 7em 0 0 red,5em 7em 0 0 red;
} 50%, 99.99% {
box-shadow:
/* row 1 */-2em 0 0 0 red,-1em 0 0 0 red,1em 0 0 0 red,
/* row 2 */-4.5em 1.5em 0 .5em red,-2.5em 1.5em 0 .5em red,-0.5em 1.5em 0 .5em red,1.5em 1.5em 0 .5em red,3.5em 1.5em 0 .5em red,
/* row 3 */-5em 3em 0 1em red,-0.5em 3.5em 0 .5em red,4em 3em 0 1em red,
/* row 4 */-4em 5em 0 0 red,-2.5em 4.5em 0 .5em red,1.5em 4.5em 0 .5em red,3em 5em 0 0 red,
/* row 5 */-5em 6em 0 0 red,-4em 6em 0 0 red,-1em 6em 0 0 red,0em 6em 0 0 red,3em 6em 0 0 red,4em 6em 0 0 red,
/* row 6 */-4em 7em,/* row 4 */ 0 0 red,-3em 7em 0 0 red,2em 7em 0 0 red,3em 7em 0 0 red;
} }
.species3 {
	height: 8em;
	margin-right: 3em;
	width: 12em;
}
.species3 .body {
	animation-name: species3;
	left: 6em;
	top: 0em;
}

dabblet.html

<div class="row">
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
	<div class="invader species1"><div class="body"></div></div>
</div>
<div class="row">	
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
</div>
<div class="row">	
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
	<div class="invader species2"><div class="body"></div></div>
</div>
<div class="row">
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
</div>

<div class="row">
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
	<div class="invader species3"><div class="body"></div></div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}