CSS Pixelated Eyeball

SassMeister-input-HTML.html

<div class='grid'>
  <div class='sprite'>
  </div>
</div>

SassMeister-input.sass

// ----
// libsass (v3.2.5)
// ----

$pixel: 10px
$gridColor: #888
$color1: #000
$color2: #aaa
$color3: #ddd
$color4: #048
$color5: #07b
$color6: #fff
$color7: #800
$color8: #c00
$color9: #c88

// Pixel parameters: <$pixel*x-pos> <$pixel*y-pos> <color>
$row1: ($pixel * 6) $pixel $color1, ($pixel * 7) $pixel $color1, ($pixel * 8) $pixel $color1, ($pixel * 9) $pixel $color1, ($pixel * 10) $pixel $color1, ($pixel * 11) $pixel $color1

$row2: ($pixel * 4) ($pixel * 2) $color1, ($pixel * 5) ($pixel * 2) $color1, ($pixel * 6) ($pixel * 2) $color8, ($pixel * 7) ($pixel * 2) $color6, ($pixel * 8) ($pixel * 2) $color6, ($pixel * 9) ($pixel * 2) $color8, ($pixel * 10) ($pixel * 2) $color6, ($pixel * 11) ($pixel * 2) $color9, ($pixel * 12) ($pixel * 2) $color1, ($pixel * 13) ($pixel * 2) $color1

$row3: ($pixel * 3) ($pixel * 3) $color1, ($pixel * 4) ($pixel * 3) $color6, ($pixel * 5) ($pixel * 3) $color6, ($pixel * 6) ($pixel * 3) $color9, ($pixel * 7) ($pixel * 3) $color6, ($pixel * 8) ($pixel * 3) $color6, ($pixel * 9) ($pixel * 3) $color6, ($pixel * 10) ($pixel * 3) $color6, ($pixel * 11) ($pixel * 3) $color6, ($pixel * 12) ($pixel * 3) $color6, ($pixel * 13) ($pixel * 3) $color3, ($pixel * 14) ($pixel * 3) $color1

$row4: ($pixel * 2) ($pixel * 4) $color1, ($pixel * 3) ($pixel * 4) $color6, ($pixel * 4) ($pixel * 4) $color8, ($pixel * 5) ($pixel * 4) $color6, ($pixel * 6) ($pixel * 4) $color6, ($pixel * 7) ($pixel * 4) $color6, ($pixel * 8) ($pixel * 4) $color6, ($pixel * 9) ($pixel * 4) $color6, ($pixel * 10) ($pixel * 4) $color6, ($pixel * 11) ($pixel * 4) $color6, ($pixel * 12) ($pixel * 4) $color9, ($pixel * 13) ($pixel * 4) $color8, ($pixel * 14) ($pixel * 4) $color3, ($pixel * 15) ($pixel * 4) $color1

$row5: ($pixel * 2) ($pixel * 5) $color1, ($pixel * 3) ($pixel * 5) $color6, ($pixel * 4) ($pixel * 5) $color6, ($pixel * 5) ($pixel * 5) $color6, ($pixel * 6) ($pixel * 5) $color6, ($pixel * 7) ($pixel * 5) $color5, ($pixel * 8) ($pixel * 5) $color5, ($pixel * 9) ($pixel * 5) $color5, ($pixel * 10) ($pixel * 5) $color5, ($pixel * 11) ($pixel * 5) $color6, ($pixel * 12) ($pixel * 5) $color6, ($pixel * 13) ($pixel * 5) $color6, ($pixel * 14) ($pixel * 5) $color3, ($pixel * 15) ($pixel * 5) $color1

$row6: $pixel ($pixel * 6) $color1, ($pixel * 2) ($pixel * 6) $color8, ($pixel * 3) ($pixel * 6) $color9, ($pixel * 4) ($pixel * 6) $color6, ($pixel * 5) ($pixel * 6) $color6, ($pixel * 6) ($pixel * 6) $color5, ($pixel * 7) ($pixel * 6) $color6, ($pixel * 8) ($pixel * 6) $color4, ($pixel * 9) ($pixel * 6) $color4, ($pixel * 10) ($pixel * 6) $color5, ($pixel * 11) ($pixel * 6) $color5, ($pixel * 12) ($pixel * 6) $color6, ($pixel * 13) ($pixel * 6) $color6, ($pixel * 14) ($pixel * 6) $color8, ($pixel * 15) ($pixel * 6) $color7, ($pixel * 16) ($pixel * 6) $color1

