<div id="cat"></div>
@function pixelize($colors, $size) {
  $result: '';
  $numRows: length($colors);

  @for $rowIndex from 1 through $numRows {
    $y: ($rowIndex - 1);
    $row: nth($colors, $rowIndex);
    $numCols: length($row);

    @for $cellIndex from 1 through $numCols {
      $x: ($cellIndex - 1);
      $color: nth($row, $cellIndex);
      
      $sep: ',';
      @if $x == 0 and $y == 0 {
        $sep: '';
      }
      
      $result: $result + '#{$sep} #{$x * $size} #{$y * $size} #{$color}'
    }
  }
  
  $result: unquote($result);
  @return $result;
}

$size: 10px;

$t: transparent;
$black: #000;
$gray: #cdc9cf;
$dkgray: #a09da1;
$pink: #ffa6ed;

$cat: (
  ($t, $t, $t, $black, $t, $t, $t, $t, $t, $t, $black),
  ($t, $t, $black, $gray, $black, $t, $t, $t, $t, $black, $gray, $black),
  ($t, $t, $black, $gray, $dkgray, $black, $black, $black, $black, $dkgray, $gray, $black, $t, $t, $t, $t, $t, $t, $t, $t, $black, $black),
  ($t, $black, $dkgray, $gray, $gray, $dkgray, $dkgray, $gray, $dkgray, $gray, $gray, $dkgray, $black, $t, $t, $t, $t, $t, $t, $black, $gray, $gray, $black),
  ($t, $black, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black, $t, $t, $t, $t, $t, $t, $black, $gray, $gray, $black),
  ($black, $dkgray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $dkgray, $black, $black, $black, $black, $t, $t, $t, $black, $dkgray, $black),
  ($black, $gray, $gray, $black, $gray, $gray, $black, $gray, $gray, $black, $gray, $gray, $gray, $dkgray, $gray, $dkgray, $gray, $black, $t, $t, $black, $gray, $black),
  ($black, $gray, $pink, $gray, $gray, $black, $gray, $black, $gray, $gray, $pink, $gray, $gray, $dkgray, $gray, $dkgray, $gray, $gray, $black, $black, $black, $dkgray, $black),
  ($black, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black, $gray, $black),
  ($black, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black, $gray, $black),
  ($black, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black),
  ($black, $dkgray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black),
  ($black, $dkgray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $black),
  ($black, $dkgray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $dkgray, $black),
  ($t, $black, $dkgray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $gray, $dkgray, $black),
  ($t, $t, $black, $dkgray, $gray, $dkgray, $dkgray, $gray, $dkgray, $gray, $gray, $gray, $dkgray, $gray, $dkgray, $dkgray, $gray, $dkgray, $black),
  ($t, $t, $t, $black, $gray, $black, $black, $gray, $black, $black, $black, $black, $black, $gray, $black, $black, $gray, $black),
  ($t, $t, $t, $black, $black, $t, $t, $black, $black, $t, $t, $t, $black, $black, $t, $t, $black, $black)
);

#cat {
  position: relative;
  width: calc(23 * #{$size});
  height: calc(18 * #{$size});
  margin: 1rem;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    box-shadow:
    pixelize($cat, $size);
  }
}
/**
 Part of the "Creating Pixel Art with CSS" series by Jacque Schrag.
 Read the post: https://dev.to/jnschrag/creating-pixel-art-with-css-3451
**/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.