<div class="article-link">
<a href="https://fjolt.com/article/css-pixel-art-generator" target="blank">Read the article</a>
</div>
<canvas id="canvas"></canvas>
<div id="error" class="fl">
<div class="error">
I am an error
</div>
</div>
<div id="pixel-art-options">
<button class="generate-css">
<span class="generate-css-span">Generate CSS</span>
</button>
<button class="reset">
<span><i class="fal fa-sync"></i></span>
</button>
<div class="eraser-container">
<div class="eraser"><i class="fal fa-eraser"></i> Eraser</div>
</div>
<div class="prebuilt">
<div class="prebuilt current" data-prebuilt="blank">Demoes</div>
<div class="options">
<div class="prebuilt" data-prebuilt="mario">Mario</div>
<div class="prebuilt" data-prebuilt="yoshi">Yoshi</div>
<div class="prebuilt" data-prebuilt="babomb">Babomb</div>
</div>
</div>
<div class="import-container">
<input type="file" class="select-file" />
</div>
</div>
<div id="pixel-art-colors">
<div class="colors">
<div class="color current" style="background: white;" data-color="white"></div>
<div class="color" style="background: #ffc231;" data-color="#ffc231"></div>
<div class="color" style="background: #ff6c31;" data-color="#ff6c31"></div>
<div class="color" style="background: #ff1c1c;" data-color="#ff1c1c"></div>
<div class="color" style="background: #35c161;" data-color="#35c161"></div>
<div class="color" style="background: #3552c1;" data-color="#3552c1"></div>
<div class="color" style="background: #7935c1;" data-color="#7935c1"></div>
<div class="select-color">
<h3>Select Color:</h3>
<input type="color" value="" class="color-picker" />
</div>
</div>
</div>
<div id="pixel-art-area">
</div>
<div id="popup-pixel-art">
<h2>Pixel Art Code</h2>
<p>Copy the code below to use this on your webpage</p>
<div class="close"><i class="fal fa-times"></i></div>
</div>
<script src="https://kit.fontawesome.com/ac26654ca2.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;800&display=swap" rel="stylesheet">body {
background: rgb(15 19 22);
color: white;
padding: 2rem;
f font-family: Inter, sans-serif;
}
.article-link a {
position: absolute;
color: rgba(255,255,255,0.5);
top: 1rem;
right: 1rem;
font-size: 1.25rem;
}
code {
font-family: Menlo, Monaco, 'Courier New', monospace;
font-size: 1rem;
border-radius: 10px;
left: 5px;
margin-top: 0rem;
overflow: auto;
box-sizing: border-box;
padding: 0 1.5rem 6.5rem 1.5rem;
display: block;
max-height: 500px;
line-height: 1.25rem;
border-radius: 12px;
width: 100%;
float: left;
background: #1d2146a3;
font-size: 0.875rem;
max-width: 100%;
}
input {
background: transparent;
}
button {
height: 2.25rem;
/* margin: 1rem 0 0 0; */
/* width: 50%; */
list-style: circle;
cursor: pointer;
float: left;
background: linear-gradient(
45deg,#027cfd,#027cfd);
/* border-radius: 5px; */
font-family: Inter, sans-serif;
padding: 0.25rem 1rem;
border-radius: 7px;
width: auto;
color: white;
text-decoration: none;
font-variation-settings: 'wght' 800;
/* font-size: 1rem; */
border: none;
margin: 1rem 0 0 0;
box-shadow: 0 2px 20px #000000c4;
font-size: 1rem;
letter-spacing: 0.5px;
}
#pixel-art-area {
display: flex;
flex-direction: row;
flex-flow: wrap;
overflow: hidden;
border-radius: 4px;
padding: 2px 0 2px 2px;
}
#pixel-art-area input {
background: #101316;
}
#pixel-art-area .pixel {
width: 0.825rem;
margin: 0 3px 3px 0;
height: 0.825rem;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
border-radius: 3px;
background: #191f2b;
}
input[type="color"] {
height: 2rem;
padding: 0;
background: transparent !important;
border-radius: 10px;
height: 1.75rem;
position: relative;
border: none;
cursor: pointer;
}
#pixel-art-options {
display: flex;
}
.generate-css, .reset, .prebuilt > .current, .eraser-container, .import-container:before {
background: #191f2b;
box-shadow: none;
margin: 0 1rem 1rem 0;
font-variation-settings: 'wght' 600;
letter-spacing: 0;
border-radius: 100px;
font-size: 1rem;
transform: scale(1);
transition: all 0.05s ease-out;
border: none;
color: white;
font-family: Inter, sans-serif;
}
.import-container:before {
content: 'Select a File';
cursor: pointer;
line-height: 2.25rem;
padding: 0 1rem;
cursor: pointer;
display: block;
position: absolute;
pointer-events: none;
font-size: 1rem;
border-radius: 100px;
margin: 0;
}
input[type="file"] {
border: none;
background: transparent;
text-transform: initial;
width: 9rem;
color: rgb(15 19 22);
height: 2.5rem;
cursor: pointer;
opacity: 0;
padding: 0;
}
input[type="file"]::file-selector-button {
opacity: 0;
}
input[type="file"]::file-upload-button, input[type="file"]::-webkit-file-upload-button {
visibility: hidden;
}
.eraser-container {
padding: 0 1rem;
}
.prebuilt .current:after {
content: '\f078';
margin: 0 0 0 0.5rem;
font-family: 'Font Awesome 5 Pro', sans-serif;
}
.reset svg {
margin: 0;
padding: 0;
}
.generate-css:hover, .reset:hover, .prebuilt > .current:hover, input[type=file]:before:hover, .eraser-container:hover {
background: #6366914a;
transform: scale(1.02);
cursor: pointer;
}
.prebuilt > .current {
border-radius: 100px;
padding: 0.25rem 1rem;
line-height: 1.65rem;
margin: 0 1rem 0 0;
}
.colors {
margin-left: 0.5rem;
margin-bottom: 1rem;
position: relative;
display: flex;
align-items: center;
}
.colors > div {
width: 1.25rem;
cursor: pointer;
height: 1.25rem;
position: relative;
border-radius: 100px;
margin: 0 0.5rem 0 0;
}
.colors > div:not(.select-color).current:after, input.current:after {
border: 2px solid rgb(112 142 255);
position: absolute;
content: '';
border-radius: 100px;
top: -4px;
/* box-shadow: 0 0 0 1px rgb(112 142 255 / 39%); */
left: -4px;
width: calc(100% + 4px);
height: calc(100% + 4px);
}
input.current:after {
top: 1px;
left: -1px;
width: calc(100% + 0px);
height: calc(100% + -4px);
}
.prebuilt {
position: relative;
cursor: pointer;
}
.options {
background: white;
border-radius: 4px;
left: 1rem;
position: absolute;
z-index: 999;
top: 3rem;
}
input::-webkit-color-swatch {
border-radius: 100px;
width: 16px;
cursor: pointer;
height: 18px;
margin: 2px 0 0 2px;
border: none;
}
input[type="color"]:before {
content: '';
top: 6px;
left: 4px;
width: calc(100% - 6px);
border-radius: 100px;
height: calc(100% - 10px);
background: rgba(255,255,255,0.125);
position: absolute;
}
.options > div {
padding: 0.5rem;
font-size: 1rem;
border-bottom: 1px solid #ddd;
cursor: pointer;
color: rgba(0,0,0,0.6);
font-variation-settings: 'wght' 600;
min-width: 150px;
}
.options > div:last-of-type {
border-bottom: none;
}
input {
position: relative;
}
.options {
pointer-events: none;
opacity: 0;
transition: all 0.1s ease-out;
transform: scale(0.95);
}
.options.active {
opacity: 1;
transform: scale(1);
pointer-events: all;
}
.options:after {
content: '';
position: absolute;
top: -23px;
left: 45px;
border-color: transparent transparent white transparent;
border-width: 12px;
border-style: solid;
}
.eraser-container {
display: flex;
align-items: center;
transition: all 0.1s ease-out;
height: 2.25rem;
position: relative;
}
.eraser {
cursor: pointer;
}
.eraser-container.current {
background: #323c4e;
}
#popup-pixel-art {
position: fixed;
background: white;
top: 2rem;
z-index: 99999999;
transform: scale(0.9);
opacity: 0;
pointer-events: none;
left: 5rem;
border-radius: 6px;
left: calc(50% - 350px);
width: 700px;
padding: 1.5rem;
box-sizing: border-box;
max-height: calc(100% - 4rem);
overflow: hidden;
}
.colors > .select-color {
display: flex;
cursor: default;
width: auto;
align-items: center;
}
.colors > .select-color h3 {
margin: 0 0.5rem 0 1rem;
font-size: 1rem !important;
min-width: max-content;
}
#popup-pixel-art.active {
transform: scale(1);
opacity: 1;
pointer-events: all;
overflow: scroll;
}
#popup-pixel-art h2 {
color: black;
font-variation-settings: 'wght' 600;
font-weight: 400;
margin: 0 0 0rem 0;
font-size: 1.5rem;
}
#popup-pixel-art code {
background: #171b38;
}
#popup-pixel-art pre {
width: calc(100% - 13rem);
}
#popup-pixel-art pre code {
height: 185px;
}
#popup-pixel-art p {
color: rgba(0,0,0,0.4);
margin: 0.5rem 0 1rem 0;
letter-spacing: 0px;
font-size: 1rem;
line-height: 1.5rem;
}
#popup-pixel-art pre code:before,
#popup-pixel-art pre code:after {
display: none;
}
.pixelart {
position: absolute;
top: 5.5rem;
right: 13rem;
}
.close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
cursor: pointer;
}
.close svg {
color: black;
}
@media screen and (max-width: 800px) {
#pixel-art-area .pixel {
width: 0.5rem;
height: 0.5rem;
}
#pixel-art-area, #pixel-art-options {
position: relative;
left: -2rem;
}
#pixel-art-options {
z-index: 9999;
}
#pixel-art-area {
width: calc(33rem - ( 0.325rem * 16) ) !important;
height: calc(33rem - ( 0.325rem * 16) ) !important;
}
#popup-pixel-art pre {
width: calc(100% - 8rem);
}
.pixelart {
top: 7rem;
right: 8rem;
}
#pixel-art-options {
width: calc(100% - 4rem) !important;
margin-left: 1.5rem;
flex-wrap: wrap;
}
.colors {
margin-top: 2rem;
margin-left: 0;
}
.generate-css, .reset, .prebuilt > .current {
font-size: 0.825rem;
}
#popup-pixel-art {
width: 100%;
z-index: 99999;
left: 0;
}
}
.error {
float: left;
margin: 0 0 1rem 0;
padding: 0;
font-size: 0rem;
background: #b52020;
opacity: 0;
font-variation-settings: 'wght' 600;
border-radius: 100px;
transition: all 0.1s ease-out;
}
.error.active {
font-size: 1rem;
opacity: 1;
padding: 0.25rem 1rem;
}
canvas {
width: auto !important;
height: auto !important;
opacity: 0;
position: absolute;
pointer-events: none;
}
let prebuilt = {
mario: [
{ x: 7, y: 0, color: '#500000' },
{ x: 8, y: 0, color: '#500000' },
{ x: 9, y: 0, color: '#500000' },
{ x: 10, y: 0, color: '#500000' },
{ x: 11, y: 0, color: '#500000' },
{ x: 5, y: 1, color: '#500000' },
{ x: 6, y: 1, color: '#500000' },
{ x: 7, y: 1, color: '#f84070' },
{ x: 8, y: 1, color: '#f84070' },
{ x: 9, y: 1, color: '#f8d870' },
{ x: 10, y: 1, color: '#f84070' },
{ x: 11, y: 1, color: '#500000' },
{ x: 12, y: 1, color: '#500000' },
{ x: 4, y: 2, color: '#500000' },
{ x: 5, y: 2, color: '#f84070' },
{ x: 6, y: 2, color: '#f84070' },
{ x: 7, y: 2, color: '#b02860' },
{ x: 8, y: 2, color: '#b02860' },
{ x: 9, y: 2, color: '#d8a038' },
{ x: 10, y: 2, color: '#f8d870' },
{ x: 11, y: 2, color: '#ffffff' },
{ x: 12, y: 2, color: '#500000' },
{ x: 3, y: 3, color: '#500000' },
{ x: 4, y: 3, color: '#b02860' },
{ x: 5, y: 3, color: '#f84070' },
{ x: 6, y: 3, color: '#b02860' },
{ x: 7, y: 3, color: '#b02860' },
{ x: 8, y: 3, color: '#000000' },
{ x: 9, y: 3, color: '#000000' },
{ x: 10, y: 3, color: '#000000' },
{ x: 11, y: 3, color: '#000000' },
{ x: 12, y: 3, color: '#000000' },
{ x: 13, y: 3, color: '#000000' },
{ x: 2, y: 4, color: '#500000' },
{ x: 3, y: 4, color: '#b02860' },
{ x: 4, y: 4, color: '#b02860' },
{ x: 5, y: 4, color: '#b02860' },
{ x: 6, y: 4, color: '#000000' },
{ x: 7, y: 4, color: '#000000' },
{ x: 8, y: 4, color: '#000000' },
{ x: 9, y: 4, color: '#000000' },
{ x: 10, y: 4, color: '#000000' },
{ x: 11, y: 4, color: '#000000' },
{ x: 12, y: 4, color: '#000000' },
{ x: 13, y: 4, color: '#000000' },
{ x: 14, y: 4, color: '#000000' },
{ x: 2, y: 5, color: '#500000' },
{ x: 3, y: 5, color: '#f8d0c0' },
{ x: 4, y: 5, color: '#000000' },
{ x: 5, y: 5, color: '#000000' },
{ x: 6, y: 5, color: '#000000' },
{ x: 7, y: 5, color: '#f87068' },
{ x: 8, y: 5, color: '#000000' },
{ x: 9, y: 5, color: '#f87068' },
{ x: 10, y: 5, color: '#000000' },
{ x: 11, y: 5, color: '#f87068' },
{ x: 1, y: 6, color: '#500000' },
{ x: 2, y: 6, color: '#f8d0c0' },
{ x: 3, y: 6, color: '#885818' },
{ x: 4, y: 6, color: '#f8d0c0' },
{ x: 5, y: 6, color: '#000000' },
{ x: 6, y: 6, color: '#f87068' },
{ x: 7, y: 6, color: '#f8d0c0' },
{ x: 8, y: 6, color: '#000000' },
{ x: 9, y: 6, color: '#f8d0c0' },
{ x: 10, y: 6, color: '#000000' },
{ x: 11, y: 6, color: '#f8d0c0' },
{ x: 12, y: 6, color: '#885818' },
{ x: 13, y: 6, color: '#885818' },
{ x: 1, y: 7, color: '#500000' },
{ x: 2, y: 7, color: '#f87068' },
{ x: 3, y: 7, color: '#885818' },
{ x: 4, y: 7, color: '#f8d0c0' },
{ x: 5, y: 7, color: '#000000' },
{ x: 6, y: 7, color: '#000000' },
{ x: 7, y: 7, color: '#f8d0c0' },
{ x: 8, y: 7, color: '#f8d0c0' },
{ x: 9, y: 7, color: '#f8d0c0' },
{ x: 10, y: 7, color: '#f8d0c0' },
{ x: 11, y: 7, color: '#f8d0c0' },
{ x: 12, y: 7, color: '#f8d0c0' },
{ x: 13, y: 7, color: '#f8d0c0' },
{ x: 14, y: 7, color: '#885818' },
{ x: 1, y: 8, color: '#500000' },
{ x: 2, y: 8, color: '#000000' },
{ x: 3, y: 8, color: '#f87068' },
{ x: 4, y: 8, color: '#f8d0c0' },
{ x: 5, y: 8, color: '#000000' },
{ x: 6, y: 8, color: '#f8d0c0' },
{ x: 7, y: 8, color: '#f8d0c0' },
{ x: 8, y: 8, color: '#000000' },
{ x: 9, y: 8, color: '#f87068' },
{ x: 10, y: 8, color: '#f87068' },
{ x: 11, y: 8, color: '#f87068' },
{ x: 12, y: 8, color: '#f87068' },
{ x: 13, y: 8, color: '#f87068' },
{ x: 14, y: 8, color: '#885818' },
{ x: 2, y: 9, color: '#000000' },
{ x: 3, y: 9, color: '#885818' },
{ x: 4, y: 9, color: '#885818' },
{ x: 5, y: 9, color: '#f87068' },
{ x: 6, y: 9, color: '#f87068' },
{ x: 7, y: 9, color: '#f87068' },
{ x: 8, y: 9, color: '#000000' },
{ x: 9, y: 9, color: '#000000' },
{ x: 10, y: 9, color: '#000000' },
{ x: 11, y: 9, color: '#000000' },
{ x: 12, y: 9, color: '#000000' },
{ x: 13, y: 9, color: '#000000' },
{ x: 3, y: 10, color: '#000000' },
{ x: 4, y: 10, color: '#885818' },
{ x: 5, y: 10, color: '#885818' },
{ x: 6, y: 10, color: '#f87068' },
{ x: 7, y: 10, color: '#f87068' },
{ x: 8, y: 10, color: '#000000' },
{ x: 9, y: 10, color: '#000000' },
{ x: 10, y: 10, color: '#000000' },
{ x: 11, y: 10, color: '#000000' },
{ x: 4, y: 11, color: '#500000' },
{ x: 5, y: 11, color: '#b02860' },
{ x: 6, y: 11, color: '#885818' },
{ x: 7, y: 11, color: '#885818' },
{ x: 8, y: 11, color: '#885818' },
{ x: 9, y: 11, color: '#885818' },
{ x: 10, y: 11, color: '#203088' },
{ x: 3, y: 12, color: '#500000' },
{ x: 4, y: 12, color: '#b02860' },
{ x: 5, y: 12, color: '#b02860' },
{ x: 6, y: 12, color: '#f84070' },
{ x: 7, y: 12, color: '#408098' },
{ x: 8, y: 12, color: '#408098' },
{ x: 9, y: 12, color: '#80d8c8' },
{ x: 10, y: 12, color: '#80d8c8' },
{ x: 11, y: 12, color: '#203088' },
{ x: 3, y: 13, color: '#500000' },
{ x: 4, y: 13, color: '#885818' },
{ x: 5, y: 13, color: '#885818' },
{ x: 6, y: 13, color: '#885818' },
{ x: 7, y: 13, color: '#408098' },
{ x: 8, y: 13, color: '#ffffff' },
{ x: 9, y: 13, color: '#ffffff' },
{ x: 10, y: 13, color: '#80d8c8' },
{ x: 11, y: 13, color: '#ffffff' },
{ x: 12, y: 13, color: '#203088' },
{ x: 3, y: 14, color: '#885818' },
{ x: 4, y: 14, color: '#ffffff' },
{ x: 5, y: 14, color: '#ffffff' },
{ x: 6, y: 14, color: '#ffffff' },
{ x: 7, y: 14, color: '#885818' },
{ x: 8, y: 14, color: '#ffffff' },
{ x: 9, y: 14, color: '#ffffff' },
{ x: 10, y: 14, color: '#80d8c8' },
{ x: 11, y: 14, color: '#ffffff' },
{ x: 12, y: 14, color: '#203088' },
{ x: 3, y: 15, color: '#885818' },
{ x: 4, y: 15, color: '#ffffff' },
{ x: 5, y: 15, color: '#ffffff' },
{ x: 6, y: 15, color: '#885818' },
{ x: 7, y: 15, color: '#408098' },
{ x: 8, y: 15, color: '#408098' },
{ x: 9, y: 15, color: '#203088' },
{ x: 10, y: 15, color: '#408098' },
{ x: 11, y: 15, color: '#203088' },
{ x: 3, y: 16, color: '#885818' },
{ x: 4, y: 16, color: '#ffffff' },
{ x: 5, y: 16, color: '#ffffff' },
{ x: 6, y: 16, color: '#885818' },
{ x: 7, y: 16, color: '#408098' },
{ x: 8, y: 16, color: '#203088' },
{ x: 9, y: 16, color: '#408098' },
{ x: 10, y: 16, color: '#203088' },
{ x: 4, y: 17, color: '#885818' },
{ x: 5, y: 17, color: '#885818' },
{ x: 6, y: 17, color: '#885818' },
{ x: 7, y: 17, color: '#885818' },
{ x: 8, y: 17, color: '#000000' },
{ x: 9, y: 17, color: '#885818' },
{ x: 10, y: 17, color: '#000000' },
{ x: 4, y: 18, color: '#000000' },
{ x: 5, y: 18, color: '#885818' },
{ x: 6, y: 18, color: '#885818' },
{ x: 7, y: 18, color: '#885818' },
{ x: 8, y: 18, color: '#f8d870' },
{ x: 9, y: 18, color: '#000000' },
{ x: 10, y: 18, color: '#f8d870' },
{ x: 11, y: 18, color: '#000000' },
{ x: 4, y: 19, color: '#000000' },
{ x: 5, y: 19, color: '#000000' },
{ x: 6, y: 19, color: '#000000' },
{ x: 7, y: 19, color: '#000000' },
{ x: 8, y: 19, color: '#000000' },
{ x: 9, y: 19, color: '#000000' },
{ x: 10, y: 19, color: '#000000' },
{ x: 11, y: 19, color: '#000000' },
],
babomb: [
{ x: 8, y: 0, color: '#c37200' },
{ x: 4, y: 1, color: '#c77100' },
{ x: 5, y: 1, color: '#c77100' },
{ x: 6, y: 1, color: '#556282' },
{ x: 7, y: 1, color: '#914708' },
{ x: 4, y: 2, color: '#c76e06' },
{ x: 5, y: 2, color: '#fcee43' },
{ x: 6, y: 2, color: '#fcee43' },
{ x: 7, y: 2, color: '#f8c206' },
{ x: 8, y: 2, color: '#d16d00' },
{ x: 5, y: 3, color: '#cc6e00' },
{ x: 6, y: 3, color: '#fbed42' },
{ x: 7, y: 3, color: '#fbed42' },
{ x: 8, y: 3, color: '#fbc106' },
{ x: 9, y: 3, color: '#c47400' },
{ x: 3, y: 4, color: '#924a00' },
{ x: 4, y: 4, color: '#c67100' },
{ x: 5, y: 4, color: '#ffbf01' },
{ x: 6, y: 4, color: '#fbee40' },
{ x: 7, y: 4, color: '#ffc000' },
{ x: 8, y: 4, color: '#9e4203' },
{ x: 9, y: 4, color: '#1b161a' },
{ x: 4, y: 5, color: '#a53f01' },
{ x: 5, y: 5, color: '#cc690b' },
{ x: 6, y: 5, color: '#f6c403' },
{ x: 9, y: 5, color: '#22304b' },
{ x: 7, y: 6, color: '#223148' },
{ x: 8, y: 6, color: '#586084' },
{ x: 9, y: 6, color: '#9fa5bb' },
{ x: 10, y: 6, color: '#9fa5bb' },
{ x: 11, y: 6, color: '#5a5f85' },
{ x: 5, y: 7, color: '#23314c' },
{ x: 6, y: 7, color: '#23314c' },
{ x: 7, y: 7, color: '#5a5f87' },
{ x: 8, y: 7, color: '#a1a6ba' },
{ x: 9, y: 7, color: '#ffffff' },
{ x: 10, y: 7, color: '#ffffff' },
{ x: 11, y: 7, color: '#9fa7ba' },
{ x: 12, y: 7, color: '#5a6084' },
{ x: 4, y: 8, color: '#23314c' },
{ x: 5, y: 8, color: '#23314c' },
{ x: 6, y: 8, color: '#5a5f85' },
{ x: 7, y: 8, color: '#292a2e' },
{ x: 8, y: 8, color: '#414141' },
{ x: 9, y: 8, color: '#414141' },
{ x: 10, y: 8, color: '#414141' },
{ x: 11, y: 8, color: '#2b2b29' },
{ x: 12, y: 8, color: '#5a5f85' },
{ x: 13, y: 8, color: '#5a5f85' },
{ x: 3, y: 9, color: '#23314c' },
{ x: 4, y: 9, color: '#5a5d8a' },
{ x: 5, y: 9, color: '#1c180f' },
{ x: 6, y: 9, color: '#262827' },
{ x: 7, y: 9, color: '#424242' },
{ x: 8, y: 9, color: '#424242' },
{ x: 9, y: 9, color: '#666666' },
{ x: 10, y: 9, color: '#666666' },
{ x: 11, y: 9, color: '#424242' },
{ x: 12, y: 9, color: '#424242' },
{ x: 13, y: 9, color: '#2a2a2a' },
{ x: 3, y: 10, color: '#21314b' },
{ x: 4, y: 10, color: '#171717' },
{ x: 5, y: 10, color: '#2a2a2a' },
{ x: 6, y: 10, color: '#424242' },
{ x: 7, y: 10, color: '#424242' },
{ x: 8, y: 10, color: '#666666' },
{ x: 9, y: 10, color: '#666666' },
{ x: 10, y: 10, color: '#666666' },
{ x: 11, y: 10, color: '#666666' },
{ x: 12, y: 10, color: '#424242' },
{ x: 13, y: 10, color: '#424242' },
{ x: 14, y: 10, color: '#2b2b2b' },
{ x: 3, y: 11, color: '#191919' },
{ x: 4, y: 11, color: '#2a2a2a' },
{ x: 5, y: 11, color: '#2a2a2a' },
{ x: 6, y: 11, color: '#424242' },
{ x: 7, y: 11, color: '#424242' },
{ x: 8, y: 11, color: '#666666' },
{ x: 9, y: 11, color: '#666666' },
{ x: 10, y: 11, color: '#5a5f85' },
{ x: 11, y: 11, color: '#656565' },
{ x: 12, y: 11, color: '#656565' },
{ x: 13, y: 11, color: '#434240' },
{ x: 14, y: 11, color: '#5a5f85' },
{ x: 15, y: 11, color: '#2e2e2e' },
{ x: 3, y: 12, color: '#2a2a2a' },
{ x: 4, y: 12, color: '#2a2a2a' },
{ x: 5, y: 12, color: '#2a2a2a' },
{ x: 6, y: 12, color: '#424242' },
{ x: 7, y: 12, color: '#424242' },
{ x: 8, y: 12, color: '#666666' },
{ x: 9, y: 12, color: '#585d94' },
{ x: 10, y: 12, color: '#ffffff' },
{ x: 11, y: 12, color: '#9fa7ba' },
{ x: 12, y: 12, color: '#696562' },
{ x: 13, y: 12, color: '#586084' },
{ x: 14, y: 12, color: '#ffffff' },
{ x: 15, y: 12, color: '#454641' },
{ x: 2, y: 13, color: '#171717' },
{ x: 3, y: 13, color: '#2a2a2a' },
{ x: 4, y: 13, color: '#2a2a2a' },
{ x: 5, y: 13, color: '#2a2a2a' },
{ x: 6, y: 13, color: '#424242' },
{ x: 7, y: 13, color: '#424242' },
{ x: 8, y: 13, color: '#666666' },
{ x: 9, y: 13, color: '#a1a5c0' },
{ x: 10, y: 13, color: '#ffffff' },
{ x: 11, y: 13, color: '#696468' },
{ x: 12, y: 13, color: '#676566' },
{ x: 13, y: 13, color: '#a0a6bc' },
{ x: 14, y: 13, color: '#ffffff' },
{ x: 15, y: 13, color: '#a0a6bc' },
{ x: 16, y: 13, color: '#171717' },
{ x: 2, y: 14, color: '#171717' },
{ x: 3, y: 14, color: '#171717' },
{ x: 4, y: 14, color: '#2a2a2a' },
{ x: 5, y: 14, color: '#2a2a2a' },
{ x: 6, y: 14, color: '#424242' },
{ x: 7, y: 14, color: '#424242' },
{ x: 8, y: 14, color: '#424242' },
{ x: 9, y: 14, color: '#9fa8b9' },
{ x: 10, y: 14, color: '#ffffff' },
{ x: 11, y: 14, color: '#9fa8b9' },
{ x: 12, y: 14, color: '#656766' },
{ x: 13, y: 14, color: '#9fa8b9' },
{ x: 14, y: 14, color: '#ffffff' },
{ x: 15, y: 14, color: '#9fa8b9' },
{ x: 16, y: 14, color: '#292b2a' },
{ x: 2, y: 15, color: '#171717' },
{ x: 3, y: 15, color: '#171717' },
{ x: 4, y: 15, color: '#2a2a2a' },
{ x: 5, y: 15, color: '#2a2a2a' },
{ x: 6, y: 15, color: '#424242' },
{ x: 7, y: 15, color: '#424242' },
{ x: 8, y: 15, color: '#424242' },
{ x: 9, y: 15, color: '#5a6084' },
{ x: 10, y: 15, color: '#ffffff' },
{ x: 11, y: 15, color: '#5a6084' },
{ x: 12, y: 15, color: '#66675f' },
{ x: 13, y: 15, color: '#586084' },
{ x: 14, y: 15, color: '#ffffff' },
{ x: 15, y: 15, color: '#586084' },
{ x: 16, y: 15, color: '#2a2a2a' },
{ x: 2, y: 16, color: '#171717' },
{ x: 3, y: 16, color: '#171717' },
{ x: 4, y: 16, color: '#171717' },
{ x: 5, y: 16, color: '#2a2a2a' },
{ x: 6, y: 16, color: '#2a2a2a' },
{ x: 7, y: 16, color: '#424242' },
{ x: 8, y: 16, color: '#424242' },
{ x: 9, y: 16, color: '#1e3352' },
{ x: 10, y: 16, color: '#9fa8b9' },
{ x: 11, y: 16, color: '#5a6080' },
{ x: 12, y: 16, color: '#434240' },
{ x: 13, y: 16, color: '#25304c' },
{ x: 14, y: 16, color: '#9fa8b9' },
{ x: 15, y: 16, color: '#595e88' },
{ x: 16, y: 16, color: '#2a2a2a' },
{ x: 2, y: 17, color: '#171717' },
{ x: 3, y: 17, color: '#171717' },
{ x: 4, y: 17, color: '#171717' },
{ x: 5, y: 17, color: '#2a2a2a' },
{ x: 6, y: 17, color: '#2a2a2a' },
{ x: 7, y: 17, color: '#424242' },
{ x: 8, y: 17, color: '#424242' },
{ x: 9, y: 17, color: '#424242' },
{ x: 10, y: 17, color: '#25334e' },
{ x: 11, y: 17, color: '#424242' },
{ x: 12, y: 17, color: '#424242' },
{ x: 13, y: 17, color: '#424242' },
{ x: 14, y: 17, color: '#26304b' },
{ x: 15, y: 17, color: '#2a2a2c' },
{ x: 16, y: 17, color: '#171717' },
{ x: 3, y: 18, color: '#171717' },
{ x: 4, y: 18, color: '#171717' },
{ x: 5, y: 18, color: '#171717' },
{ x: 6, y: 18, color: '#2a2a2a' },
{ x: 7, y: 18, color: '#2a2a2a' },
{ x: 8, y: 18, color: '#414141' },
{ x: 9, y: 18, color: '#414141' },
{ x: 10, y: 18, color: '#414141' },
{ x: 11, y: 18, color: '#414141' },
{ x: 12, y: 18, color: '#2a2a2a' },
{ x: 13, y: 18, color: '#2a2a2a' },
{ x: 14, y: 18, color: '#2a2a2a' },
{ x: 15, y: 18, color: '#171717' },
{ x: 3, y: 19, color: '#cc6c08' },
{ x: 4, y: 19, color: '#f9c300' },
{ x: 5, y: 19, color: '#cc6c08' },
{ x: 6, y: 19, color: '#171717' },
{ x: 7, y: 19, color: '#2b2b2b' },
{ x: 8, y: 19, color: '#2b2b2b' },
{ x: 9, y: 19, color: '#2b2b2b' },
{ x: 10, y: 19, color: '#2b2b2b' },
{ x: 11, y: 19, color: '#2b2b2b' },
{ x: 12, y: 19, color: '#2b2b2b' },
{ x: 13, y: 19, color: '#2b2b2b' },
{ x: 14, y: 19, color: '#171717' },
{ x: 15, y: 19, color: '#171717' },
{ x: 16, y: 19, color: '#c96f00' },
{ x: 2, y: 20, color: '#c67001' },
{ x: 3, y: 20, color: '#ffbb06' },
{ x: 4, y: 20, color: '#fbee40' },
{ x: 5, y: 20, color: '#fbee40' },
{ x: 6, y: 20, color: '#f9c300' },
{ x: 7, y: 20, color: '#d36600' },
{ x: 8, y: 20, color: '#181619' },
{ x: 9, y: 20, color: '#2a2a2a' },
{ x: 10, y: 20, color: '#2a2a2a' },
{ x: 11, y: 20, color: '#2a2a2a' },
{ x: 12, y: 20, color: '#191a1e' },
{ x: 13, y: 20, color: '#191a1e' },
{ x: 14, y: 20, color: '#191a1e' },
{ x: 15, y: 20, color: '#c27300' },
{ x: 16, y: 20, color: '#fcc302' },
{ x: 17, y: 20, color: '#c27300' },
{ x: 1, y: 21, color: '#cc6b0d' },
{ x: 2, y: 21, color: '#fcc200' },
{ x: 3, y: 21, color: '#fcc200' },
{ x: 4, y: 21, color: '#faed46' },
{ x: 5, y: 21, color: '#faed46' },
{ x: 6, y: 21, color: '#faed46' },
{ x: 7, y: 21, color: '#f9c203' },
{ x: 8, y: 21, color: '#c96e05' },
{ x: 9, y: 21, color: '#171717' },
{ x: 10, y: 21, color: '#171717' },
{ x: 11, y: 21, color: '#171717' },
{ x: 12, y: 21, color: '#171717' },
{ x: 13, y: 21, color: '#171717' },
{ x: 14, y: 21, color: '#c67100' },
{ x: 15, y: 21, color: '#f9c206' },
{ x: 16, y: 21, color: '#f9c206' },
{ x: 17, y: 21, color: '#ffef47' },
{ x: 18, y: 21, color: '#fbc201' },
{ x: 1, y: 22, color: '#98460a' },
{ x: 2, y: 22, color: '#c96f00' },
{ x: 3, y: 22, color: '#fbc200' },
{ x: 4, y: 22, color: '#fbc200' },
{ x: 5, y: 22, color: '#fded40' },
{ x: 6, y: 22, color: '#fded40' },
{ x: 7, y: 22, color: '#fbc106' },
{ x: 8, y: 22, color: '#fbc106' },
{ x: 9, y: 22, color: '#171717' },
{ x: 10, y: 22, color: '#171717' },
{ x: 11, y: 22, color: '#171717' },
{ x: 12, y: 22, color: '#8f470d' },
{ x: 13, y: 22, color: '#fbc200' },
{ x: 14, y: 22, color: '#fbc200' },
{ x: 15, y: 22, color: '#fbc200' },
{ x: 16, y: 22, color: '#fded42' },
{ x: 17, y: 22, color: '#fded42' },
{ x: 18, y: 22, color: '#fcc101' },
{ x: 2, y: 23, color: '#924801' },
{ x: 3, y: 23, color: '#c96f00' },
{ x: 4, y: 23, color: '#c96f00' },
{ x: 5, y: 23, color: '#c96f00' },
{ x: 6, y: 23, color: '#c96f00' },
{ x: 7, y: 23, color: '#924801' },
{ x: 11, y: 23, color: '#924801' },
{ x: 12, y: 23, color: '#c86e00' },
{ x: 13, y: 23, color: '#c86e00' },
{ x: 14, y: 23, color: '#914700' },
{ x: 15, y: 23, color: '#fbc201' },
{ x: 16, y: 23, color: '#fbc201' },
{ x: 17, y: 23, color: '#fbc201' }
],
yoshi: [
{ x: 13, y: 0, color: '#2c2b2c' },
{ x: 14, y: 0, color: '#2c2b2c' },
{ x: 16, y: 0, color: '#2c2b2c' },
{ x: 17, y: 0, color: '#2c2b2c' },
{ x: 12, y: 1, color: '#2c2b2c' },
{ x: 13, y: 1, color: '#26b300' },
{ x: 14, y: 1, color: '#10ff1c' },
{ x: 15, y: 1, color: '#2c2b2c' },
{ x: 16, y: 1, color: '#26b300' },
{ x: 17, y: 1, color: '#10ff1c' },
{ x: 18, y: 1, color: '#2c2b2c' },
{ x: 11, y: 2, color: '#2c2b2c' },
{ x: 12, y: 2, color: '#016f00' },
{ x: 13, y: 2, color: '#26b300' },
{ x: 14, y: 2, color: '#fefcfc' },
{ x: 15, y: 2, color: '#fefcfc' },
{ x: 16, y: 2, color: '#fefcfc' },
{ x: 17, y: 2, color: '#fefcfc' },
{ x: 18, y: 2, color: '#10ff1c' },
{ x: 19, y: 2, color: '#2c2b2c' },
{ x: 8, y: 3, color: '#2c2b2c' },
{ x: 9, y: 3, color: '#2c2b2c' },
{ x: 10, y: 3, color: '#2c2b2c' },
{ x: 11, y: 3, color: '#2c2b2c' },
{ x: 12, y: 3, color: '#016f00' },
{ x: 13, y: 3, color: '#fefcfc' },
{ x: 14, y: 3, color: '#fefcfc' },
{ x: 15, y: 3, color: '#2c2b2c' },
{ x: 16, y: 3, color: '#fefcfc' },
{ x: 17, y: 3, color: '#2c2b2c' },
{ x: 18, y: 3, color: '#fefcfc' },
{ x: 19, y: 3, color: '#2c2b2c' },
{ x: 7, y: 4, color: '#2c2b2c' },
{ x: 8, y: 4, color: '#fe3217' },
{ x: 9, y: 4, color: '#ff7e14' },
{ x: 10, y: 4, color: '#ff7e14' },
{ x: 11, y: 4, color: '#2c2b2c' },
{ x: 12, y: 4, color: '#fefcfc' },
{ x: 13, y: 4, color: '#fefcfc' },
{ x: 14, y: 4, color: '#fefcfc' },
{ x: 15, y: 4, color: '#2c2b2c' },
{ x: 16, y: 4, color: '#fefcfc' },
{ x: 17, y: 4, color: '#2c2b2c' },
{ x: 18, y: 4, color: '#fefcfc' },
{ x: 19, y: 4, color: '#2c2b2c' },
{ x: 7, y: 5, color: '#2c2b2c' },
{ x: 8, y: 5, color: '#9c1d00' },
{ x: 9, y: 5, color: '#fe3217' },
{ x: 10, y: 5, color: '#2c2b2c' },
{ x: 11, y: 5, color: '#2c2b2c' },
{ x: 12, y: 5, color: '#fefcfc' },
{ x: 13, y: 5, color: '#fefcfc' },
{ x: 14, y: 5, color: '#fefcfc' },
{ x: 15, y: 5, color: '#fefcfc' },
{ x: 16, y: 5, color: '#fefcfc' },
{ x: 17, y: 5, color: '#fefcfc' },
{ x: 18, y: 5, color: '#fefcfc' },
{ x: 19, y: 5, color: '#2c2b2c' },
{ x: 20, y: 5, color: '#2c2b2c' },
{ x: 21, y: 5, color: '#2c2b2c' },
{ x: 7, y: 6, color: '#2c2b2c' },
{ x: 8, y: 6, color: '#2c2b2c' },
{ x: 9, y: 6, color: '#2c2b2c' },
{ x: 10, y: 6, color: '#10ff1c' },
{ x: 11, y: 6, color: '#10ff1c' },
{ x: 12, y: 6, color: '#016f00' },
{ x: 13, y: 6, color: '#fefcfc' },
{ x: 14, y: 6, color: '#fefcfc' },
{ x: 15, y: 6, color: '#fefcfc' },
{ x: 16, y: 6, color: '#016f00' },
{ x: 17, y: 6, color: '#fefcfc' },
{ x: 18, y: 6, color: '#2c2b2c' },
{ x: 19, y: 6, color: '#10ff1c' },
{ x: 20, y: 6, color: '#10ff1c' },
{ x: 21, y: 6, color: '#10ff1c' },
{ x: 22, y: 6, color: '#2c2b2c' },
{ x: 6, y: 7, color: '#2c2b2c' },
{ x: 7, y: 7, color: '#ff7e14' },
{ x: 8, y: 7, color: '#2c2b2c' },
{ x: 9, y: 7, color: '#26b300' },
{ x: 10, y: 7, color: '#10ff1c' },
{ x: 11, y: 7, color: '#fefcfc' },
{ x: 12, y: 7, color: '#10ff1c' },
{ x: 13, y: 7, color: '#016f00' },
{ x: 14, y: 7, color: '#016f00' },
{ x: 15, y: 7, color: '#016f00' },
{ x: 16, y: 7, color: '#10ff1c' },
{ x: 17, y: 7, color: '#016f00' },
{ x: 18, y: 7, color: '#10ff1c' },
{ x: 19, y: 7, color: '#10ff1c' },
{ x: 20, y: 7, color: '#fefcfc' },
{ x: 21, y: 7, color: '#fefcfc' },
{ x: 22, y: 7, color: '#10ff1c' },
{ x: 23, y: 7, color: '#2c2b2c' },
{ x: 5, y: 8, color: '#2c2b2c' },
{ x: 6, y: 8, color: '#9c1d00' },
{ x: 7, y: 8, color: '#9c1d00' },
{ x: 8, y: 8, color: '#2c2b2c' },
{ x: 9, y: 8, color: '#016f00' },
{ x: 10, y: 8, color: '#26b300' },
{ x: 11, y: 8, color: '#fefcfc' },
{ x: 12, y: 8, color: '#fefcfc' },
{ x: 13, y: 8, color: '#fefcfc' },
{ x: 14, y: 8, color: '#10ff1c' },
{ x: 15, y: 8, color: '#26b300' },
{ x: 16, y: 8, color: '#10ff1c' },
{ x: 17, y: 8, color: '#10ff1c' },
{ x: 18, y: 8, color: '#10ff1c' },
{ x: 19, y: 8, color: '#2c2b2c' },
{ x: 20, y: 8, color: '#fefcfc' },
{ x: 21, y: 8, color: '#2c2b2c' },
{ x: 22, y: 8, color: '#10ff1c' },
{ x: 23, y: 8, color: '#2c2b2c' },
{ x: 5, y: 9, color: '#2c2b2c' },
{ x: 6, y: 9, color: '#9c1d00' },
{ x: 7, y: 9, color: '#9c1d00' },
{ x: 8, y: 9, color: '#2c2b2c' },
{ x: 9, y: 9, color: '#016f00' },
{ x: 10, y: 9, color: '#26b300' },
{ x: 11, y: 9, color: '#fefcfc' },
{ x: 12, y: 9, color: '#fefcfc' },
{ x: 13, y: 9, color: '#fefcfc' },
{ x: 14, y: 9, color: '#fefcfc' },
{ x: 15, y: 9, color: '#2c2b2c' },
{ x: 16, y: 9, color: '#26b300' },
{ x: 17, y: 9, color: '#26b300' },
{ x: 18, y: 9, color: '#10ff1c' },
{ x: 19, y: 9, color: '#10ff1c' },
{ x: 20, y: 9, color: '#10ff1c' },
{ x: 21, y: 9, color: '#10ff1c' },
{ x: 22, y: 9, color: '#10ff1c' },
{ x: 23, y: 9, color: '#2c2b2c' },
{ x: 6, y: 10, color: '#2c2b2c' },
{ x: 7, y: 10, color: '#2c2b2c' },
{ x: 8, y: 10, color: '#2c2b2c' },
{ x: 9, y: 10, color: '#016f00' },
{ x: 10, y: 10, color: '#26b300' },
{ x: 11, y: 10, color: '#fefcfc' },
{ x: 12, y: 10, color: '#fefcfc' },
{ x: 13, y: 10, color: '#fefcfc' },
{ x: 14, y: 10, color: '#fefcfc' },
{ x: 15, y: 10, color: '#2c2b2c' },
{ x: 16, y: 10, color: '#26b300' },
{ x: 17, y: 10, color: '#26b300' },
{ x: 18, y: 10, color: '#10ff1c' },
{ x: 19, y: 10, color: '#10ff1c' },
{ x: 20, y: 10, color: '#10ff1c' },
{ x: 21, y: 10, color: '#10ff1c' },
{ x: 22, y: 10, color: '#10ff1c' },
{ x: 23, y: 10, color: '#2c2b2c' },
{ x: 7, y: 11, color: '#2c2b2c' },
{ x: 8, y: 11, color: '#fe3217' },
{ x: 9, y: 11, color: '#2c2b2c' },
{ x: 10, y: 11, color: '#016f00' },
{ x: 11, y: 11, color: '#016f00' },
{ x: 12, y: 11, color: '#ffba93' },
{ x: 13, y: 11, color: '#ffba93' },
{ x: 14, y: 11, color: '#2c2b2c' },
{ x: 15, y: 11, color: '#2c2b2c' },
{ x: 16, y: 11, color: '#016f00' },
{ x: 17, y: 11, color: '#016f00' },
{ x: 18, y: 11, color: '#26b300' },
{ x: 19, y: 11, color: '#26b300' },
{ x: 20, y: 11, color: '#26b300' },
{ x: 21, y: 11, color: '#26b300' },
{ x: 22, y: 11, color: '#26b300' },
{ x: 23, y: 11, color: '#2c2b2c' },
{ x: 8, y: 12, color: '#2c2b2c' },
{ x: 9, y: 12, color: '#2c2b2c' },
{ x: 10, y: 12, color: '#2c2b2c' },
{ x: 11, y: 12, color: '#016f00' },
{ x: 12, y: 12, color: '#016f00' },
{ x: 13, y: 12, color: '#ffba93' },
{ x: 14, y: 12, color: '#ffba93' },
{ x: 15, y: 12, color: '#2c2b2c' },
{ x: 16, y: 12, color: '#016f00' },
{ x: 17, y: 12, color: '#016f00' },
{ x: 18, y: 12, color: '#016f00' },
{ x: 19, y: 12, color: '#016f00' },
{ x: 20, y: 12, color: '#26b300' },
{ x: 21, y: 12, color: '#26b300' },
{ x: 22, y: 12, color: '#2c2b2c' },
{ x: 8, y: 13, color: '#2c2b2c' },
{ x: 9, y: 13, color: '#fe3217' },
{ x: 10, y: 13, color: '#2c2b2c' },
{ x: 11, y: 13, color: '#016f00' },
{ x: 12, y: 13, color: '#26b300' },
{ x: 13, y: 13, color: '#ffa5aa' },
{ x: 14, y: 13, color: '#ffa5aa' },
{ x: 15, y: 13, color: '#fefcfc' },
{ x: 16, y: 13, color: '#2c2b2c' },
{ x: 17, y: 13, color: '#016f00' },
{ x: 18, y: 13, color: '#016f00' },
{ x: 19, y: 13, color: '#016f00' },
{ x: 20, y: 13, color: '#2c2b2c' },
{ x: 21, y: 13, color: '#2c2b2c' },
{ x: 5, y: 14, color: '#2c2b2c' },
{ x: 6, y: 14, color: '#2c2b2c' },
{ x: 7, y: 14, color: '#2c2b2c' },
{ x: 8, y: 14, color: '#2c2b2c' },
{ x: 9, y: 14, color: '#2c2b2c' },
{ x: 10, y: 14, color: '#016f00' },
{ x: 11, y: 14, color: '#26b300' },
{ x: 12, y: 14, color: '#26b300' },
{ x: 13, y: 14, color: '#ffa5aa' },
{ x: 14, y: 14, color: '#ffa5aa' },
{ x: 15, y: 14, color: '#2c2b2c' },
{ x: 16, y: 14, color: '#2c2b2c' },
{ x: 17, y: 14, color: '#2c2b2c' },
{ x: 18, y: 14, color: '#2c2b2c' },
{ x: 19, y: 14, color: '#2c2b2c' },
{ x: 4, y: 15, color: '#2c2b2c' },
{ x: 5, y: 15, color: '#ff7e14' },
{ x: 6, y: 15, color: '#fefcfc' },
{ x: 7, y: 15, color: '#2c2b2c' },
{ x: 8, y: 15, color: '#2c2b2c' },
{ x: 9, y: 15, color: '#2c2b2c' },
{ x: 10, y: 15, color: '#016f00' },
{ x: 11, y: 15, color: '#26b300' },
{ x: 12, y: 15, color: '#fefcfc' },
{ x: 13, y: 15, color: '#fefcfc' },
{ x: 14, y: 15, color: '#fefcfc' },
{ x: 15, y: 15, color: '#2c2b2c' },
{ x: 16, y: 15, color: '#2c2b2c' },
{ x: 2, y: 16, color: '#2c2b2c' },
{ x: 3, y: 16, color: '#2c2b2c' },
{ x: 4, y: 16, color: '#ff7e14' },
{ x: 5, y: 16, color: '#ff7e14' },
{ x: 6, y: 16, color: '#2c2b2c' },
{ x: 7, y: 16, color: '#2c2b2c' },
{ x: 8, y: 16, color: '#10ff1c' },
{ x: 9, y: 16, color: '#10ff1c' },
{ x: 10, y: 16, color: '#10ff1c' },
{ x: 11, y: 16, color: '#10ff1c' },
{ x: 12, y: 16, color: '#fefcfc' },
{ x: 13, y: 16, color: '#fefcfc' },
{ x: 14, y: 16, color: '#fefcfc' },
{ x: 15, y: 16, color: '#2c2b2c' },
{ x: 16, y: 16, color: '#fefcfc' },
{ x: 17, y: 16, color: '#2c2b2c' },
{ x: 0, y: 17, color: '#2c2b2c' },
{ x: 1, y: 17, color: '#2c2b2c' },
{ x: 2, y: 17, color: '#2c2b2c' },
{ x: 3, y: 17, color: '#fefcfc' },
{ x: 4, y: 17, color: '#2c2b2c' },
{ x: 5, y: 17, color: '#2c2b2c' },
{ x: 6, y: 17, color: '#26b300' },
{ x: 7, y: 17, color: '#26b300' },
{ x: 8, y: 17, color: '#10ff1c' },
{ x: 9, y: 17, color: '#10ff1c' },
{ x: 10, y: 17, color: '#2c2b2c' },
{ x: 11, y: 17, color: '#fefcfc' },
{ x: 12, y: 17, color: '#fefcfc' },
{ x: 13, y: 17, color: '#fefcfc' },
{ x: 14, y: 17, color: '#2c2b2c' },
{ x: 15, y: 17, color: '#2c2b2c' },
{ x: 16, y: 17, color: '#fefcfc' },
{ x: 17, y: 17, color: '#10ff1c' },
{ x: 18, y: 17, color: '#2c2b2c' },
{ x: 0, y: 18, color: '#2c2b2c' },
{ x: 1, y: 18, color: '#10ff1c' },
{ x: 2, y: 18, color: '#26b300' },
{ x: 3, y: 18, color: '#2c2b2c' },
{ x: 4, y: 18, color: '#2c2b2c' },
{ x: 5, y: 18, color: '#10ff1c' },
{ x: 6, y: 18, color: '#10ff1c' },
{ x: 7, y: 18, color: '#10ff1c' },
{ x: 8, y: 18, color: '#10ff1c' },
{ x: 9, y: 18, color: '#2c2b2c' },
{ x: 10, y: 18, color: '#fefcfc' },
{ x: 11, y: 18, color: '#fefcfc' },
{ x: 12, y: 18, color: '#fefcfc' },
{ x: 13, y: 18, color: '#2c2b2c' },
{ x: 14, y: 18, color: '#2c2b2c' },
{ x: 15, y: 18, color: '#10ff1c' },
{ x: 16, y: 18, color: '#10ff1c' },
{ x: 17, y: 18, color: '#10ff1c' },
{ x: 18, y: 18, color: '#2c2b2c' },
{ x: 0, y: 19, color: '#2c2b2c' },
{ x: 1, y: 19, color: '#fefcfc' },
{ x: 2, y: 19, color: '#016f00' },
{ x: 3, y: 19, color: '#2c2b2c' },
{ x: 4, y: 19, color: '#10ff1c' },
{ x: 5, y: 19, color: '#10ff1c' },
{ x: 6, y: 19, color: '#10ff1c' },
{ x: 7, y: 19, color: '#10ff1c' },
{ x: 8, y: 19, color: '#fefcfc' },
{ x: 9, y: 19, color: '#fefcfc' },
{ x: 10, y: 19, color: '#2c2b2c' },
{ x: 11, y: 19, color: '#fefcfc' },
{ x: 12, y: 19, color: '#fefcfc' },
{ x: 13, y: 19, color: '#fefcfc' },
{ x: 14, y: 19, color: '#2c2b2c' },
{ x: 15, y: 19, color: '#2c2b2c' },
{ x: 16, y: 19, color: '#10ff1c' },
{ x: 17, y: 19, color: '#10ff1c' },
{ x: 18, y: 19, color: '#2c2b2c' },
{ x: 0, y: 20, color: '#2c2b2c' },
{ x: 1, y: 20, color: '#fefcfc' },
{ x: 2, y: 20, color: '#fefcfc' },
{ x: 3, y: 20, color: '#2c2b2c' },
{ x: 4, y: 20, color: '#26b300' },
{ x: 5, y: 20, color: '#10ff1c' },
{ x: 6, y: 20, color: '#10ff1c' },
{ x: 7, y: 20, color: '#fefcfc' },
{ x: 8, y: 20, color: '#fefcfc' },
{ x: 9, y: 20, color: '#2c2b2c' },
{ x: 10, y: 20, color: '#2c2b2c' },
{ x: 11, y: 20, color: '#fefcfc' },
{ x: 12, y: 20, color: '#fefcfc' },
{ x: 13, y: 20, color: '#fefcfc' },
{ x: 14, y: 20, color: '#2c2b2c' },
{ x: 15, y: 20, color: '#2c2b2c' },
{ x: 16, y: 20, color: '#10ff1c' },
{ x: 17, y: 20, color: '#10ff1c' },
{ x: 18, y: 20, color: '#2c2b2c' },
{ x: 1, y: 21, color: '#2c2b2c' },
{ x: 2, y: 21, color: '#fed1ad' },
{ x: 3, y: 21, color: '#2c2b2c' },
{ x: 4, y: 21, color: '#016f00' },
{ x: 5, y: 21, color: '#26b300' },
{ x: 6, y: 21, color: '#10ff1c' },
{ x: 7, y: 21, color: '#10ff1c' },
{ x: 8, y: 21, color: '#10ff1c' },
{ x: 9, y: 21, color: '#10ff1c' },
{ x: 10, y: 21, color: '#10ff1c' },
{ x: 11, y: 21, color: '#2c2b2c' },
{ x: 12, y: 21, color: '#fefcfc' },
{ x: 13, y: 21, color: '#fefcfc' },
{ x: 14, y: 21, color: '#fefcfc' },
{ x: 15, y: 21, color: '#2c2b2c' },
{ x: 16, y: 21, color: '#10ff1c' },
{ x: 17, y: 21, color: '#2c2b2c' },
{ x: 1, y: 22, color: '#2c2b2c' },
{ x: 2, y: 22, color: '#fed1ad' },
{ x: 3, y: 22, color: '#fefcfc' },
{ x: 4, y: 22, color: '#2c2b2c' },
{ x: 5, y: 22, color: '#016f00' },
{ x: 6, y: 22, color: '#26b300' },
{ x: 7, y: 22, color: '#26b300' },
{ x: 8, y: 22, color: '#26b300' },
{ x: 9, y: 22, color: '#2c2b2c' },
{ x: 10, y: 22, color: '#fefcfc' },
{ x: 11, y: 22, color: '#fefcfc' },
{ x: 12, y: 22, color: '#fed1ad' },
{ x: 13, y: 22, color: '#2c2b2c' },
{ x: 14, y: 22, color: '#2c2b2c' },
{ x: 15, y: 22, color: '#2c2b2c' },
{ x: 16, y: 22, color: '#2c2b2c' },
{ x: 17, y: 22, color: '#2c2b2c' },
{ x: 2, y: 23, color: '#2c2b2c' },
{ x: 3, y: 23, color: '#2c2b2c' },
{ x: 4, y: 23, color: '#2c2b2c' },
{ x: 5, y: 23, color: '#2c2b2c' },
{ x: 6, y: 23, color: '#2c2b2c' },
{ x: 7, y: 23, color: '#2c2b2c' },
{ x: 8, y: 23, color: '#2c2b2c' },
{ x: 9, y: 23, color: '#2c2b2c' },
{ x: 10, y: 23, color: '#fed1ad' },
{ x: 11, y: 23, color: '#fed1ad' },
{ x: 12, y: 23, color: '#fed1ad' },
{ x: 13, y: 23, color: '#ffba93' },
{ x: 14, y: 23, color: '#2c2b2c' },
{ x: 2, y: 24, color: '#2c2b2c' },
{ x: 3, y: 24, color: '#a33000' },
{ x: 4, y: 24, color: '#f65300' },
{ x: 5, y: 24, color: '#f99200' },
{ x: 6, y: 24, color: '#f99200' },
{ x: 7, y: 24, color: '#2c2b2c' },
{ x: 8, y: 24, color: '#ffba93' },
{ x: 9, y: 24, color: '#ffba93' },
{ x: 10, y: 24, color: '#2c2b2c' },
{ x: 11, y: 24, color: '#2c2b2c' },
{ x: 12, y: 24, color: '#2c2b2c' },
{ x: 2, y: 25, color: '#2c2b2c' },
{ x: 3, y: 25, color: '#a33000' },
{ x: 4, y: 25, color: '#f65300' },
{ x: 5, y: 25, color: '#f99200' },
{ x: 6, y: 25, color: '#f99200' },
{ x: 7, y: 25, color: '#2c2b2c' },
{ x: 8, y: 25, color: '#2c2b2c' },
{ x: 9, y: 25, color: '#2c2b2c' },
{ x: 10, y: 25, color: '#f99200' },
{ x: 11, y: 25, color: '#2c2b2c' },
{ x: 12, y: 25, color: '#2c2b2c' },
{ x: 13, y: 25, color: '#2c2b2c' },
{ x: 1, y: 26, color: '#2c2b2c' },
{ x: 2, y: 26, color: '#a33000' },
{ x: 3, y: 26, color: '#a33000' },
{ x: 4, y: 26, color: '#a33000' },
{ x: 5, y: 26, color: '#f65300' },
{ x: 6, y: 26, color: '#fefcfc' },
{ x: 7, y: 26, color: '#f99200' },
{ x: 8, y: 26, color: '#2c2b2c' },
{ x: 9, y: 26, color: '#a33000' },
{ x: 10, y: 26, color: '#f65300' },
{ x: 11, y: 26, color: '#f99200' },
{ x: 12, y: 26, color: '#f99200' },
{ x: 13, y: 26, color: '#fefcfc' },
{ x: 14, y: 26, color: '#2c2b2c' },
{ x: 1, y: 27, color: '#2c2b2c' },
{ x: 2, y: 27, color: '#a33000' },
{ x: 3, y: 27, color: '#a33000' },
{ x: 4, y: 27, color: '#f65300' },
{ x: 5, y: 27, color: '#f99200' },
{ x: 6, y: 27, color: '#f99200' },
{ x: 7, y: 27, color: '#f99200' },
{ x: 8, y: 27, color: '#2c2b2c' },
{ x: 9, y: 27, color: '#a33000' },
{ x: 10, y: 27, color: '#a33000' },
{ x: 11, y: 27, color: '#f65300' },
{ x: 12, y: 27, color: '#f65300' },
{ x: 13, y: 27, color: '#f99200' },
{ x: 14, y: 27, color: '#2c2b2c' },
{ x: 1, y: 28, color: '#2c2b2c' },
{ x: 2, y: 28, color: '#2c2b2c' },
{ x: 3, y: 28, color: '#2c2b2c' },
{ x: 4, y: 28, color: '#2c2b2c' },
{ x: 5, y: 28, color: '#2c2b2c' },
{ x: 6, y: 28, color: '#2c2b2c' },
{ x: 7, y: 28, color: '#2c2b2c' },
{ x: 8, y: 28, color: '#2c2b2c' },
{ x: 9, y: 28, color: '#2c2b2c' },
{ x: 10, y: 28, color: '#2c2b2c' },
{ x: 11, y: 28, color: '#2c2b2c' },
{ x: 12, y: 28, color: '#2c2b2c' },
{ x: 13, y: 28, color: '#2c2b2c' },
{ x: 14, y: 28, color: '#2c2b2c' }
],
}
let config = {
width: 40,
height: 40,
color: 'white',
drawing: true,
eraser: false
}
let events = {
mousedown: false
}
document.querySelector('.select-file').addEventListener('click', function(e) {
this.value = null;
})
document.querySelector('.select-file').addEventListener('change', function(e) {
let files = e.target.files;
let f = files[0];
let reader = new FileReader();
document.querySelector('.error').classList.remove('active');
reader.onload = (async function(file) {
if(file.type == "image/png" || file.type == "image/jpg" || file.type == "image/gif" || file.type == "image/jpeg") {
// Continue
const bitmap = await createImageBitmap(file);
const canvas = document.querySelector("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, 9999, 9999);
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
let constructPixelData = []
for(let i = 0; i < config.width; ++i) {
for(let j = 0; j < config.height; ++j) {
let pixelData = canvas.getContext('2d').getImageData(i, j, 1, 1).data;
if(pixelData[3] !== 0) {
constructPixelData.push({ x: i, y: j, color: `rgb(${pixelData[0]} ${pixelData[1]} ${pixelData[2]})`});
}
}
}
constructPixelData.forEach(function(i) {
let getPixel = document.querySelector(`.pixel[data-x-coordinate="${i.x}"][data-y-coordinate="${i.y}"]`);
if(getPixel !== null) {
getPixel.setAttribute('data-color', i.color);
getPixel.style.background = i.color;
}
});
}
else {
document.querySelector('.error').textContent = 'Please select a png, jpg or gif file to upload.';
document.querySelector('.error').classList.add('active');
}
})(f);
});
document.getElementById('pixel-art-area').style.width = `calc(${(0.825 * config.width)}rem + ${(config.height * 3)}px)`;
document.getElementById('pixel-art-area').style.height = `calc(${(0.825 * config.height)}rem + ${(config.width * 3)}px)`;
document.getElementById('pixel-art-options').style.width = `calc(${(0.825 * config.width)}rem + ${(config.height * 3)}px)`;
for(let i = 0; i < config.width; ++i) {
for(let j = 0; j < config.height; ++j) {
let createEl = document.createElement('div');
createEl.classList.add('pixel');
createEl.setAttribute('data-x-coordinate', j);
createEl.setAttribute('data-y-coordinate', i);
document.getElementById('pixel-art-area').appendChild(createEl);
}
}
document.querySelectorAll('.pixel').forEach(function(item) {
item.addEventListener('pointerdown', function(e) {
if(config.eraser === true) {
item.setAttribute('data-color', null);
item.style.background = `#191f2b`;
} else {
item.setAttribute('data-color', config.color);
item.style.background = `${config.color}`;
}
events.mousedown = true;
});
});
document.getElementById('pixel-art-area').addEventListener('pointermove', function(e) {
if(config.drawing === true && events.mousedown === true || config.eraser === true && events.mousedown === true) {
if(e.target.matches('.pixel')) {
if(config.eraser === true) {
e.target.setAttribute('data-color', null);
e.target.style.background = `#191f2b`;
} else {
e.target.setAttribute('data-color', config.color);
e.target.style.background = `${config.color}`;
}
}
}
});
document.body.addEventListener('pointerup', function(e) {
events.mousedown = false;
});
[ 'click', 'input' ].forEach(function(item) {
document.querySelector('.color-picker').addEventListener(item, function() {
document.querySelector('.error').classList.remove('active');
config.color = this.value;
document.querySelectorAll('.colors > div').forEach(function(i) {
i.classList.remove('current');
});
this.classList.add('current');
config.eraser = false;
document.querySelector('.eraser-container').classList.remove('current');
});
});
document.querySelectorAll('.colors > div').forEach(function(item) {
document.querySelector('.error').classList.remove('active');
if(item.classList.contains('select-color')) {
return false;
}
else {
item.addEventListener('click', function(e) {
document.querySelector('.color-picker').classList.remove('current');
document.querySelectorAll('.colors > div').forEach(function(i) {
i.classList.remove('current');
})
item.classList.add('current');
config.eraser = false;
config.color = `${item.getAttribute('data-color')}`;
document.querySelector('.eraser-container').classList.remove('current');
})
}
});
document.querySelector('.reset').addEventListener('click', function(e) {
document.querySelector('.error').classList.remove('active');
document.querySelectorAll('.pixel').forEach(function(item) {
item.setAttribute('data-color', null)
item.style.background = '#191f2b';
});
});
document.querySelector('.prebuilt .prebuilt').addEventListener('click', function(e) {
document.querySelector('.error').classList.remove('active');
if(document.querySelector('.prebuilt .options').classList.contains('active')) {
document.querySelector('.prebuilt .options').classList.remove('active');
} else {
document.querySelector('.prebuilt .options').classList.add('active');
}
});
document.body.addEventListener('click', function(e) {
document.querySelector('.error').classList.remove('active');
if(!e.target.matches('.prebuilt.current')) {
document.querySelector('.prebuilt .options').classList.remove('active');
}
})
document.querySelectorAll('.options > .prebuilt').forEach(function(item) {
document.querySelector('.error').classList.remove('active');
item.addEventListener('pointerdown', function(e) {
let getPrebuilt = item.getAttribute('data-prebuilt');
document.querySelectorAll('.pixel').forEach(function(item) {
item.setAttribute('data-color', null)
item.style.background = '#191f2b';
});
if(typeof prebuilt[`${getPrebuilt}`] !== "undefined") {
prebuilt[`${getPrebuilt}`].forEach(function(i) {
let getPixel = document.querySelector(`.pixel[data-x-coordinate="${i.x}"][data-y-coordinate="${i.y}"]`);
if(getPixel !== null) {
getPixel.setAttribute('data-color', i.color);
getPixel.style.background = i.color;
}
});
}
});
});
document.querySelector('.eraser').addEventListener('click', function(e) {
document.querySelector('.error').classList.remove('active');
document.querySelectorAll('.colors > div').forEach(function(i) {
i.classList.remove('current');
});
document.querySelector('.color-picker').classList.remove('current');
if(this.classList.contains('current')) {
this.parentElement.classList.remove('current');
document.querySelector('.color > div').classList.add('current');
config.color = 'white';
config.eraser = false;
} else {
this.parentElement.classList.add('current');
config.eraser = true;
}
});
document.querySelector('.generate-css').addEventListener('click', function(e) {
document.querySelector('.error').classList.remove('active');
document.getElementById('popup-pixel-art').innerHTML = `
<h2>Pixel Art Code</h2>
<p>Copy the code below to use this on your webpage</p>
<div class="close"><i class="fal fa-times"></i></div>`;
let boxShadow =
`.pixelart {
width: 1px;
height: 1px;
transform: scale(5);
background: transparent;
box-shadow: `;
document.querySelectorAll('.pixel').forEach(function(item) {
if(item.getAttribute('data-color') !== "null" && item.getAttribute('data-color') !== null) {
let x = item.getAttribute('data-x-coordinate');
let y = item.getAttribute('data-y-coordinate');
let color = item.getAttribute('data-color');
boxShadow += `${x}px ${y}px ${color}, `
}
});
boxShadow = boxShadow.slice(0, -2);
boxShadow = `${boxShadow};
}`
let boxShadowCode =
`
<<span class="token tag">div</span> <span class="token attr-name">class</span>="<span class="token attr-value">pixelart</span>"></<span class="token attr-name">div</span>>
<<span class="token tag">style</span> <span class="token attr-name">type</span>="<span class="token attr-value">text/css</span>">
<span class="token selector">.pixelart</span> {
<span class="token property">width</span>: <span class="token number">1</span>px;
<span class="token property">height</span>: <span class="token number">1</span>px;
<span class="token property">transform</span>: scale(<span class="token number">20</span>);
<span class="token property">background</span>: transparent;
<span class="token property">box-shadow</span>: `;
document.querySelectorAll('.pixel').forEach(function(item) {
if(item.getAttribute('data-color') !== "null" && item.getAttribute('data-color') !== null) {
let x = item.getAttribute('data-x-coordinate');
let y = item.getAttribute('data-y-coordinate');
let color = item.getAttribute('data-color');
boxShadowCode += `<span class="token number">${x}</span><span class="token unit">px</span> <span class="token number">${y}</span><span class="token unit">px</span> ${color}, `
}
});
boxShadowCode = boxShadowCode.slice(0, -2);
boxShadowCode = `${boxShadowCode};
}
</<span class="token tag">style</span>>`
let newStyle = document.createElement('style');
newStyle.innerHTML = boxShadow;
document.body.append(newStyle);
let newPixelArt = document.createElement('div');
newPixelArt.classList.add('pixelart');
document.getElementById('popup-pixel-art').append(newPixelArt);
let newCodeBlock = document.createElement('pre');
newCodeBlock.innerHTML = `<code>${boxShadowCode}</code>`;
document.getElementById('popup-pixel-art').append(newCodeBlock);
document.getElementById('popup-pixel-art').classList.add('active');
});
document.body.addEventListener('click', function(e) {
if(!parent(e.target, '#popup-pixel-art', 1).matches('#popup-pixel-art') && !e.target.matches('#popup-pixel-art') && !e.target.matches('.generate-css') && !e.target.matches('.generate-css-span') || parent(e.target, '.close', 1).matches('.close' || e.target.matches('.close')) ) {
document.getElementById('popup-pixel-art').classList.remove('active');
}
})
const parent = function(el, match, last) {
var result = [];
for (var p = el && el.parentElement; p; p = p.parentElement) {
result.push(p);
if(p.matches(match)) {
break;
}
}
if(last == 1) {
return result[result.length - 1];
} else {
return result;
}
};
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.