$row7: $pixel ($pixel * 7) $color1, ($pixel * 2) ($pixel * 7) $color6, ($pixel * 3) ($pixel * 7) $color6, ($pixel * 4) ($pixel * 7) $color6, ($pixel * 5) ($pixel * 7) $color5, ($pixel * 6) ($pixel * 7) $color6, ($pixel * 7) ($pixel * 7) $color4, ($pixel * 8) ($pixel * 7) $color1, ($pixel * 9) ($pixel * 7) $color1, ($pixel * 10) ($pixel * 7) $color4, ($pixel * 11) ($pixel * 7) $color5, ($pixel * 12) ($pixel * 7) $color5, ($pixel * 13) ($pixel * 7) $color6, ($pixel * 14) ($pixel * 7) $color3, ($pixel * 15) ($pixel * 7) $color2, ($pixel * 16) ($pixel * 7) $color1

$row8: $pixel ($pixel * 8) $color1, ($pixel * 2) ($pixel * 8) $color6, ($pixel * 3) ($pixel * 8) $color6, ($pixel * 4) ($pixel * 8) $color6, ($pixel * 5) ($pixel * 8) $color5, ($pixel * 6) ($pixel * 8) $color4, ($pixel * 7) ($pixel * 8) $color1, ($pixel * 8) ($pixel * 8) $color1, ($pixel * 9) ($pixel * 8) $color1, ($pixel * 10) ($pixel * 8) $color1, ($pixel * 11) ($pixel * 8) $color4, ($pixel * 12) ($pixel * 8) $color5, ($pixel * 13) ($pixel * 8) $color6, ($pixel * 14) ($pixel * 8) $color3, ($pixel * 15) ($pixel * 8) $color2, ($pixel * 16) ($pixel * 8) $color1

$row9: $pixel ($pixel * 9) $color1, ($pixel * 2) ($pixel * 9) $color8, ($pixel * 3) ($pixel * 9) $color6, ($pixel * 4) ($pixel * 9) $color6, ($pixel * 5) ($pixel * 9) $color5, ($pixel * 6) ($pixel * 9) $color4, ($pixel * 7) ($pixel * 9) $color1, ($pixel * 8) ($pixel * 9) $color1, ($pixel * 9) ($pixel * 9) $color1, ($pixel * 10) ($pixel * 9) $color1, ($pixel * 11) ($pixel * 9) $color4, ($pixel * 12) ($pixel * 9) $color5, ($pixel * 13) ($pixel * 9) $color6, ($pixel * 14) ($pixel * 9) $color3, ($pixel * 15) ($pixel * 9) $color7, ($pixel * 16) ($pixel * 9) $color1

$row10: $pixel ($pixel * 10) $color1, ($pixel * 2) ($pixel * 10) $color6, ($pixel * 3) ($pixel * 10) $color6, ($pixel * 4) ($pixel * 10) $color6, ($pixel * 5) ($pixel * 10) $color5, ($pixel * 6) ($pixel * 10) $color5, ($pixel * 7) ($pixel * 10) $color4, ($pixel * 8) ($pixel * 10) $color1, ($pixel * 9) ($pixel * 10) $color1, ($pixel * 10) ($pixel * 10) $color4, ($pixel * 11) ($pixel * 10) $color5, ($pixel * 12) ($pixel * 10) $color5, ($pixel * 13) ($pixel * 10) $color6, ($pixel * 14) ($pixel * 10) $color3, ($pixel * 15) ($pixel * 10) $color2, ($pixel * 16) ($pixel * 10) $color1

$row11: $pixel ($pixel * 11) $color1, ($pixel * 2) ($pixel * 11) $color8, ($pixel * 3) ($pixel * 11) $color9, ($pixel * 4) ($pixel * 11) $color6, ($pixel * 5) ($pixel * 11) $color6, ($pixel * 6) ($pixel * 11) $color5, ($pixel * 7) ($pixel * 11) $color5, ($pixel * 8) ($pixel * 11) $color4, ($pixel * 9) ($pixel * 11) $color4, ($pixel * 10) ($pixel * 11) $color5, ($pixel * 11) ($pixel * 11) $color5, ($pixel * 12) ($pixel * 11) $color6, ($pixel * 13) ($pixel * 11) $color6, ($pixel * 14) ($pixel * 11) $color3, ($pixel * 15) ($pixel * 11) $color2, ($pixel * 16) ($pixel * 11) $color1

