.nes-octocat {
  $octocat-colors: (#333, #ffdec4, #cb7066);
  // prettier-ignore
  $octocat-1: (
    (0,0,0,1,0,0,0,0,0,0,0,0,1,0),
    (0,0,0,1,1,0,0,0,0,0,0,1,1,0),
    (0,0,0,1,1,1,1,1,1,1,1,1,1,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,2,2,2,2,2,2,1,1,1),
    (0,0,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,0,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,0,0,1,1,2,2,3,3,2,2,1,1,0),
    (1,1,0,0,0,0,1,1,1,1,0,0,0,0),
    (0,0,1,1,0,1,1,1,1,1,1,0,0,0),
    (0,0,0,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
  );
  // prettier-ignore
  $octocat-2: (
    (0,0,0,1,0,0,0,0,0,0,0,0,1,0),
    (0,0,0,1,1,0,0,0,0,0,0,1,1,0),
    (0,0,0,1,1,1,1,1,1,1,1,1,1,0),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,1,1,1,1,1,1,1,1,1),
    (0,0,1,1,1,2,2,2,2,2,2,1,1,1),
    (0,0,1,1,2,2,2,2,2,2,2,2,1,1),
    (0,1,1,1,2,3,2,2,2,2,3,2,1,1),
    (0,1,0,1,1,2,2,3,3,2,2,1,1,0),
    (0,0,1,0,0,0,1,1,1,1,0,0,0,0),
    (0,0,0,1,0,1,1,1,1,1,1,0,0,0),
    (0,0,0,1,1,1,1,1,1,1,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,0,1,0,1,1,0,1,0,0,0),
    (0,0,0,0,1,0,1,0,0,1,0,1,0,0)
  );
  $size: 6px;

  position: relative;
  display: inline-block;
  width: $size * length(nth($octocat-1, 1));
  height: $size * length($octocat-1);

  &::before {
    position: absolute;
    top: -$size;
    left: -$size;
    content: "";
    background: transparent;

    @include pixelize($size, $octocat-1, $octocat-colors);
    @include fill-gaps();
  }

  &.animate::before {
    animation: wave 0.5s infinite steps(1);
  }

  @keyframes wave {
    50% {
      @include pixelize($size, $octocat-2, $octocat-colors);
    }
  }
}