<body>
<div class="pixel-container">
<div class="pixel"></div>
</div>
</body>// TUTORIAL: https://dev.to/flangerhanger/css-pixel-art-using-box-shadow-2ba5
$tunic: rgb(75, 159, 2);
$outline: black;
$white: white;
$hair: rgb(249, 199, 34);
$eyes: rgb(0, 136, 255);
$skin: rgb(198, 170, 109);
$shoes: rgb(130, 53, 53);
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vmin;
}
.pixel-container {
width: 25em;
height: 25em;
}
.pixel {
width: 1em;
height: 1em;
background-color: $white;
box-shadow: 8em 1em $outline, 9em 1em $outline, 10em 1em $outline,
11em 1em $outline, 12em 1em $outline, 13em 1em $outline, 7em 2em $outline,
8em 2em $outline, 9em 2em $tunic, 10em 2em $tunic, 11em 2em $tunic,
12em 2em $tunic, 13em 2em $outline, 14em 2em $outline, 6em 3em $outline,
7em 3em $outline, 8em 3em $tunic, 9em 3em $tunic, 10em 3em $tunic,
11em 3em $tunic, 12em 3em $tunic, 13em 3em $tunic, 14em 3em $outline,
15em 3em $outline, 5em 4em $outline, 6em 4em $outline, 7em 4em $tunic,
8em 4em $tunic, 9em 4em $tunic, 10em 4em $tunic, 11em 4em $tunic,
12em 4em $tunic, 13em 4em $tunic, 14em 4em $tunic, 15em 4em $outline,
16em 4em $outline, 5em 5em $outline, 6em 5em $tunic, 7em 5em $outline,
8em 5em $outline, 9em 5em $outline, 10em 5em $outline, 11em 5em $outline,
12em 5em $outline, 13em 5em $outline, 16em 5em $outline, 15em 5em $tunic,
14em 5em $outline, 5em 6em $outline, 6em 6em $outline, 7em 6em $hair,
8em 6em $hair, 9em 6em $hair, 10em 6em $hair, 11em 6em $hair, 12em 6em $hair,
13em 6em $hair, 14em 6em $hair, 15em 4em $outline, 16em 6em $outline,
15em 6em $outline, 4em 7em $outline, 5em 7em $outline, 6em 7em $hair,
7em 7em $hair, 8em 7em $outline, 9em 7em $hair, 10em 7em $hair,
11em 7em $hair, 12em 7em $hair, 13em 7em $outline, 14em 7em $hair,
15em 7em $hair, 16em 7em $outline, 17em 7em $outline, 2em 8em $outline,
3em 8em $outline, 4em 8em $outline, 5em 8em $outline, 6em 8em $hair,
7em 8em $outline, 8em 8em $hair, 9em 8em $hair, 10em 8em $hair,
11em 8em $hair, 12em 8em $outline, 13em 8em $outline, 14em 8em $outline,
15em 8em $hair, 16em 8em $outline, 17em 8em $outline, 18em 8em $outline,
19em 8em $outline, 2em 9em $outline, 3em 9em $skin, 4em 9em $skin,
5em 9em $outline, 6em 9em $outline, 7em 9em $hair, 8em 9em $hair,
9em 9em $hair, 10em 9em $hair, 11em 9em $outline, 12em 9em $outline,
13em 9em $skin, 14em 9em $outline, 15em 9em $hair, 16em 9em $outline,
17em 9em $skin, 18em 9em $skin, 19em 9em $outline, 3em 10em $outline,
4em 10em $outline, 5em 10em $outline, 6em 10em $outline, 7em 10em $hair,
8em 10em $hair, 9em 10em $outline, 10em 10em $outline, 11em 10em $outline,
12em 10em $skin, 13em 10em $skin, 14em 10em $outline, 15em 10em $hair,
16em 10em $outline, 17em 10em $outline, 18em 10em $outline,
4em 11em $outline, 5em 11em $hair, 6em 11em $outline, 7em 11em $outline,
8em 11em $outline, 9em 11em $outline, 10em 11em $outline, 11em 11em $skin,
12em 11em $outline, 13em 11em $outline, 14em 11em $outline,
15em 11em $outline, 16em 11em $hair, 17em 11em $outline, 4em 12em $outline,
5em 12em $hair, 6em 12em $outline, 7em 12em $white, 8em 12em $eyes,
9em 12em $eyes, 10em 12em $skin, 11em 12em $skin, 12em 12em $eyes,
13em 12em $eyes, 14em 12em $white, 15em 12em $outline, 16em 12em $hair,
17em 12em $outline, 4em 13em $outline, 5em 13em $outline, 6em 13em $outline,
7em 13em $skin, 8em 13em $eyes, 9em 13em $white, 10em 13em $skin,
11em 13em $skin, 12em 13em $white, 13em 13em $eyes, 14em 13em $skin,
15em 13em $outline, 16em 13em $outline, 17em 13em $outline,
5em 14em $outline, 6em 14em $outline, 7em 14em $outline, 8em 14em $skin,
9em 14em $skin, 10em 14em $skin, 11em 14em $skin, 12em 14em $skin,
13em 14em $skin, 14em 14em $outline, 15em 14em $outline, 16em 14em $outline,
//
6em 15em $outline,
7em 15em $outline, 8em 15em $outline, 9em 15em $outline, 10em 15em $outline,
11em 15em $outline, 12em 15em $outline, 13em 15em $outline,
14em 15em $outline, 15em 15em $outline, 5em 16em $outline, 6em 16em $tunic,
7em 16em $outline, 8em 16em $tunic, 9em 16em $tunic, 10em 16em $tunic,
11em 16em $tunic, 12em 16em $tunic, 13em 16em $tunic, 14em 16em $outline,
15em 16em $tunic, 16em 16em $outline, 4em 17em $outline, 5em 17em $tunic,
6em 17em $tunic, 7em 17em $outline, 8em 17em $tunic, 9em 17em $tunic,
10em 17em $tunic, 11em 17em $tunic, 12em 17em $tunic, 13em 17em $tunic,
14em 17em $outline, 15em 17em $tunic, 16em 17em $tunic, 17em 17em $outline,
3em 18em $outline, 4em 18em $skin, 5em 18em $skin, 6em 18em $outline,
7em 18em $outline, 8em 18em $tunic, 9em 18em $tunic, 10em 18em $tunic,
11em 18em $tunic, 12em 18em $tunic, 13em 18em $tunic, 14em 18em $outline,
15em 18em $outline, 16em 18em $skin, 17em 18em $skin, 18em 18em $outline,
3em 19em $outline, 4em 19em $outline, 5em 19em $skin, 6em 19em $outline,
7em 19em $tunic, 8em 19em $outline, 9em 19em $outline, 10em 19em $hair,
11em 19em $hair, 12em 19em $outline, 13em 19em $outline, 14em 19em $tunic,
15em 19em $outline, 16em 19em $skin, 17em 19em $outline, 18em 19em $outline,
4em 20em $outline, 5em 20em $outline, 6em 20em $outline, 7em 20em $tunic,
8em 20em $tunic, 9em 20em $outline, 10em 20em $hair, 11em 20em $hair,
12em 20em $outline, 13em 20em $tunic, 14em 20em $tunic, 15em 20em $outline,
16em 20em $outline, 17em 20em $outline, 6em 21em $outline, 7em 21em $outline,
8em 21em $outline, 9em 21em $tunic, 10em 21em $tunic, 11em 21em $tunic,
12em 21em $tunic, 13em 21em $outline, 14em 21em $outline, 15em 21em $outline,
5em 22em $outline, 6em 22em $shoes, 7em 22em $shoes, 8em 22em $shoes,
9em 22em $outline, 10em 22em $outline, 11em 22em $outline,
12em 22em $outline, 13em 22em $shoes, 14em 22em $shoes, 15em 22em $shoes,
16em 22em $outline, 5em 23em $outline, 6em 23em $shoes, 7em 23em $shoes,
8em 23em $outline, 9em 23em $outline, 12em 23em $outline, 13em 23em $outline,
14em 23em $shoes, 15em 23em $shoes, 16em 23em $outline, 6em 24em $outline,
7em 24em $outline, 8em 24em $outline, 13em 24em $outline, 14em 24em $outline,
15em 24em $outline;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.