Skip to content

Instantly share code, notes, and snippets.

@jshawl

jshawl/precess-input-1395845807.scss

Created March 26, 2014 14:56
Show Gist options
  • Save jshawl/9785229 to your computer and use it in GitHub Desktop.
Save jshawl/9785229 to your computer and use it in GitHub Desktop.
Download ZIP
a precess production
Raw
precess-input-1395845807.scss
$blockSize:25px;
$color: #000;
body{
padding:$blockSize;
}
.invader{
height:7 * ($blockSize +1);
width:11 * ($blockSize +1);
position:relative;
&::after{
content:'';
display:block;
position:absolute;
height:$blockSize;
width:$blockSize;
left: -$blockSize;
box-shadow: 4*($blockSize +1) 0px 0px $color
,8*($blockSize +1) 0px 0px $color
,3*($blockSize +1) ($blockSize + 1) 0px $color
,4*($blockSize +1) ($blockSize + 1) 0px $color
,5*($blockSize +1) ($blockSize + 1) 0px $color
,6*($blockSize +1) ($blockSize + 1) 0px $color
,7*($blockSize +1) ($blockSize + 1) 0px $color
,8*($blockSize +1) ($blockSize + 1) 0px $color
,9*($blockSize +1) ($blockSize + 1) 0px $color
,2*($blockSize+1) 2*($blockSize + 1) 0px $color
,3*($blockSize+1) 2*($blockSize + 1) 0px $color
,5*($blockSize+1) 2*($blockSize + 1) 0px $color
,6*($blockSize +1) 2*($blockSize + 1) 0px $color
,7*($blockSize +1) 2*($blockSize + 1) 0px $color
,9*($blockSize +1) 2*($blockSize + 1) 0px $color
,10*($blockSize +1) 2*($blockSize + 1) 0px $color
,($blockSize+1) 3*($blockSize+1) 0 $color
,2*($blockSize+1) 3*($blockSize + 1) 0px $color
,3*($blockSize+1) 3*($blockSize + 1) 0px $color
,4*($blockSize+1) 3*($blockSize + 1) 0px $color
,5*($blockSize+1) 3*($blockSize + 1) 0px $color
,6*($blockSize+1) 3*($blockSize + 1) 0px $color
,7*($blockSize+1) 3*($blockSize + 1) 0px $color
,8*($blockSize+1) 3*($blockSize + 1) 0px $color
,9*($blockSize+1) 3*($blockSize + 1) 0px $color
,10*($blockSize+1) 3*($blockSize + 1) 0px $color
,11*($blockSize+1) 3*($blockSize + 1) 0px $color
,($blockSize+1) 4*($blockSize + 1) 0px $color
,3*($blockSize+1) 4*($blockSize + 1) 0px $color
,4*($blockSize+1) 4*($blockSize + 1) 0px $color
,5*($blockSize+1) 4*($blockSize + 1) 0px $color
,6*($blockSize+1) 4*($blockSize + 1) 0px $color
,7*($blockSize+1) 4*($blockSize + 1) 0px $color
,8*($blockSize+1) 4*($blockSize + 1) 0px $color
,9*($blockSize+1) 4*($blockSize + 1) 0px $color
,11*($blockSize+1) 4*($blockSize + 1) 0px $color
,($blockSize+1) 5*($blockSize + 1) 0px $color
,3*($blockSize+1) 5*($blockSize + 1) 0px $color
,9*($blockSize+1) 5*($blockSize + 1) 0px $color
,11*($blockSize+1) 5*($blockSize + 1) 0px $color
,4*($blockSize+1) 6*($blockSize + 1) 0px $color
,8*($blockSize+1) 6*($blockSize + 1) 0px $color
;
animation: invader 1s steps(1) infinite forwards;
}
}
@keyframes invader {
0% {
box-shadow: 4*($blockSize +1) 0px 0px $color
,8*($blockSize +1) 0px 0px $color
,3*($blockSize +1) ($blockSize + 1) 0px $color
,4*($blockSize +1) ($blockSize + 1) 0px $color
,5*($blockSize +1) ($blockSize + 1) 0px $color
,6*($blockSize +1) ($blockSize + 1) 0px $color
,7*($blockSize +1) ($blockSize + 1) 0px $color
,8*($blockSize +1) ($blockSize + 1) 0px $color
,9*($blockSize +1) ($blockSize + 1) 0px $color
,2*($blockSize+1) 2*($blockSize + 1) 0px $color
,3*($blockSize+1) 2*($blockSize + 1) 0px $color
,5*($blockSize+1) 2*($blockSize + 1) 0px $color
,6*($blockSize +1) 2*($blockSize + 1) 0px $color
,7*($blockSize +1) 2*($blockSize + 1) 0px $color
,9*($blockSize +1) 2*($blockSize + 1) 0px $color
,10*($blockSize +1) 2*($blockSize + 1) 0px $color
,($blockSize+1) 3*($blockSize+1) 0 $color
,2*($blockSize+1) 3*($blockSize + 1) 0px $color
,3*($blockSize+1) 3*($blockSize + 1) 0px $color
,4*($blockSize+1) 3*($blockSize + 1) 0px $color
,5*($blockSize+1) 3*($blockSize + 1) 0px $color
,6*($blockSize+1) 3*($blockSize + 1) 0px $color
,7*($blockSize+1) 3*($blockSize + 1) 0px $color
,8*($blockSize+1) 3*($blockSize + 1) 0px $color
,9*($blockSize+1) 3*($blockSize + 1) 0px $color
,10*($blockSize+1) 3*($blockSize + 1) 0px $color
,11*($blockSize+1) 3*($blockSize + 1) 0px $color
,($blockSize+1) 4*($blockSize + 1) 0px $color
,3*($blockSize+1) 4*($blockSize + 1) 0px $color
,4*($blockSize+1) 4*($blockSize + 1) 0px $color
,5*($blockSize+1) 4*($blockSize + 1) 0px $color
,6*($blockSize+1) 4*($blockSize + 1) 0px $color
,7*($blockSize+1) 4*($blockSize + 1) 0px $color
,8*($blockSize+1) 4*($blockSize + 1) 0px $color
,9*($blockSize+1) 4*($blockSize + 1) 0px $color
,11*($blockSize+1) 4*($blockSize + 1) 0px $color
,($blockSize+1) 5*($blockSize + 1) 0px $color
,3*($blockSize+1) 5*($blockSize + 1) 0px $color
,9*($blockSize+1) 5*($blockSize + 1) 0px $color
,11*($blockSize+1) 5*($blockSize + 1) 0px $color
,4*($blockSize+1) 6*($blockSize + 1) 0px $color
,5*($blockSize+1) 6*($blockSize + 1) 0px $color
,7*($blockSize+1) 6*($blockSize + 1) 0px $color
,8*($blockSize+1) 6*($blockSize + 1) 0px $color
;
}
50% {
box-shadow: ($blockSize+1) 0px $color
,4*($blockSize +1) 0px 0px $color
,8*($blockSize +1) 0px 0px $color
,11*($blockSize +1) 0px 0px $color
,($blockSize+1) ($blockSize +1) 0px $color
,3*($blockSize +1) ($blockSize + 1) 0px $color
,4*($blockSize +1) ($blockSize + 1) 0px $color
,5*($blockSize +1) ($blockSize + 1) 0px $color
,6*($blockSize +1) ($blockSize + 1) 0px $color
,7*($blockSize +1) ($blockSize + 1) 0px $color
,8*($blockSize +1) ($blockSize + 1) 0px $color
,9*($blockSize +1) ($blockSize + 1) 0px $color
,11*($blockSize +1) ($blockSize + 1) 0px $color
,($blockSize+1) 2*($blockSize + 1) 0px $color
,2*($blockSize+1) 2*($blockSize + 1) 0px $color
,3*($blockSize+1) 2*($blockSize + 1) 0px $color
,5*($blockSize+1) 2*($blockSize + 1) 0px $color
,6*($blockSize +1) 2*($blockSize + 1) 0px $color
,7*($blockSize +1) 2*($blockSize + 1) 0px $color
,9*($blockSize +1) 2*($blockSize + 1) 0px $color
,10*($blockSize +1) 2*($blockSize + 1) 0px $color
,11*($blockSize +1) 2*($blockSize + 1) 0px $color
,2*($blockSize+1) 3*($blockSize + 1) 0px $color
,3*($blockSize+1) 3*($blockSize + 1) 0px $color
,4*($blockSize+1) 3*($blockSize + 1) 0px $color
,5*($blockSize+1) 3*($blockSize + 1) 0px $color
,6*($blockSize+1) 3*($blockSize + 1) 0px $color
,7*($blockSize+1) 3*($blockSize + 1) 0px $color
,8*($blockSize+1) 3*($blockSize + 1) 0px $color
,9*($blockSize+1) 3*($blockSize + 1) 0px $color
,10*($blockSize+1) 3*($blockSize + 1) 0px $color
,3*($blockSize+1) 4*($blockSize + 1) 0px $color
,4*($blockSize+1) 4*($blockSize + 1) 0px $color
,5*($blockSize+1) 4*($blockSize + 1) 0px $color
,6*($blockSize+1) 4*($blockSize + 1) 0px $color
,7*($blockSize+1) 4*($blockSize + 1) 0px $color
,8*($blockSize+1) 4*($blockSize + 1) 0px $color
,9*($blockSize+1) 4*($blockSize + 1) 0px $color
,3*($blockSize+1) 5*($blockSize + 1) 0px $color
,9*($blockSize+1) 5*($blockSize + 1) 0px $color
,2*($blockSize+1) 6*($blockSize + 1) 0px $color
,10*($blockSize+1) 6*($blockSize + 1) 0px $color
;
}
}
Raw
precess-output-1395845807.css
body {
padding: 25px;
}
.invader {
height: 182px;
width: 286px;
position: relative;
}
.invader::after {
content: '';
display: block;
position: absolute;
height: 25px;
width: 25px;
left: -25px;
box-shadow: 104px 0px 0px black, 208px 0px 0px black, 78px 26px 0px black, 104px 26px 0px black, 130px 26px 0px black, 156px 26px 0px black, 182px 26px 0px black, 208px 26px 0px black, 234px 26px 0px black, 52px 52px 0px black, 78px 52px 0px black, 130px 52px 0px black, 156px 52px 0px black, 182px 52px 0px black, 234px 52px 0px black, 260px 52px 0px black, 26px 78px 0 black, 52px 78px 0px black, 78px 78px 0px black, 104px 78px 0px black, 130px 78px 0px black, 156px 78px 0px black, 182px 78px 0px black, 208px 78px 0px black, 234px 78px 0px black, 260px 78px 0px black, 286px 78px 0px black, 26px 104px 0px black, 78px 104px 0px black, 104px 104px 0px black, 130px 104px 0px black, 156px 104px 0px black, 182px 104px 0px black, 208px 104px 0px black, 234px 104px 0px black, 286px 104px 0px black, 26px 130px 0px black, 78px 130px 0px black, 234px 130px 0px black, 286px 130px 0px black, 104px 156px 0px black, 208px 156px 0px black;
animation: invader 1s steps(1) infinite forwards;
}
@keyframes invader {
0% {
box-shadow: 104px 0px 0px black, 208px 0px 0px black, 78px 26px 0px black, 104px 26px 0px black, 130px 26px 0px black, 156px 26px 0px black, 182px 26px 0px black, 208px 26px 0px black, 234px 26px 0px black, 52px 52px 0px black, 78px 52px 0px black, 130px 52px 0px black, 156px 52px 0px black, 182px 52px 0px black, 234px 52px 0px black, 260px 52px 0px black, 26px 78px 0 black, 52px 78px 0px black, 78px 78px 0px black, 104px 78px 0px black, 130px 78px 0px black, 156px 78px 0px black, 182px 78px 0px black, 208px 78px 0px black, 234px 78px 0px black, 260px 78px 0px black, 286px 78px 0px black, 26px 104px 0px black, 78px 104px 0px black, 104px 104px 0px black, 130px 104px 0px black, 156px 104px 0px black, 182px 104px 0px black, 208px 104px 0px black, 234px 104px 0px black, 286px 104px 0px black, 26px 130px 0px black, 78px 130px 0px black, 234px 130px 0px black, 286px 130px 0px black, 104px 156px 0px black, 130px 156px 0px black, 182px 156px 0px black, 208px 156px 0px black;
}
50% {
box-shadow: 26px 0px black, 104px 0px 0px black, 208px 0px 0px black, 286px 0px 0px black, 26px 26px 0px black, 78px 26px 0px black, 104px 26px 0px black, 130px 26px 0px black, 156px 26px 0px black, 182px 26px 0px black, 208px 26px 0px black, 234px 26px 0px black, 286px 26px 0px black, 26px 52px 0px black, 52px 52px 0px black, 78px 52px 0px black, 130px 52px 0px black, 156px 52px 0px black, 182px 52px 0px black, 234px 52px 0px black, 260px 52px 0px black, 286px 52px 0px black, 52px 78px 0px black, 78px 78px 0px black, 104px 78px 0px black, 130px 78px 0px black, 156px 78px 0px black, 182px 78px 0px black, 208px 78px 0px black, 234px 78px 0px black, 260px 78px 0px black, 78px 104px 0px black, 104px 104px 0px black, 130px 104px 0px black, 156px 104px 0px black, 182px 104px 0px black, 208px 104px 0px black, 234px 104px 0px black, 78px 130px 0px black, 234px 130px 0px black, 52px 156px 0px black, 260px 156px 0px black;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment