Last Updated: February 25, 2016
·
716
· frhd

Drawing Pixels with CSS3

Picture

html:

<div class="sprite">
</div>

stylus:

// minimum pixel size
ps = 5px

//  upsize pixel
p(n)
  ps * n

sprite
div
  // pixel size
  width p(1)
  height p(1)
  // Draw 
  box-shadow:
    p(6) 0 0 black,
    p(7) 0 0 black,
    p(8) 0 0 black,
    p(9) 0 0 black,
    p(10) 0 0 black,
    p(11) 0 0 black,
    p(4) p(1) 0 black,
    p(5) p(1) 0 black,
    p(6) p(1) 0 black,
    p(7) p(1) 0 white,
    p(8) p(1) 0 red,
    p(9) p(1) 0 red,
    p(10) p(1) 0 white,
    p(11) p(1) 0 black,
    p(12) p(1) 0 black,
    p(13) p(1) 0 black,
    p(3) p(2) 0 black,
    p(4) p(2) 0 black,
    p(5) p(2) 0 white,
    p(6) p(2) 0 white,
    p(7) p(2) 0 white,
    p(8) p(2) 0 red,
    p(9) p(2) 0 red,
    p(10) p(2) 0 white,
    p(11) p(2) 0 white,
    p(12) p(2) 0 white,
    p(13) p(2) 0 black,
    p(14) p(2) 0 black,
    p(2) p(3) 0 black,
    p(3) p(3) 0 black,
    p(4) p(3) 0 red,
    p(5) p(3) 0 white,
    p(6) p(3) 0 white,
    p(7) p(3) 0 red,
    p(8) p(3) 0 red,
    p(9) p(3) 0 red,
    p(10) p(3) 0 red,
    p(11) p(3) 0 white,
    p(12) p(3) 0 white,
    p(13) p(3) 0 red,
    p(14) p(3) 0 black,
    p(15) p(3) 0 black,
    p(2) p(4) 0 black,
    p(3) p(4) 0 white,
    p(4) p(4) 0 red,
    p(5) p(4) 0 red,
    p(6) p(4) 0 red,
    p(7) p(4) 0 red,
    p(8) p(4) 0 red,
    p(9) p(4) 0 red,
    p(10) p(4) 0 red,
    p(11) p(4) 0 red,
    p(12) p(4) 0 red,
    p(13) p(4) 0 red,
    p(14) p(4) 0 white,
    p(15) p(4) 0 black,
    p(1) p(5) 0 black,
    p(2) p(5) 0 black,
    p(3) p(5) 0 white,
    p(4) p(5) 0 white,
    p(5) p(5) 0 red,
    p(6) p(5) 0 red,
    p(7) p(5) 0 white,
    p(8) p(5) 0 white,
    p(9) p(5) 0 white,
    p(10) p(5) 0 white,
    p(11) p(5) 0 red,
    p(12) p(5) 0 red,
    p(13) p(5) 0 white,
    p(14) p(5) 0 white,
    p(15) p(5) 0 black,
    p(16) p(5) 0 black,
    p(1) p(6) 0 black,
    p(2) p(6) 0 white,
    p(3) p(6) 0 white,
    p(4) p(6) 0 white,
    p(5) p(6) 0 red,
    p(6) p(6) 0 white,
    p(7) p(6) 0 white,
    p(8) p(6) 0 white,
    p(9) p(6) 0 white,
    p(10) p(6) 0 white,
    p(11) p(6) 0 white,
    p(12) p(6) 0 red,
    p(13) p(6) 0 white,
    p(14) p(6) 0 white,
    p(15) p(6) 0 white,
    p(16) p(6) 0 black,
    p(1) p(7) 0 black,
    p(2) p(7) 0 white,
    p(3) p(7) 0 white,
    p(4) p(7) 0 white,
    p(5) p(7) 0 red,
    p(6) p(7) 0 white,
    p(7) p(7) 0 white,
    p(8) p(7) 0 white,
    p(9) p(7) 0 white,
    p(10) p(7) 0 white,
    p(11) p(7) 0 white,
    p(12) p(7) 0 red,
    p(13) p(7) 0 white,
    p(14) p(7) 0 white,
    p(15) p(7) 0 white,
    p(16) p(7) 0 black,
    p(1) p(8) 0 black,
    p(2) p(8) 0 white,
    p(3) p(8) 0 white,
    p(4) p(8) 0 red,
    p(5) p(8) 0 red,
    p(6) p(8) 0 white,
    p(7) p(8) 0 white,
    p(8) p(8) 0 white,
    p(9) p(8) 0 white,
    p(10) p(8) 0 white,
    p(11) p(8) 0 white,
    p(12) p(8) 0 red,
    p(13) p(8) 0 red,
    p(14) p(8) 0 white,
    p(15) p(8) 0 white,
    p(16) p(8) 0 black,
    p(1) p(9) 0 black,
    p(2) p(9) 0 red,
    p(3) p(9) 0 red,
    p(4) p(9) 0 red,
    p(5) p(9) 0 red,
    p(6) p(9) 0 red,
    p(7) p(9) 0 white,
    p(8) p(9) 0 white,
    p(9) p(9) 0 white,
    p(10) p(9) 0 white,
    p(11) p(9) 0 red,
    p(12) p(9) 0 red,
    p(13) p(9) 0 red,
    p(14) p(9) 0 red,
    p(15) p(9) 0 red,
    p(16) p(9) 0 black,
    p(1) p(10) 0 black,
    p(2) p(10) 0 red,
    p(3) p(10) 0 red,
    p(4) p(10) 0 black,
    p(5) p(10) 0 black,
    p(6) p(10) 0 black,
    p(7) p(10) 0 black,
    p(8) p(10) 0 black,
    p(9) p(10) 0 black,
    p(10) p(10) 0 black,
    p(11) p(10) 0 black,
    p(12) p(10) 0 black,
    p(13) p(10) 0 black,
    p(14) p(10) 0 red,
    p(15) p(10) 0 red,
    p(16) p(10) 0 black,
    p(1) p(11) 0 black,
    p(2) p(11) 0 black,
    p(3) p(11) 0 black,
    p(4) p(11) 0 black,
    p(5) p(11) 0 white,
    p(6) p(11) 0 white,
    p(7) p(11) 0 black,
    p(8) p(11) 0 white,
    p(9) p(11) 0 white,
    p(10) p(11) 0 black,
    p(11) p(11) 0 white,
    p(12) p(11) 0 white,
    p(13) p(11) 0 black,
    p(14) p(11) 0 black,
    p(15) p(11) 0 black,
    p(16) p(11) 0 black,
    p(2) p(12) 0 black,
    p(3) p(12) 0 black,
    p(4) p(12) 0 white,
    p(5) p(12) 0 white,
    p(6) p(12) 0 white,
    p(7) p(12) 0 black,
    p(8) p(12) 0 white,
    p(9) p(12) 0 white,
    p(10) p(12) 0 black,
    p(11) p(12) 0 white,
    p(12) p(12) 0 white,
    p(13) p(12) 0 white,
    p(14) p(12) 0 black,
    p(15) p(12) 0 black,
    p(3) p(13) 0 black,
    p(4) p(13) 0 white,
    p(5) p(13) 0 white,
    p(6) p(13) 0 white,
    p(7) p(13) 0 white,
    p(8) p(13) 0 white,
    p(9) p(13) 0 white,
    p(10) p(13) 0 white,
    p(11) p(13) 0 white,
    p(12) p(13) 0 white,
    p(13) p(13) 0 white,
    p(14) p(13) 0 black,
    p(3) p(14) 0 black,
    p(4) p(14) 0 black,
    p(5) p(14) 0 white,
    p(6) p(14) 0 white,
    p(7) p(14) 0 white,
    p(8) p(14) 0 white,
    p(9) p(14) 0 white,
    p(10) p(14) 0 white,
    p(11) p(14) 0 white,
    p(12) p(14) 0 white,
    p(13) p(14) 0 black,
    p(14) p(14) 0 black,
    p(4) p(15) 0 black,
    p(5) p(15) 0 black,
    p(6) p(15) 0 black,
    p(7) p(15) 0 black,
    p(8) p(15) 0 black,
    p(9) p(15) 0 black,
    p(10) p(15) 0 black,
    p(11) p(15) 0 black,
    p(12) p(15) 0 black,
    p(13) p(15) 0 black