$row12: ($pixel * 2) ($pixel * 12) $color1, ($pixel * 3) ($pixel * 12) $color6, ($pixel * 4) ($pixel * 12) $color6, ($pixel * 5) ($pixel * 12) $color6, ($pixel * 6) ($pixel * 12) $color6, ($pixel * 7) ($pixel * 12) $color5, ($pixel * 8) ($pixel * 12) $color5, ($pixel * 9) ($pixel * 12) $color5, ($pixel * 10) ($pixel * 12) $color5, ($pixel * 11) ($pixel * 12) $color6, ($pixel * 12) ($pixel * 12) $color6, ($pixel * 13) ($pixel * 12) $color9, ($pixel * 14) ($pixel * 12) $color3, ($pixel * 15) ($pixel * 12) $color1

$row13: ($pixel * 2) ($pixel * 13) $color1, ($pixel * 3) ($pixel * 13) $color6, ($pixel * 4) ($pixel * 13) $color8, ($pixel * 5) ($pixel * 13) $color6, ($pixel * 6) ($pixel * 13) $color6, ($pixel * 7) ($pixel * 13) $color6, ($pixel * 8) ($pixel * 13) $color6, ($pixel * 9) ($pixel * 13) $color6, ($pixel * 10) ($pixel * 13) $color6, ($pixel * 11) ($pixel * 13) $color6, ($pixel * 12) ($pixel * 13) $color3, ($pixel * 13) ($pixel * 13) $color8, ($pixel * 14) ($pixel * 13) $color2, ($pixel * 15) ($pixel * 13) $color1

$row14: ($pixel * 3) ($pixel * 14) $color1, ($pixel * 4) ($pixel * 14) $color3, ($pixel * 5) ($pixel * 14) $color3, ($pixel * 6) ($pixel * 14) $color3, ($pixel * 7) ($pixel * 14) $color3, ($pixel * 8) ($pixel * 14) $color3, ($pixel * 9) ($pixel * 14) $color3, ($pixel * 10) ($pixel * 14) $color8, ($pixel * 11) ($pixel * 14) $color3, ($pixel * 12) ($pixel * 14) $color3, ($pixel * 13) ($pixel * 14) $color2, ($pixel * 14) ($pixel * 14) $color1

$row15: ($pixel * 4) ($pixel * 15) $color1, ($pixel * 5) ($pixel * 15) $color1, ($pixel * 6) ($pixel * 15) $color2, ($pixel * 7) ($pixel * 15) $color7, ($pixel * 8) ($pixel * 15) $color2, ($pixel * 9) ($pixel * 15) $color2, ($pixel * 10) ($pixel * 15) $color7, ($pixel * 11) ($pixel * 15) $color2, ($pixel * 12) ($pixel * 15) $color1, ($pixel * 13) ($pixel * 15) $color1

$row16: ($pixel * 6) ($pixel * 16) $color1, ($pixel * 7) ($pixel * 16) $color1, ($pixel * 8) ($pixel * 16) $color1, ($pixel * 9) ($pixel * 16) $color1, ($pixel * 10) ($pixel * 16) $color1, ($pixel * 11) ($pixel * 16) $color1

$sprite: $row1, $row2, $row3, $row4, $row5, $row6, $row7, $row8, $row9, $row10, $row11, $row12, $row13, $row14, $row15, $row16

.grid
  background-image: linear-gradient(transparent ($pixel - 1), $gridColor $pixel, $gridColor), linear-gradient(90deg, transparent ($pixel - 1), $gridColor $pixel, $gridColor)
  background-size: $pixel $pixel
  border: 1px solid $gridColor
  overflow: hidden
  width: $pixel * 16
  height: $pixel * 16

.sprite
  width: $pixel
  height: $pixel
  transform: translate(-$pixel, -$pixel)
  box-shadow: $sprite

SassMeister-output.css

