.nes-charmander { $charmander-colors: (#000202, #f77702, #eb2010, #fdfcff, #e5d70a, #e7d70e); // prettier-ignore $charmander: ( (0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,0,0,1,0,0,0), (0,0,0,1,2,2,2,2,1,0,0,0,0,0,0,0,1,3,1,0,0), (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0), (0,0,1,2,2,2,2,2,2,1,0,0,0,0,0,0,1,3,3,1,0), (0,1,2,2,2,2,2,2,2,2,1,0,0,0,0,1,3,3,2,3,1), (1,2,2,2,2,4,1,2,2,2,1,0,0,0,0,1,3,2,6,3,1), (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,1,3,5,5,3,1), (1,2,2,2,2,1,1,2,2,2,2,1,0,0,0,0,1,5,1,1,0), (0,1,2,2,2,2,2,2,2,2,2,2,1,0,0,0,1,2,1,0,0), (0,0,1,1,2,2,2,2,2,2,2,2,2,1,0,1,2,2,1,0,0), (0,0,0,0,1,1,1,2,2,1,2,2,2,1,1,2,2,1,0,0,0), (0,0,0,0,0,1,6,5,1,2,2,2,2,2,1,2,2,1,0,0,0), (0,0,0,0,0,1,5,5,5,1,1,2,2,2,1,2,1,0,0,0,0), (0,0,0,0,1,4,1,6,5,5,2,2,2,2,1,1,0,0,0,0,0), (0,0,0,0,0,1,1,1,5,5,2,2,2,1,1,0,0,0,0,0,0), (0,0,0,0,0,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0), (0,0,0,0,0,0,0,0,0,1,4,0,4,1,0,0,0,0,0,0,0), (0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,0) ); $size: 6px; position: relative; display: inline-block; width: $size * length(nth($charmander, 1)); height: $size * length($charmander); &::before { position: absolute; top: -$size; left: -$size; content: ""; background: transparent; @include pixelize($size, $charmander, $charmander-colors); @include fill-gaps(); } }