.grid {
  background-image: linear-gradient(transparent 9px, #888 10px, #888), linear-gradient(90deg, transparent 9px, #888 10px, #888);
  background-size: 10px 10px;
  border: 1px solid #888;
  overflow: hidden;
  width: 160px;
  height: 160px;
}

.sprite {
  width: 10px;
  height: 10px;
  transform: translate(-10px, -10px);
  box-shadow: 60px 10px #000, 70px 10px #000, 80px 10px #000, 90px 10px #000, 100px 10px #000, 110px 10px #000, 40px 20px #000, 50px 20px #000, 60px 20px #c00, 70px 20px #fff, 80px 20px #fff, 90px 20px #c00, 100px 20px #fff, 110px 20px #c88, 120px 20px #000, 130px 20px #000, 30px 30px #000, 40px 30px #fff, 50px 30px #fff, 60px 30px #c88, 70px 30px #fff, 80px 30px #fff, 90px 30px #fff, 100px 30px #fff, 110px 30px #fff, 120px 30px #fff, 130px 30px #ddd, 140px 30px #000, 20px 40px #000, 30px 40px #fff, 40px 40px #c00, 50px 40px #fff, 60px 40px #fff, 70px 40px #fff, 80px 40px #fff, 90px 40px #fff, 100px 40px #fff, 110px 40px #fff, 120px 40px #c88, 130px 40px #c00, 140px 40px #ddd, 150px 40px #000, 20px 50px #000, 30px 50px #fff, 40px 50px #fff, 50px 50px #fff, 60px 50px #fff, 70px 50px #07b, 80px 50px #07b, 90px 50px #07b, 100px 50px #07b, 110px 50px #fff, 120px 50px #fff, 130px 50px #fff, 140px 50px #ddd, 150px 50px #000, 10px 60px #000, 20px 60px #c00, 30px 60px #c88, 40px 60px #fff, 50px 60px #fff, 60px 60px #07b, 70px 60px #fff, 80px 60px #048, 90px 60px #048, 100px 60px #07b, 110px 60px #07b, 120px 60px #fff, 130px 60px #fff, 140px 60px #c00, 150px 60px #800, 160px 60px #000, 10px 70px #000, 20px 70px #fff, 30px 70px #fff, 40px 70px #fff, 50px 70px #07b, 60px 70px #fff, 70px 70px #048, 80px 70px #000, 90px 70px #000, 100px 70px #048, 110px 70px #07b, 120px 70px #07b, 130px 70px #fff, 140px 70px #ddd, 150px 70px #aaa, 160px 70px #000, 10px 80px #000, 20px 80px #fff, 30px 80px #fff, 40px 80px #fff, 50px 80px #07b, 60px 80px #048, 70px 80px #000, 80px 80px #000, 90px 80px #000, 100px 80px #000, 110px 80px #048, 120px 80px #07b, 130px 80px #fff, 140px 80px #ddd, 150px 80px #aaa, 160px 80px #000, 10px 90px #000, 20px 90px #c00, 30px 90px #fff, 40px 90px #fff, 50px 90px #07b, 60px 90px #048, 70px 90px #000, 80px 90px #000, 90px 90px #000, 100px 90px #000, 110px 90px #048, 120px 90px #07b, 130px 90px #fff, 140px 90px #ddd, 150px 90px #800, 160px 90px #000, 10px 100px #000, 20px 100px #fff, 30px 100px #fff, 40px 100px #fff, 50px 100px #07b, 60px 100px #07b, 70px 100px #048, 80px 100px #000, 90px 100px #000, 100px 100px #048, 110px 100px #07b, 120px 100px #07b, 130px 100px #fff, 140px 100px #ddd, 150px 100px #aaa, 160px 100px #000, 10px 110px #000, 20px 110px #c00, 30px 110px #c88, 40px 110px #fff, 50px 110px #fff, 60px 110px #07b, 70px 110px #07b, 80px 110px #048, 90px 110px #048, 100px 110px #07b, 110px 110px #07b, 120px 110px #fff, 130px 110px #fff, 140px 110px #ddd, 150px 110px #aaa, 160px 110px #000, 20px 120px #000, 30px 120px #fff, 40px 120px #fff, 50px 120px #fff, 60px 120px #fff, 70px 120px #07b, 80px 120px #07b, 90px 120px #07b, 100px 120px #07b, 110px 120px #fff, 120px 120px #fff, 130px 120px #c88, 140px 120px #ddd, 150px 120px #000, 20px 130px #000, 30px 130px #fff, 40px 130px #c00, 50px 130px #fff, 60px 130px #fff, 70px 130px #fff, 80px 130px #fff, 90px 130px #fff, 100px 130px #fff, 110px 130px #fff, 120px 130px #ddd, 130px 130px #c00, 140px 130px #aaa, 150px 130px #000, 30px 140px #000, 40px 140px #ddd, 50px 140px #ddd, 60px 140px #ddd, 70px 140px #ddd, 80px 140px #ddd, 90px 140px #ddd, 100px 140px #c00, 110px 140px #ddd, 120px 140px #ddd, 130px 140px #aaa, 140px 140px #000, 40px 150px #000, 50px 150px #000, 60px 150px #aaa, 70px 150px #800, 80px 150px #aaa, 90px 150px #aaa, 100px 150px #800, 110px 150px #aaa, 120px 150px #000, 130px 150px #000, 60px 160px #000, 70px 160px #000, 80px 160px #000, 90px 160px #000, 100px 160px #000, 110px 160px #000;
}

SassMeister-rendered.html

<div class='grid'>
  <div class='sprite'>
  </div>
</div>