Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div class="pixel-grid-animation"><div class="pixel-grid-wrapper">
      <div class="pixgrid" style="display: grid; grid-template-columns: repeat(
        15, 
        20px); grid-template-rows: repeat(
        16, 
        20px);">
        <div class="pixgrid__pixel" id="811b5298-38ae-4851-90a3-0ae7e8b8397b" style="background-color: black; grid-area: 1 / 1 / 2 / 4"></div><div class="pixgrid__pixel" id="1911231e-e096-4d37-9459-c212ca305cae" style="background-color: #81531EFF; grid-area: 1 / 4 / 2 / 13"></div><div class="pixgrid__pixel" id="ff123168-0a43-47c3-b4da-ef60efa33411" style="background-color: black; grid-area: 1 / 13 / 2 / 16"></div><div class="pixgrid__pixel" id="7b457553-6397-4fa6-b5e6-19647b015091" style="background-color: black; grid-area: 2 / 1 / 3 / 3"></div><div class="pixgrid__pixel" id="d184b385-b91b-4a12-8a0c-366efc385bbc" style="background-color: #F3E63AFF; grid-area: 2 / 3 / 3 / 5"></div><div class="pixgrid__pixel" id="e8c7f9f0-5186-47ec-bb8f-af73b5e08aec" style="background-color: #81531EFF; grid-area: 2 / 5 / 3 / 6"></div><div class="pixgrid__pixel" id="9766fe00-545e-4846-bebe-adb4a5312ea8" style="background-color: #F8F18FFF; grid-area: 2 / 6 / 3 / 11"></div><div class="pixgrid__pixel" id="bcf22a69-15dc-45ae-a821-4f4f98554cc8" style="background-color: #81531EFF; grid-area: 2 / 11 / 3 / 12"></div><div class="pixgrid__pixel" id="2a5a8d7e-1db7-44bc-aca2-4815bfc465aa" style="background-color: #F3E63AFF; grid-area: 2 / 12 / 3 / 14"></div><div class="pixgrid__pixel" id="8b6defda-af41-45de-a617-d4c0e9b5d5fc" style="background-color: black; grid-area: 2 / 14 / 3 / 16"></div><div class="pixgrid__pixel" id="c3d9470a-6cb3-42e9-8088-ec5c99d0ac18" style="background-color: black; grid-area: 3 / 2 / 4 / 3"></div><div class="pixgrid__pixel" id="97529785-6ac4-4b8f-abcb-b0b6a4b117c0" style="background-color: #F3E63AFF; grid-area: 3 / 3 / 4 / 7"></div><div class="pixgrid__pixel" id="956d85ca-76ef-49f1-997b-793130e73bdb" style="background-color: #F8F18FFF; grid-area: 3 / 7 / 4 / 10"></div><div class="pixgrid__pixel" id="bf6341a4-b0da-4e10-b3b3-dff4991b5ef4" style="background-color: #F3E63AFF; grid-area: 3 / 10 / 4 / 14"></div><div class="pixgrid__pixel" id="2314f52a-0cff-4b2b-b926-c9a6daab06d9" style="background-color: black; grid-area: 3 / 14 / 4 / 15"></div><div class="pixgrid__pixel" id="21d9ebec-4054-4fa5-8d23-9fa4b2dbda2e" style="background-color: #81531EFF; grid-area: 4 / 3 / 5 / 4"></div><div class="pixgrid__pixel" id="d88fb3dd-3a9e-4641-929b-7932071d5c27" style="background-color: #F3E63AFF; grid-area: 4 / 4 / 5 / 13"></div><div class="pixgrid__pixel" id="d8ab1756-d72e-4e9c-a5c8-1e9f4ad9c66d" style="background-color: #81531EFF; grid-area: 4 / 13 / 5 / 14"></div><div class="pixgrid__pixel" id="248b278d-c5da-4be2-9ae1-33cb7ac53184" style="background-color: #81531EFF; grid-area: 5 / 3 / 6 / 5"></div><div class="pixgrid__pixel" id="5aee9dbf-c6bd-414b-98e9-576c686447b5" style="background-color: #F3E63AFF; grid-area: 5 / 5 / 6 / 12"></div><div class="pixgrid__pixel" id="3827064a-01b9-4a50-b24e-e1813e07258f" style="background-color: #81531EFF; grid-area: 5 / 12 / 6 / 14"></div><div class="pixgrid__pixel" id="cef962e6-c1b9-4c76-bed7-c19899457bb2" style="background-color: #81531EFF; grid-area: 6 / 3 / 7 / 4"></div><div class="pixgrid__pixel" id="67b82bc3-16de-4d8f-a839-fa0d29a72b72" style="background-color: #F3E63AFF; grid-area: 6 / 4 / 7 / 6"></div><div class="pixgrid__pixel" id="3026c2e0-d472-4a17-a844-5cb796351ad1" style="background-color: black; grid-area: 6 / 6 / 7 / 7"></div><div class="pixgrid__pixel" id="2afe0130-fce9-42d6-ae3f-6db2ab30bcb7" style="background-color: #F3E63AFF; grid-area: 6 / 7 / 7 / 10"></div><div class="pixgrid__pixel" id="4a03d814-b12d-4e44-b977-d0eebbb24fea" style="background-color: black; grid-area: 6 / 10 / 7 / 11"></div><div class="pixgrid__pixel" id="0dad27c1-6585-4b20-be80-5413abb5f458" style="background-color: #F3E63AFF; grid-area: 6 / 11 / 7 / 13"></div><div class="pixgrid__pixel" id="3cad580c-e917-48c8-b3ad-ba9b9e64de28" style="background-color: #81531EFF; grid-area: 6 / 13 / 7 / 14"></div><div class="pixgrid__pixel" id="0eabacd0-0f67-4a13-adba-ea658be939da" style="background-color: #81531EFF; grid-area: 7 / 3 / 8 / 4"></div><div class="pixgrid__pixel" id="21c6181a-248e-4123-8d8e-0449b872434f" style="background-color: red; grid-area: 7 / 4 / 8 / 6"></div><div class="pixgrid__pixel" id="b24e597b-a853-4847-8514-e4bee1db900b" style="background-color: black; grid-area: 7 / 6 / 8 / 7"></div><div class="pixgrid__pixel" id="5aa43299-b0d9-409f-a50d-c1e328eab433" style="background-color: #F3E63AFF; grid-area: 7 / 7 / 8 / 10"></div><div class="pixgrid__pixel" id="fc8080a9-d350-4ae0-91c2-b33d4393a3af" style="background-color: black; grid-area: 7 / 10 / 8 / 11"></div><div class="pixgrid__pixel" id="ca3be1e7-a946-480f-b9d8-8016d7882ec7" style="background-color: red; grid-area: 7 / 11 / 8 / 13"></div><div class="pixgrid__pixel" id="f8383c4b-ffea-4541-b6d3-bf3db5e2fb16" style="background-color: #81531EFF; grid-area: 7 / 13 / 8 / 14"></div><div class="pixgrid__pixel" id="35a7d7c8-2931-4566-b717-9584acd8a1bf" style="background-color: #81531EFF; grid-area: 8 / 3 / 9 / 4"></div><div class="pixgrid__pixel" id="c0fd44a9-8360-4002-bd30-7be7d8d8d8a4" style="background-color: red; grid-area: 8 / 4 / 9 / 6"></div><div class="pixgrid__pixel" id="90841411-a003-41d7-aff1-574a2fca0c98" style="background-color: #E6C153FF; grid-area: 8 / 6 / 9 / 7"></div><div class="pixgrid__pixel" id="3db94cf6-a1a0-43f6-8f7e-9cac95ada9ae" style="background-color: #F3E63AFF; grid-area: 8 / 7 / 9 / 8"></div><div class="pixgrid__pixel" id="e6e1a419-b492-40eb-bd26-2f20fd91607e" style="background-color: black; grid-area: 8 / 8 / 9 / 9"></div><div class="pixgrid__pixel" id="dbfc1684-4753-4e63-afdd-9a073ac40f7b" style="background-color: #F3E63AFF; grid-area: 8 / 9 / 9 / 10"></div><div class="pixgrid__pixel" id="1072fc65-41d3-4ec4-9f0e-c3441c744399" style="background-color: #E6C153FF; grid-area: 8 / 10 / 9 / 11"></div><div class="pixgrid__pixel" id="312aaeba-c313-443d-8c9b-d99425af0b38" style="background-color: red; grid-area: 8 / 11 / 9 / 13"></div><div class="pixgrid__pixel" id="70436054-0c20-46e5-93ca-3e68f634d3d6" style="background-color: #81531EFF; grid-area: 8 / 13 / 9 / 14"></div><div class="pixgrid__pixel" id="d892c33e-6ab5-4d38-ba55-bb47637b2e36" style="background-color: #81531EFF; grid-area: 9 / 4 / 10 / 5"></div><div class="pixgrid__pixel" id="8f0941cd-7752-4efe-9166-8a81a312dbc8" style="background-color: #F3E63AFF; grid-area: 9 / 5 / 10 / 6"></div><div class="pixgrid__pixel" id="ef190613-e298-498b-bb19-e401171a6012" style="background-color: #C5953FFF; grid-area: 9 / 6 / 10 / 7"></div><div class="pixgrid__pixel" id="cc7cf003-14c0-4413-810a-d7016a444ca3" style="background-color: #E6C153FF; grid-area: 9 / 7 / 10 / 10"></div><div class="pixgrid__pixel" id="9139872e-57af-4fcf-9992-5da86f6200c8" style="background-color: #C5953FFF; grid-area: 9 / 10 / 10 / 11"></div><div class="pixgrid__pixel" id="f67723a4-91a6-4137-98d4-02c140e387b5" style="background-color: #F3E63AFF; grid-area: 9 / 11 / 10 / 12"></div><div class="pixgrid__pixel" id="6a36f4dc-c301-4e02-ba14-c56f93b1bf59" style="background-color: #81531EFF; grid-area: 9 / 12 / 10 / 13"></div><div class="pixgrid__pixel" id="dcdcab46-9668-4b6c-bed3-c3702e2a89a1" style="background-color: #81531EFF; grid-area: 10 / 3 / 11 / 4"></div><div class="pixgrid__pixel" id="5068c80c-9f39-4c5f-9eba-aeea58e7ad48" style="background-color: #F3E63AFF; grid-area: 10 / 4 / 11 / 6"></div><div class="pixgrid__pixel" id="5a159f7a-4d23-4e73-b221-eb037a6e7b17" style="background-color: #81531EFF; grid-area: 10 / 6 / 11 / 7"></div><div class="pixgrid__pixel" id="3bbc5c3c-fa08-4d6a-8ca7-1165caef9848" style="background-color: #C5953FFF; grid-area: 10 / 7 / 11 / 10"></div><div class="pixgrid__pixel" id="ecea675f-a97a-4ba2-b622-dc5b5c3ad3c2" style="background-color: #81531EFF; grid-area: 10 / 10 / 11 / 11"></div><div class="pixgrid__pixel" id="94c7b67f-e6e0-4fab-a9d8-d061225ddd03" style="background-color: #F3E63AFF; grid-area: 10 / 11 / 11 / 13"></div><div class="pixgrid__pixel" id="83530c71-c139-4196-a476-fa2e13bab316" style="background-color: #81531EFF; grid-area: 10 / 13 / 11 / 14"></div><div class="pixgrid__pixel" id="bec0af36-d3a9-4cc5-9b62-19be1f2c4d3b" style="background-color: #81531EFF; grid-area: 11 / 3 / 12 / 4"></div><div class="pixgrid__pixel" id="7efb8a80-487b-4300-be77-f7599712fdaf" style="background-color: #E6C153FF; grid-area: 11 / 4 / 12 / 5"></div><div class="pixgrid__pixel" id="fbcba1e7-74ff-4631-a509-199bce8589ff" style="background-color: #81531EFF; grid-area: 11 / 5 / 12 / 7"></div><div class="pixgrid__pixel" id="3811aea1-86f0-4121-b197-44b2c765e362" style="background-color: #E6C153FF; grid-area: 11 / 7 / 12 / 10"></div><div class="pixgrid__pixel" id="d301209a-e747-4f21-99b4-899d94db3e68" style="background-color: #81531EFF; grid-area: 11 / 10 / 12 / 12"></div><div class="pixgrid__pixel" id="44e0912f-49cd-4ff5-ad66-ea0853612d02" style="background-color: #E6C153FF; grid-area: 11 / 12 / 12 / 13"></div><div class="pixgrid__pixel" id="3ba502b3-4c60-4c57-8255-15327cbadfd1" style="background-color: #81531EFF; grid-area: 11 / 13 / 12 / 14"></div><div class="pixgrid__pixel" id="009635fb-a139-4a28-a039-8d3e23bcacce" style="background-color: #81531EFF; grid-area: 12 / 3 / 13 / 4"></div><div class="pixgrid__pixel" id="3f40533d-4137-4791-a489-948334b431e7" style="background-color: #E6C153FF; grid-area: 12 / 4 / 13 / 13"></div><div class="pixgrid__pixel" id="678380df-b94d-42c8-a4dd-5ce188c10e05" style="background-color: #81531EFF; grid-area: 12 / 13 / 13 / 14"></div><div class="pixgrid__pixel" id="d10ba51b-31c6-4dda-b8d3-111993dab666" style="background-color: #81531EFF; grid-area: 13 / 3 / 14 / 4"></div><div class="pixgrid__pixel" id="71229c54-483d-40c1-b61f-88054a8e0756" style="background-color: #E6C153FF; grid-area: 13 / 4 / 14 / 13"></div><div class="pixgrid__pixel" id="816ea388-6d3f-4dab-b57d-9789202642dd" style="background-color: #81531EFF; grid-area: 13 / 13 / 14 / 14"></div><div class="pixgrid__pixel" id="a089adde-b0f7-4b9b-a124-ca98f65692f5" style="background-color: #81531EFF; grid-area: 14 / 3 / 15 / 4"></div><div class="pixgrid__pixel" id="c76fa280-5114-43c8-b20a-e839a56e259e" style="background-color: #E6C153FF; grid-area: 14 / 4 / 15 / 5"></div><div class="pixgrid__pixel" id="ec870c5f-dae5-42c0-a85e-d779b986bd38" style="background-color: #81531EFF; grid-area: 14 / 5 / 15 / 7"></div><div class="pixgrid__pixel" id="dfaec4a3-aa51-4427-90e0-843f4ca91c07" style="background-color: #E6C153FF; grid-area: 14 / 7 / 15 / 10"></div><div class="pixgrid__pixel" id="27c15286-c546-4d69-a81a-71c16e264c27" style="background-color: #81531EFF; grid-area: 14 / 10 / 15 / 12"></div><div class="pixgrid__pixel" id="8c448467-9a4b-433f-9d1a-a91554882cac" style="background-color: #E6C153FF; grid-area: 14 / 12 / 15 / 13"></div><div class="pixgrid__pixel" id="f8db9173-c3bd-4305-ad09-a30c4f220162" style="background-color: #81531EFF; grid-area: 14 / 13 / 15 / 14"></div><div class="pixgrid__pixel" id="d34669e2-6b3a-43a5-8063-a326f8322a7d" style="background-color: #81531EFF; grid-area: 15 / 4 / 16 / 5"></div><div class="pixgrid__pixel" id="689d98a6-69c6-45e4-a5f0-9ed6a788fda0" style="background-color: #E6C153FF; grid-area: 15 / 5 / 16 / 7"></div><div class="pixgrid__pixel" id="692eadab-7613-4487-92ea-351bf058c557" style="background-color: #81531EFF; grid-area: 15 / 7 / 16 / 10"></div><div class="pixgrid__pixel" id="1a3381ba-33a8-4d0e-a13e-bb6ade25e837" style="background-color: #E6C153FF; grid-area: 15 / 10 / 16 / 12"></div><div class="pixgrid__pixel" id="2313d18c-316c-4eb9-826a-3afce1c53e3d" style="background-color: #81531EFF; grid-area: 15 / 12 / 16 / 13"></div><div class="pixgrid__pixel" id="5e48d6e8-864c-4f13-addc-f78901a78fa4" style="background-color: #81531EFF; grid-area: 16 / 5 / 17 / 7"></div><div class="pixgrid__pixel" id="56063ded-5d60-4ab8-84bf-3ca7b4c635de" style="background-color: #81531EFF; grid-area: 16 / 10 / 17 / 12"></div></div>
    
      <div class="pixgrid" style="display: grid; grid-template-columns: repeat(
        15, 
        20px); grid-template-rows: repeat(
        16, 
        20px);">
        <div class="pixgrid__pixel" id="7b8c3ab9-02a7-4794-a6b1-d7eda4f9fc0c" style="background-color: black; grid-area: 1 / 10 / 2 / 13"></div><div class="pixgrid__pixel" id="baa6430e-5123-411f-bff8-043df0a7b1a9" style="background-color: #81531EFF; grid-area: 2 / 4 / 3 / 10"></div><div class="pixgrid__pixel" id="42f774c8-1add-4f2a-aa5b-f222391110c9" style="background-color: #F3E63AFF; grid-area: 2 / 10 / 3 / 11"></div><div class="pixgrid__pixel" id="bcf22a69-15dc-45ae-a821-4f4f98554cc8" style="background-color: black; grid-area: 2 / 11 / 3 / 13"></div><div class="pixgrid__pixel" id="97529785-6ac4-4b8f-abcb-b0b6a4b117c0" style="background-color: #81531EFF; grid-area: 3 / 3 / 4 / 4"></div><div class="pixgrid__pixel" id="a9257d88-0a71-4e6d-9dc1-f9ac4e2d84a4" style="background-color: #F8F18FFF; grid-area: 3 / 4 / 4 / 8"></div><div class="pixgrid__pixel" id="13b93f47-bb83-4c5e-a796-a61deb1be23e" style="background-color: #81531EFF; grid-area: 3 / 8 / 4 / 9"></div><div class="pixgrid__pixel" id="28023989-2bcc-4504-91cd-e00d1251185a" style="background-color: #F3E63AFF; grid-area: 3 / 9 / 4 / 11"></div><div class="pixgrid__pixel" id="0155a1ff-a67b-4f69-b848-06fe7ac4bd08" style="background-color: black; grid-area: 3 / 11 / 4 / 12"></div><div class="pixgrid__pixel" id="043cb0f6-223e-4e40-8783-e25274abe996" style="background-color: #81531EFF; grid-area: 4 / 2 / 5 / 3"></div><div class="pixgrid__pixel" id="21d9ebec-4054-4fa5-8d23-9fa4b2dbda2e" style="background-color: #F8F18FFF; grid-area: 4 / 3 / 5 / 5"></div><div class="pixgrid__pixel" id="2346ad8e-06a4-497d-865e-fe5f16e9be9e" style="background-color: #F3E63AFF; grid-area: 4 / 5 / 5 / 10"></div><div class="pixgrid__pixel" id="37509825-e3d6-4fbb-93ce-fce4e58ed662" style="background-color: #81531EFF; grid-area: 4 / 10 / 5 / 11"></div><div class="pixgrid__pixel" id="6acc446d-eb04-428c-a739-54dc8e957923" style="background-color: #81531EFF; grid-area: 5 / 2 / 6 / 3"></div><div class="pixgrid__pixel" id="248b278d-c5da-4be2-9ae1-33cb7ac53184" style="background-color: #F3E63AFF; grid-area: 5 / 3 / 6 / 9"></div><div class="pixgrid__pixel" id="ecc6a839-552a-4898-9661-b9bd2fe66954" style="background-color: #81531EFF; grid-area: 5 / 9 / 6 / 11"></div><div class="pixgrid__pixel" id="a12ea6ab-80f3-4ee6-a8a4-67eed84e2487" style="background-color: #81531EFF; grid-area: 5 / 13 / 6 / 14"></div><div class="pixgrid__pixel" id="4a898d53-453d-4d7a-8e00-15a96ef5dd5f" style="background-color: #81531EFF; grid-area: 6 / 1 / 7 / 2"></div><div class="pixgrid__pixel" id="f71a296d-d8ac-4af3-b5f9-647d02a3de89" style="background-color: #F3E63AFF; grid-area: 6 / 2 / 7 / 4"></div><div class="pixgrid__pixel" id="67b82bc3-16de-4d8f-a839-fa0d29a72b72" style="background-color: black; grid-area: 6 / 4 / 7 / 5"></div><div class="pixgrid__pixel" id="2edb2491-1566-420e-9e7d-ca39d65b6ba4" style="background-color: #F3E63AFF; grid-area: 6 / 5 / 7 / 6"></div><div class="pixgrid__pixel" id="3026c2e0-d472-4a17-a844-5cb796351ad1" style="background-color: red; grid-area: 6 / 6 / 7 / 8"></div><div class="pixgrid__pixel" id="719ae56a-3b3e-42d9-aa5e-d09f75641e35" style="background-color: #F3E63AFF; grid-area: 6 / 8 / 7 / 9"></div><div class="pixgrid__pixel" id="319330b7-4d2f-4eda-b73e-02c940c6c0b9" style="background-color: #E6C153FF; grid-area: 6 / 9 / 7 / 10"></div><div class="pixgrid__pixel" id="4a03d814-b12d-4e44-b977-d0eebbb24fea" style="background-color: #81531EFF; grid-area: 6 / 10 / 7 / 11"></div><div class="pixgrid__pixel" id="caea30cc-6f16-4ef7-977d-9f738220f711" style="background-color: #81531EFF; grid-area: 6 / 12 / 7 / 13"></div><div class="pixgrid__pixel" id="3cad580c-e917-48c8-b3ad-ba9b9e64de28" style="background-color: #E6C153FF; grid-area: 6 / 13 / 7 / 14"></div><div class="pixgrid__pixel" id="b4a8e48d-b980-4f5e-befe-0078398ebfce" style="background-color: #81531EFF; grid-area: 6 / 14 / 7 / 15"></div><div class="pixgrid__pixel" id="86e1e1ca-a0ce-4e53-af5d-ca0132f8caf4" style="background-color: #81531EFF; grid-area: 7 / 1 / 8 / 2"></div><div class="pixgrid__pixel" id="dfcbf4d9-5ede-44c3-bf5c-249523635538" style="background-color: #E6C153FF; grid-area: 7 / 2 / 8 / 4"></div><div class="pixgrid__pixel" id="21c6181a-248e-4123-8d8e-0449b872434f" style="background-color: black; grid-area: 7 / 4 / 8 / 5"></div><div class="pixgrid__pixel" id="a51a7c03-4dee-41bb-b56e-84f0e80a0175" style="background-color: #E6C153FF; grid-area: 7 / 5 / 8 / 6"></div><div class="pixgrid__pixel" id="b24e597b-a853-4847-8514-e4bee1db900b" style="background-color: red; grid-area: 7 / 6 / 8 / 8"></div><div class="pixgrid__pixel" id="7b90b723-f231-4c4b-ab43-fba29cc63d9a" style="background-color: #E6C153FF; grid-area: 7 / 8 / 8 / 10"></div><div class="pixgrid__pixel" id="fc8080a9-d350-4ae0-91c2-b33d4393a3af" style="background-color: #81531EFF; grid-area: 7 / 10 / 8 / 11"></div><div class="pixgrid__pixel" id="5ce88bb7-bf6d-4ef8-9246-537d7e29a2c3" style="background-color: #81531EFF; grid-area: 7 / 12 / 8 / 13"></div><div class="pixgrid__pixel" id="f8383c4b-ffea-4541-b6d3-bf3db5e2fb16" style="background-color: #E6C153FF; grid-area: 7 / 13 / 8 / 14"></div><div class="pixgrid__pixel" id="c31a39ae-bc3b-415d-8a94-7a1eb401eb0c" style="background-color: #81531EFF; grid-area: 7 / 14 / 8 / 15"></div><div class="pixgrid__pixel" id="a7dc34ae-1c4c-44c4-8878-3da86802ac95" style="background-color: #81531EFF; grid-area: 8 / 1 / 9 / 2"></div><div class="pixgrid__pixel" id="4d3b48fa-ba78-4692-abde-abe77d1f4eef" style="background-color: #E6C153FF; grid-area: 8 / 2 / 9 / 10"></div><div class="pixgrid__pixel" id="1072fc65-41d3-4ec4-9f0e-c3441c744399" style="background-color: #81531EFF; grid-area: 8 / 10 / 9 / 12"></div><div class="pixgrid__pixel" id="c7d10b3c-df07-4b55-805b-5f8e42869eb2" style="background-color: #E6C153FF; grid-area: 8 / 12 / 9 / 14"></div><div class="pixgrid__pixel" id="165e51bf-77f5-429f-86dc-c9a5e07831ab" style="background-color: #81531EFF; grid-area: 8 / 14 / 9 / 15"></div><div class="pixgrid__pixel" id="617d3cfb-4ddb-4079-9ba3-bb6b77873f24" style="background-color: #81531EFF; grid-area: 9 / 2 / 10 / 4"></div><div class="pixgrid__pixel" id="d892c33e-6ab5-4d38-ba55-bb47637b2e36" style="background-color: #C5953FFF; grid-area: 9 / 4 / 10 / 5"></div><div class="pixgrid__pixel" id="8f0941cd-7752-4efe-9166-8a81a312dbc8" style="background-color: #E6C153FF; grid-area: 9 / 5 / 10 / 8"></div><div class="pixgrid__pixel" id="e9dc63aa-aebb-4354-8a86-9c1e621f1f86" style="background-color: #C5953FFF; grid-area: 9 / 8 / 10 / 9"></div><div class="pixgrid__pixel" id="6507c261-eee4-4948-987e-0ecaf98444a3" style="background-color: #64481CFF; grid-area: 9 / 9 / 10 / 10"></div><div class="pixgrid__pixel" id="f67723a4-91a6-4137-98d4-02c140e387b5" style="background-color: #81531EFF; grid-area: 9 / 11 / 10 / 12"></div><div class="pixgrid__pixel" id="6a36f4dc-c301-4e02-ba14-c56f93b1bf59" style="background-color: #E6C153FF; grid-area: 9 / 12 / 10 / 14"></div><div class="pixgrid__pixel" id="24dbb5ee-7187-49d2-bfdc-00dfadf4bf37" style="background-color: #81531EFF; grid-area: 9 / 14 / 10 / 15"></div><div class="pixgrid__pixel" id="dcdcab46-9668-4b6c-bed3-c3702e2a89a1" style="background-color: #81531EFF; grid-area: 10 / 3 / 11 / 4"></div><div class="pixgrid__pixel" id="5068c80c-9f39-4c5f-9eba-aeea58e7ad48" style="background-color: #E6C153FF; grid-area: 10 / 4 / 11 / 10"></div><div class="pixgrid__pixel" id="ecea675f-a97a-4ba2-b622-dc5b5c3ad3c2" style="background-color: #81531EFF; grid-area: 10 / 10 / 11 / 11"></div><div class="pixgrid__pixel" id="94c7b67f-e6e0-4fab-a9d8-d061225ddd03" style="background-color: #AF722CFF; grid-area: 10 / 11 / 11 / 12"></div><div class="pixgrid__pixel" id="e7912ec9-b9cc-43ee-8ddf-0312b01d2730" style="background-color: #E6C153FF; grid-area: 10 / 12 / 11 / 14"></div><div class="pixgrid__pixel" id="fda24e02-70ae-4511-89ae-4e88f9a50a06" style="background-color: #81531EFF; grid-area: 10 / 14 / 11 / 15"></div><div class="pixgrid__pixel" id="6b13c662-5b88-4464-9ab5-31f05b23841e" style="background-color: #81531EFF; grid-area: 11 / 2 / 12 / 3"></div><div class="pixgrid__pixel" id="bec0af36-d3a9-4cc5-9b62-19be1f2c4d3b" style="background-color: #E6C153FF; grid-area: 11 / 3 / 12 / 5"></div><div class="pixgrid__pixel" id="fbcba1e7-74ff-4631-a509-199bce8589ff" style="background-color: #81531EFF; grid-area: 11 / 5 / 12 / 6"></div><div class="pixgrid__pixel" id="1cb75a6b-232e-491c-9abb-1d7b4fa61d84" style="background-color: #F3E63AFF; grid-area: 11 / 6 / 12 / 7"></div><div class="pixgrid__pixel" id="3811aea1-86f0-4121-b197-44b2c765e362" style="background-color: #E6C153FF; grid-area: 11 / 7 / 12 / 9"></div><div class="pixgrid__pixel" id="75d7c79f-cd10-4c39-8778-e981e969b012" style="background-color: #A77425FF; grid-area: 11 / 9 / 12 / 10"></div><div class="pixgrid__pixel" id="d301209a-e747-4f21-99b4-899d94db3e68" style="background-color: #81531EFF; grid-area: 11 / 10 / 12 / 11"></div><div class="pixgrid__pixel" id="c3c758b5-aac9-4f13-8ea5-e9793df10f52" style="background-color: #AF722CFF; grid-area: 11 / 11 / 12 / 13"></div><div class="pixgrid__pixel" id="3ba502b3-4c60-4c57-8255-15327cbadfd1" style="background-color: #E6C153FF; grid-area: 11 / 13 / 12 / 14"></div><div class="pixgrid__pixel" id="66453e96-9890-4184-bd6a-27c922f5901f" style="background-color: #81531EFF; grid-area: 11 / 14 / 12 / 15"></div><div class="pixgrid__pixel" id="1f64c8e3-8809-4e05-949a-5a74e203aab1" style="background-color: #81531EFF; grid-area: 12 / 2 / 13 / 3"></div><div class="pixgrid__pixel" id="009635fb-a139-4a28-a039-8d3e23bcacce" style="background-color: #E6C153FF; grid-area: 12 / 3 / 13 / 5"></div><div class="pixgrid__pixel" id="5f4c6b2c-95cc-487d-b3b3-d8ddd398720a" style="background-color: #81531EFF; grid-area: 12 / 5 / 13 / 7"></div><div class="pixgrid__pixel" id="b1a5df5a-d756-4b41-8292-9eda635c41ae" style="background-color: #E6C153FF; grid-area: 12 / 7 / 13 / 10"></div><div class="pixgrid__pixel" id="2ce52447-aa06-486b-8af5-5455d293c944" style="background-color: #81531EFF; grid-area: 12 / 10 / 13 / 11"></div><div class="pixgrid__pixel" id="f399c739-1806-4963-bfbd-a7b8c2d21ec1" style="background-color: #AF722CFF; grid-area: 12 / 11 / 13 / 13"></div><div class="pixgrid__pixel" id="678380df-b94d-42c8-a4dd-5ce188c10e05" style="background-color: #81531EFF; grid-area: 12 / 13 / 13 / 14"></div><div class="pixgrid__pixel" id="648945a4-18db-46bb-9841-fc04d5b362ea" style="background-color: #81531EFF; grid-area: 13 / 2 / 14 / 3"></div><div class="pixgrid__pixel" id="d10ba51b-31c6-4dda-b8d3-111993dab666" style="background-color: #E6C153FF; grid-area: 13 / 3 / 14 / 9"></div><div class="pixgrid__pixel" id="39c085f2-2f81-4fee-9302-88d57b700af9" style="background-color: #A77425FF; grid-area: 13 / 9 / 14 / 10"></div><div class="pixgrid__pixel" id="ae9d4e46-a5c4-4e05-902a-68c0271a56a8" style="background-color: #81531EFF; grid-area: 13 / 10 / 14 / 11"></div><div class="pixgrid__pixel" id="fd0cb7b0-8f88-47ae-b90f-8eea08620b3b" style="background-color: #AF722CFF; grid-area: 13 / 11 / 14 / 12"></div><div class="pixgrid__pixel" id="58118133-ae30-4aba-9300-a898c4f4ee15" style="background-color: #81531EFF; grid-area: 13 / 12 / 14 / 13"></div><div class="pixgrid__pixel" id="a089adde-b0f7-4b9b-a124-ca98f65692f5" style="background-color: #81531EFF; grid-area: 14 / 3 / 15 / 4"></div><div class="pixgrid__pixel" id="c76fa280-5114-43c8-b20a-e839a56e259e" style="background-color: #E6C153FF; grid-area: 14 / 4 / 15 / 5"></div><div class="pixgrid__pixel" id="ec870c5f-dae5-42c0-a85e-d779b986bd38" style="background-color: #81531EFF; grid-area: 14 / 5 / 15 / 7"></div><div class="pixgrid__pixel" id="dfaec4a3-aa51-4427-90e0-843f4ca91c07" style="background-color: #E6C153FF; grid-area: 14 / 7 / 15 / 10"></div><div class="pixgrid__pixel" id="27c15286-c546-4d69-a81a-71c16e264c27" style="background-color: #81531EFF; grid-area: 14 / 10 / 15 / 12"></div><div class="pixgrid__pixel" id="d34669e2-6b3a-43a5-8063-a326f8322a7d" style="background-color: #81531EFF; grid-area: 15 / 4 / 16 / 5"></div><div class="pixgrid__pixel" id="689d98a6-69c6-45e4-a5f0-9ed6a788fda0" style="background-color: #E6C153FF; grid-area: 15 / 5 / 16 / 8"></div><div class="pixgrid__pixel" id="f4c157e1-aee6-47d0-8fe4-f3bf9d57e8d4" style="background-color: #81531EFF; grid-area: 15 / 8 / 16 / 11"></div><div class="pixgrid__pixel" id="5e48d6e8-864c-4f13-addc-f78901a78fa4" style="background-color: #81531EFF; grid-area: 16 / 5 / 17 / 8"></div></div>
    
      <div class="pixgrid" style="display: grid; grid-template-columns: repeat(
        15, 
        20px); grid-template-rows: repeat(
        16, 
        20px);">
        <div class="pixgrid__pixel" id="811b5298-38ae-4851-90a3-0ae7e8b8397b" style="background-color: black; grid-area: 1 / 1 / 2 / 4"></div><div class="pixgrid__pixel" id="ff123168-0a43-47c3-b4da-ef60efa33411" style="background-color: black; grid-area: 1 / 13 / 2 / 16"></div><div class="pixgrid__pixel" id="7b457553-6397-4fa6-b5e6-19647b015091" style="background-color: black; grid-area: 2 / 1 / 3 / 3"></div><div class="pixgrid__pixel" id="d184b385-b91b-4a12-8a0c-366efc385bbc" style="background-color: #F3E63AFF; grid-area: 2 / 3 / 3 / 4"></div><div class="pixgrid__pixel" id="baa6430e-5123-411f-bff8-043df0a7b1a9" style="background-color: #81531EFF; grid-area: 2 / 4 / 3 / 13"></div><div class="pixgrid__pixel" id="99d97a14-be86-4742-8596-84536f60094d" style="background-color: #F3E63AFF; grid-area: 2 / 13 / 3 / 14"></div><div class="pixgrid__pixel" id="8b6defda-af41-45de-a617-d4c0e9b5d5fc" style="background-color: black; grid-area: 2 / 14 / 3 / 16"></div><div class="pixgrid__pixel" id="c3d9470a-6cb3-42e9-8088-ec5c99d0ac18" style="background-color: black; grid-area: 3 / 2 / 4 / 3"></div><div class="pixgrid__pixel" id="97529785-6ac4-4b8f-abcb-b0b6a4b117c0" style="background-color: #F3E63AFF; grid-area: 3 / 3 / 4 / 5"></div><div class="pixgrid__pixel" id="99aeec76-d362-41dd-a894-6149c08f437d" style="background-color: #81531EFF; grid-area: 3 / 5 / 4 / 6"></div><div class="pixgrid__pixel" id="ee00048e-69eb-47e8-ba9c-7e92e1258d5e" style="background-color: #F8F18FFF; grid-area: 3 / 6 / 4 / 11"></div><div class="pixgrid__pixel" id="0155a1ff-a67b-4f69-b848-06fe7ac4bd08" style="background-color: #81531EFF; grid-area: 3 / 11 / 4 / 12"></div><div class="pixgrid__pixel" id="a08215e4-3c86-43af-9148-e5dc02019bbd" style="background-color: #F3E63AFF; grid-area: 3 / 12 / 4 / 14"></div><div class="pixgrid__pixel" id="2314f52a-0cff-4b2b-b926-c9a6daab06d9" style="background-color: black; grid-area: 3 / 14 / 4 / 15"></div><div class="pixgrid__pixel" id="21d9ebec-4054-4fa5-8d23-9fa4b2dbda2e" style="background-color: #81531EFF; grid-area: 4 / 3 / 5 / 4"></div><div class="pixgrid__pixel" id="d88fb3dd-3a9e-4641-929b-7932071d5c27" style="background-color: #F3E63AFF; grid-area: 4 / 4 / 5 / 7"></div><div class="pixgrid__pixel" id="d77e6d28-6ec9-42fe-ae7e-dc2b83ddf0fa" style="background-color: #F8F18FFF; grid-area: 4 / 7 / 5 / 10"></div><div class="pixgrid__pixel" id="37509825-e3d6-4fbb-93ce-fce4e58ed662" style="background-color: #F3E63AFF; grid-area: 4 / 10 / 5 / 13"></div><div class="pixgrid__pixel" id="d8ab1756-d72e-4e9c-a5c8-1e9f4ad9c66d" style="background-color: #81531EFF; grid-area: 4 / 13 / 5 / 14"></div><div class="pixgrid__pixel" id="248b278d-c5da-4be2-9ae1-33cb7ac53184" style="background-color: #81531EFF; grid-area: 5 / 3 / 6 / 4"></div><div class="pixgrid__pixel" id="a5887f90-581c-4513-afa0-8d3080831a4c" style="background-color: #F3E63AFF; grid-area: 5 / 4 / 6 / 13"></div><div class="pixgrid__pixel" id="a12ea6ab-80f3-4ee6-a8a4-67eed84e2487" style="background-color: #81531EFF; grid-area: 5 / 13 / 6 / 14"></div><div class="pixgrid__pixel" id="cef962e6-c1b9-4c76-bed7-c19899457bb2" style="background-color: #81531EFF; grid-area: 6 / 3 / 7 / 4"></div><div class="pixgrid__pixel" id="67b82bc3-16de-4d8f-a839-fa0d29a72b72" style="background-color: #E6C153FF; grid-area: 6 / 4 / 7 / 5"></div><div class="pixgrid__pixel" id="2edb2491-1566-420e-9e7d-ca39d65b6ba4" style="background-color: #F3E63AFF; grid-area: 6 / 5 / 7 / 12"></div><div class="pixgrid__pixel" id="caea30cc-6f16-4ef7-977d-9f738220f711" style="background-color: #E6C153FF; grid-area: 6 / 12 / 7 / 13"></div><div class="pixgrid__pixel" id="3cad580c-e917-48c8-b3ad-ba9b9e64de28" style="background-color: #81531EFF; grid-area: 6 / 13 / 7 / 14"></div><div class="pixgrid__pixel" id="0eabacd0-0f67-4a13-adba-ea658be939da" style="background-color: #81531EFF; grid-area: 7 / 3 / 8 / 4"></div><div class="pixgrid__pixel" id="21c6181a-248e-4123-8d8e-0449b872434f" style="background-color: #E6C153FF; grid-area: 7 / 4 / 8 / 6"></div><div class="pixgrid__pixel" id="b24e597b-a853-4847-8514-e4bee1db900b" style="background-color: #F3E63AFF; grid-area: 7 / 6 / 8 / 11"></div><div class="pixgrid__pixel" id="ca3be1e7-a946-480f-b9d8-8016d7882ec7" style="background-color: #E6C153FF; grid-area: 7 / 11 / 8 / 13"></div><div class="pixgrid__pixel" id="f8383c4b-ffea-4541-b6d3-bf3db5e2fb16" style="background-color: #81531EFF; grid-area: 7 / 13 / 8 / 14"></div><div class="pixgrid__pixel" id="35a7d7c8-2931-4566-b717-9584acd8a1bf" style="background-color: #81531EFF; grid-area: 8 / 3 / 9 / 4"></div><div class="pixgrid__pixel" id="c0fd44a9-8360-4002-bd30-7be7d8d8d8a4" style="background-color: #E6C153FF; grid-area: 8 / 4 / 9 / 13"></div><div class="pixgrid__pixel" id="70436054-0c20-46e5-93ca-3e68f634d3d6" style="background-color: #81531EFF; grid-area: 8 / 13 / 9 / 16"></div><div class="pixgrid__pixel" id="d892c33e-6ab5-4d38-ba55-bb47637b2e36" style="background-color: #81531EFF; grid-area: 9 / 4 / 10 / 5"></div><div class="pixgrid__pixel" id="8f0941cd-7752-4efe-9166-8a81a312dbc8" style="background-color: #C5953FFF; grid-area: 9 / 5 / 10 / 6"></div><div class="pixgrid__pixel" id="ef190613-e298-498b-bb19-e401171a6012" style="background-color: #E6C153FF; grid-area: 9 / 6 / 10 / 11"></div><div class="pixgrid__pixel" id="f67723a4-91a6-4137-98d4-02c140e387b5" style="background-color: #C5953FFF; grid-area: 9 / 11 / 10 / 12"></div><div class="pixgrid__pixel" id="6a36f4dc-c301-4e02-ba14-c56f93b1bf59" style="background-color: #81531EFF; grid-area: 9 / 12 / 10 / 14"></div><div class="pixgrid__pixel" id="24dbb5ee-7187-49d2-bfdc-00dfadf4bf37" style="background-color: #E6C153FF; grid-area: 9 / 14 / 10 / 15"></div><div class="pixgrid__pixel" id="06024327-fa90-470a-b349-b5bb5f2cac24" style="background-color: #81531EFF; grid-area: 9 / 15 / 10 / 16"></div><div class="pixgrid__pixel" id="dcdcab46-9668-4b6c-bed3-c3702e2a89a1" style="background-color: #81531EFF; grid-area: 10 / 3 / 11 / 4"></div><div class="pixgrid__pixel" id="5068c80c-9f39-4c5f-9eba-aeea58e7ad48" style="background-color: #E6C153FF; grid-area: 10 / 4 / 11 / 12"></div><div class="pixgrid__pixel" id="e7912ec9-b9cc-43ee-8ddf-0312b01d2730" style="background-color: #81531EFF; grid-area: 10 / 12 / 11 / 13"></div><div class="pixgrid__pixel" id="83530c71-c139-4196-a476-fa2e13bab316" style="background-color: #E6C153FF; grid-area: 10 / 13 / 11 / 15"></div><div class="pixgrid__pixel" id="655f7e05-3eeb-4f6f-aeee-cf3d2191683c" style="background-color: #81531EFF; grid-area: 10 / 15 / 11 / 16"></div><div class="pixgrid__pixel" id="bec0af36-d3a9-4cc5-9b62-19be1f2c4d3b" style="background-color: #81531EFF; grid-area: 11 / 3 / 12 / 4"></div><div class="pixgrid__pixel" id="7efb8a80-487b-4300-be77-f7599712fdaf" style="background-color: #E6C153FF; grid-area: 11 / 4 / 12 / 5"></div><div class="pixgrid__pixel" id="fbcba1e7-74ff-4631-a509-199bce8589ff" style="background-color: #A77425FF; grid-area: 11 / 5 / 12 / 11"></div><div class="pixgrid__pixel" id="c3c758b5-aac9-4f13-8ea5-e9793df10f52" style="background-color: #81531EFF; grid-area: 11 / 11 / 12 / 12"></div><div class="pixgrid__pixel" id="44e0912f-49cd-4ff5-ad66-ea0853612d02" style="background-color: #E6C153FF; grid-area: 11 / 12 / 12 / 15"></div><div class="pixgrid__pixel" id="69c7a316-d420-4892-9578-382b5b0efc37" style="background-color: #81531EFF; grid-area: 11 / 15 / 12 / 16"></div><div class="pixgrid__pixel" id="009635fb-a139-4a28-a039-8d3e23bcacce" style="background-color: #81531EFF; grid-area: 12 / 3 / 13 / 4"></div><div class="pixgrid__pixel" id="3f40533d-4137-4791-a489-948334b431e7" style="background-color: #E6C153FF; grid-area: 12 / 4 / 13 / 9"></div><div class="pixgrid__pixel" id="63750fee-5ac0-437d-ad01-ffa1f8cf6bb0" style="background-color: #81531EFF; grid-area: 12 / 9 / 13 / 11"></div><div class="pixgrid__pixel" id="f399c739-1806-4963-bfbd-a7b8c2d21ec1" style="background-color: #AA7242FF; grid-area: 12 / 11 / 13 / 13"></div><div class="pixgrid__pixel" id="678380df-b94d-42c8-a4dd-5ce188c10e05" style="background-color: #E6C153FF; grid-area: 12 / 13 / 13 / 14"></div><div class="pixgrid__pixel" id="a5f0153f-ee6e-432b-9d2c-2a8bd71723e5" style="background-color: #81531EFF; grid-area: 12 / 14 / 13 / 15"></div><div class="pixgrid__pixel" id="d10ba51b-31c6-4dda-b8d3-111993dab666" style="background-color: #81531EFF; grid-area: 13 / 3 / 14 / 4"></div><div class="pixgrid__pixel" id="71229c54-483d-40c1-b61f-88054a8e0756" style="background-color: #E6C153FF; grid-area: 13 / 4 / 14 / 5"></div><div class="pixgrid__pixel" id="e4c52378-d4fb-4604-bdf5-65b003830e5d" style="background-color: #A77425FF; grid-area: 13 / 5 / 14 / 8"></div><div class="pixgrid__pixel" id="15c37ed4-0ece-41a8-b304-f8c97e2f5799" style="background-color: #81531EFF; grid-area: 13 / 8 / 14 / 10"></div><div class="pixgrid__pixel" id="ae9d4e46-a5c4-4e05-902a-68c0271a56a8" style="background-color: #AA7242FF; grid-area: 13 / 10 / 14 / 12"></div><div class="pixgrid__pixel" id="58118133-ae30-4aba-9300-a898c4f4ee15" style="background-color: #81531EFF; grid-area: 13 / 12 / 14 / 14"></div><div class="pixgrid__pixel" id="a089adde-b0f7-4b9b-a124-ca98f65692f5" style="background-color: #81531EFF; grid-area: 14 / 3 / 15 / 4"></div><div class="pixgrid__pixel" id="c76fa280-5114-43c8-b20a-e839a56e259e" style="background-color: #E6C153FF; grid-area: 14 / 4 / 15 / 8"></div><div class="pixgrid__pixel" id="e5525b99-fa60-4ee3-8777-044065ee9e21" style="background-color: #81531EFF; grid-area: 14 / 8 / 15 / 12"></div><div class="pixgrid__pixel" id="8c448467-9a4b-433f-9d1a-a91554882cac" style="background-color: #E6C153FF; grid-area: 14 / 12 / 15 / 13"></div><div class="pixgrid__pixel" id="f8db9173-c3bd-4305-ad09-a30c4f220162" style="background-color: #81531EFF; grid-area: 14 / 13 / 15 / 14"></div><div class="pixgrid__pixel" id="d34669e2-6b3a-43a5-8063-a326f8322a7d" style="background-color: #81531EFF; grid-area: 15 / 4 / 16 / 5"></div><div class="pixgrid__pixel" id="689d98a6-69c6-45e4-a5f0-9ed6a788fda0" style="background-color: #E6C153FF; grid-area: 15 / 5 / 16 / 7"></div><div class="pixgrid__pixel" id="692eadab-7613-4487-92ea-351bf058c557" style="background-color: #81531EFF; grid-area: 15 / 7 / 16 / 11"></div><div class="pixgrid__pixel" id="1238396d-b404-47b4-9354-0387e5f515b9" style="background-color: #E6C153FF; grid-area: 15 / 11 / 16 / 12"></div><div class="pixgrid__pixel" id="2313d18c-316c-4eb9-826a-3afce1c53e3d" style="background-color: #81531EFF; grid-area: 15 / 12 / 16 / 13"></div><div class="pixgrid__pixel" id="5e48d6e8-864c-4f13-addc-f78901a78fa4" style="background-color: #81531EFF; grid-area: 16 / 5 / 17 / 7"></div><div class="pixgrid__pixel" id="56063ded-5d60-4ab8-84bf-3ca7b4c635de" style="background-color: #81531EFF; grid-area: 16 / 10 / 17 / 12"></div></div>
    
      <div class="pixgrid" style="display: grid; grid-template-columns: repeat(
        15, 
        20px); grid-template-rows: repeat(
        16, 
        20px);">
        <div class="pixgrid__pixel" id="d76f44e8-bb27-4740-a7e9-bafd1d2b7eb0" style="background-color: black; grid-area: 1 / 3 / 2 / 6"></div><div class="pixgrid__pixel" id="d184b385-b91b-4a12-8a0c-366efc385bbc" style="background-color: black; grid-area: 2 / 3 / 3 / 5"></div><div class="pixgrid__pixel" id="e8c7f9f0-5186-47ec-bb8f-af73b5e08aec" style="background-color: #F3E63AFF; grid-area: 2 / 5 / 3 / 6"></div><div class="pixgrid__pixel" id="9766fe00-545e-4846-bebe-adb4a5312ea8" style="background-color: #81531EFF; grid-area: 2 / 6 / 3 / 12"></div><div class="pixgrid__pixel" id="a9257d88-0a71-4e6d-9dc1-f9ac4e2d84a4" style="background-color: black; grid-area: 3 / 4 / 4 / 5"></div><div class="pixgrid__pixel" id="99aeec76-d362-41dd-a894-6149c08f437d" style="background-color: #F3E63AFF; grid-area: 3 / 5 / 4 / 7"></div><div class="pixgrid__pixel" id="956d85ca-76ef-49f1-997b-793130e73bdb" style="background-color: #81531EFF; grid-area: 3 / 7 / 4 / 8"></div><div class="pixgrid__pixel" id="13b93f47-bb83-4c5e-a796-a61deb1be23e" style="background-color: #F8F18FFF; grid-area: 3 / 8 / 4 / 12"></div><div class="pixgrid__pixel" id="a08215e4-3c86-43af-9148-e5dc02019bbd" style="background-color: #81531EFF; grid-area: 3 / 12 / 4 / 13"></div><div class="pixgrid__pixel" id="2346ad8e-06a4-497d-865e-fe5f16e9be9e" style="background-color: #81531EFF; grid-area: 4 / 5 / 5 / 6"></div><div class="pixgrid__pixel" id="be2f374b-97e8-47a9-801b-41186ca86109" style="background-color: #F3E63AFF; grid-area: 4 / 6 / 5 / 11"></div><div class="pixgrid__pixel" id="b764a650-c764-4082-8644-8755fc74f20d" style="background-color: #F8F18FFF; grid-area: 4 / 11 / 5 / 13"></div><div class="pixgrid__pixel" id="d8ab1756-d72e-4e9c-a5c8-1e9f4ad9c66d" style="background-color: #81531EFF; grid-area: 4 / 13 / 5 / 14"></div><div class="pixgrid__pixel" id="6acc446d-eb04-428c-a739-54dc8e957923" style="background-color: #81531EFF; grid-area: 5 / 2 / 6 / 3"></div><div class="pixgrid__pixel" id="5aee9dbf-c6bd-414b-98e9-576c686447b5" style="background-color: #81531EFF; grid-area: 5 / 5 / 6 / 7"></div><div class="pixgrid__pixel" id="d653200f-9c1a-4ff3-b9cc-ea97be0e310f" style="background-color: #F3E63AFF; grid-area: 5 / 7 / 6 / 13"></div><div class="pixgrid__pixel" id="a12ea6ab-80f3-4ee6-a8a4-67eed84e2487" style="background-color: #81531EFF; grid-area: 5 / 13 / 6 / 14"></div><div class="pixgrid__pixel" id="4a898d53-453d-4d7a-8e00-15a96ef5dd5f" style="background-color: #81531EFF; grid-area: 6 / 1 / 7 / 2"></div><div class="pixgrid__pixel" id="f71a296d-d8ac-4af3-b5f9-647d02a3de89" style="background-color: #E6C153FF; grid-area: 6 / 2 / 7 / 3"></div><div class="pixgrid__pixel" id="cef962e6-c1b9-4c76-bed7-c19899457bb2" style="background-color: #81531EFF; grid-area: 6 / 3 / 7 / 4"></div><div class="pixgrid__pixel" id="2edb2491-1566-420e-9e7d-ca39d65b6ba4" style="background-color: #81531EFF; grid-area: 6 / 5 / 7 / 6"></div><div class="pixgrid__pixel" id="3026c2e0-d472-4a17-a844-5cb796351ad1" style="background-color: #E6C153FF; grid-area: 6 / 6 / 7 / 7"></div><div class="pixgrid__pixel" id="2afe0130-fce9-42d6-ae3f-6db2ab30bcb7" style="background-color: #F3E63AFF; grid-area: 6 / 7 / 7 / 8"></div><div class="pixgrid__pixel" id="719ae56a-3b3e-42d9-aa5e-d09f75641e35" style="background-color: red; grid-area: 6 / 8 / 7 / 10"></div><div class="pixgrid__pixel" id="4a03d814-b12d-4e44-b977-d0eebbb24fea" style="background-color: #F3E63AFF; grid-area: 6 / 10 / 7 / 11"></div><div class="pixgrid__pixel" id="0dad27c1-6585-4b20-be80-5413abb5f458" style="background-color: black; grid-area: 6 / 11 / 7 / 12"></div><div class="pixgrid__pixel" id="caea30cc-6f16-4ef7-977d-9f738220f711" style="background-color: #F3E63AFF; grid-area: 6 / 12 / 7 / 14"></div><div class="pixgrid__pixel" id="b4a8e48d-b980-4f5e-befe-0078398ebfce" style="background-color: #81531EFF; grid-area: 6 / 14 / 7 / 15"></div><div class="pixgrid__pixel" id="86e1e1ca-a0ce-4e53-af5d-ca0132f8caf4" style="background-color: #81531EFF; grid-area: 7 / 1 / 8 / 2"></div><div class="pixgrid__pixel" id="dfcbf4d9-5ede-44c3-bf5c-249523635538" style="background-color: #E6C153FF; grid-area: 7 / 2 / 8 / 3"></div><div class="pixgrid__pixel" id="0eabacd0-0f67-4a13-adba-ea658be939da" style="background-color: #81531EFF; grid-area: 7 / 3 / 8 / 4"></div><div class="pixgrid__pixel" id="a51a7c03-4dee-41bb-b56e-84f0e80a0175" style="background-color: #81531EFF; grid-area: 7 / 5 / 8 / 6"></div><div class="pixgrid__pixel" id="b24e597b-a853-4847-8514-e4bee1db900b" style="background-color: #E6C153FF; grid-area: 7 / 6 / 8 / 8"></div><div class="pixgrid__pixel" id="7b90b723-f231-4c4b-ab43-fba29cc63d9a" style="background-color: red; grid-area: 7 / 8 / 8 / 10"></div><div class="pixgrid__pixel" id="fc8080a9-d350-4ae0-91c2-b33d4393a3af" style="background-color: #E6C153FF; grid-area: 7 / 10 / 8 / 11"></div><div class="pixgrid__pixel" id="ca3be1e7-a946-480f-b9d8-8016d7882ec7" style="background-color: black; grid-area: 7 / 11 / 8 / 12"></div><div class="pixgrid__pixel" id="5ce88bb7-bf6d-4ef8-9246-537d7e29a2c3" style="background-color: #E6C153FF; grid-area: 7 / 12 / 8 / 14"></div><div class="pixgrid__pixel" id="c31a39ae-bc3b-415d-8a94-7a1eb401eb0c" style="background-color: #81531EFF; grid-area: 7 / 14 / 8 / 15"></div><div class="pixgrid__pixel" id="a7dc34ae-1c4c-44c4-8878-3da86802ac95" style="background-color: #81531EFF; grid-area: 8 / 1 / 9 / 2"></div><div class="pixgrid__pixel" id="4d3b48fa-ba78-4692-abde-abe77d1f4eef" style="background-color: #E6C153FF; grid-area: 8 / 2 / 9 / 4"></div><div class="pixgrid__pixel" id="c0fd44a9-8360-4002-bd30-7be7d8d8d8a4" style="background-color: #81531EFF; grid-area: 8 / 4 / 9 / 6"></div><div class="pixgrid__pixel" id="90841411-a003-41d7-aff1-574a2fca0c98" style="background-color: #E6C153FF; grid-area: 8 / 6 / 9 / 14"></div><div class="pixgrid__pixel" id="165e51bf-77f5-429f-86dc-c9a5e07831ab" style="background-color: #81531EFF; grid-area: 8 / 14 / 9 / 15"></div><div class="pixgrid__pixel" id="16e3ca1a-a42e-471f-9efa-536f35c1dac8" style="background-color: #81531EFF; grid-area: 9 / 1 / 10 / 2"></div><div class="pixgrid__pixel" id="617d3cfb-4ddb-4079-9ba3-bb6b77873f24" style="background-color: #E6C153FF; grid-area: 9 / 2 / 10 / 4"></div><div class="pixgrid__pixel" id="d892c33e-6ab5-4d38-ba55-bb47637b2e36" style="background-color: #81531EFF; grid-area: 9 / 4 / 10 / 5"></div><div class="pixgrid__pixel" id="ef190613-e298-498b-bb19-e401171a6012" style="background-color: #81531EFF; grid-area: 9 / 6 / 10 / 7"></div><div class="pixgrid__pixel" id="cc7cf003-14c0-4413-810a-d7016a444ca3" style="background-color: #C5953FFF; grid-area: 9 / 7 / 10 / 8"></div><div class="pixgrid__pixel" id="e9dc63aa-aebb-4354-8a86-9c1e621f1f86" style="background-color: #E6C153FF; grid-area: 9 / 8 / 10 / 11"></div><div class="pixgrid__pixel" id="f67723a4-91a6-4137-98d4-02c140e387b5" style="background-color: #C5953FFF; grid-area: 9 / 11 / 10 / 12"></div><div class="pixgrid__pixel" id="6a36f4dc-c301-4e02-ba14-c56f93b1bf59" style="background-color: #81531EFF; grid-area: 9 / 12 / 10 / 14"></div><div class="pixgrid__pixel" id="36366f44-657e-410a-b26e-ea6e82b5390c" style="background-color: #81531EFF; grid-area: 10 / 1 / 11 / 2"></div><div class="pixgrid__pixel" id="c6b17a46-3912-4c1f-9743-728657492f50" style="background-color: #E6C153FF; grid-area: 10 / 2 / 11 / 4"></div><div class="pixgrid__pixel" id="5068c80c-9f39-4c5f-9eba-aeea58e7ad48" style="background-color: #AA7242FF; grid-area: 10 / 4 / 11 / 5"></div><div class="pixgrid__pixel" id="0a03d26b-5d71-4c3a-a5c9-b8f7d4245b1f" style="background-color: #81531EFF; grid-area: 10 / 5 / 11 / 6"></div><div class="pixgrid__pixel" id="5a159f7a-4d23-4e73-b221-eb037a6e7b17" style="background-color: #E6C153FF; grid-area: 10 / 6 / 11 / 12"></div><div class="pixgrid__pixel" id="e7912ec9-b9cc-43ee-8ddf-0312b01d2730" style="background-color: #81531EFF; grid-area: 10 / 12 / 11 / 13"></div><div class="pixgrid__pixel" id="2481e408-d95f-44ba-8252-9141367856e5" style="background-color: #81531EFF; grid-area: 11 / 1 / 12 / 2"></div><div class="pixgrid__pixel" id="6b13c662-5b88-4464-9ab5-31f05b23841e" style="background-color: #E6C153FF; grid-area: 11 / 2 / 12 / 3"></div><div class="pixgrid__pixel" id="bec0af36-d3a9-4cc5-9b62-19be1f2c4d3b" style="background-color: #AA7242FF; grid-area: 11 / 3 / 12 / 5"></div><div class="pixgrid__pixel" id="fbcba1e7-74ff-4631-a509-199bce8589ff" style="background-color: #81531EFF; grid-area: 11 / 5 / 12 / 6"></div><div class="pixgrid__pixel" id="1cb75a6b-232e-491c-9abb-1d7b4fa61d84" style="background-color: #A77425FF; grid-area: 11 / 6 / 12 / 7"></div><div class="pixgrid__pixel" id="3811aea1-86f0-4121-b197-44b2c765e362" style="background-color: #E6C153FF; grid-area: 11 / 7 / 12 / 9"></div><div class="pixgrid__pixel" id="75d7c79f-cd10-4c39-8778-e981e969b012" style="background-color: #F3E63AFF; grid-area: 11 / 9 / 12 / 10"></div><div class="pixgrid__pixel" id="d301209a-e747-4f21-99b4-899d94db3e68" style="background-color: #81531EFF; grid-area: 11 / 10 / 12 / 11"></div><div class="pixgrid__pixel" id="c3c758b5-aac9-4f13-8ea5-e9793df10f52" style="background-color: #E6C153FF; grid-area: 11 / 11 / 12 / 13"></div><div class="pixgrid__pixel" id="3ba502b3-4c60-4c57-8255-15327cbadfd1" style="background-color: #81531EFF; grid-area: 11 / 13 / 12 / 14"></div><div class="pixgrid__pixel" id="1f64c8e3-8809-4e05-949a-5a74e203aab1" style="background-color: #81531EFF; grid-area: 12 / 2 / 13 / 3"></div><div class="pixgrid__pixel" id="009635fb-a139-4a28-a039-8d3e23bcacce" style="background-color: #AA7242FF; grid-area: 12 / 3 / 13 / 5"></div><div class="pixgrid__pixel" id="5f4c6b2c-95cc-487d-b3b3-d8ddd398720a" style="background-color: #81531EFF; grid-area: 12 / 5 / 13 / 6"></div><div class="pixgrid__pixel" id="4955e7b9-9943-44d0-89d8-91ff7ac922ed" style="background-color: #E6C153FF; grid-area: 12 / 6 / 13 / 9"></div><div class="pixgrid__pixel" id="63750fee-5ac0-437d-ad01-ffa1f8cf6bb0" style="background-color: #81531EFF; grid-area: 12 / 9 / 13 / 11"></div><div class="pixgrid__pixel" id="f399c739-1806-4963-bfbd-a7b8c2d21ec1" style="background-color: #E6C153FF; grid-area: 12 / 11 / 13 / 13"></div><div class="pixgrid__pixel" id="678380df-b94d-42c8-a4dd-5ce188c10e05" style="background-color: #81531EFF; grid-area: 12 / 13 / 13 / 14"></div><div class="pixgrid__pixel" id="d10ba51b-31c6-4dda-b8d3-111993dab666" style="background-color: #81531EFF; grid-area: 13 / 3 / 14 / 4"></div><div class="pixgrid__pixel" id="71229c54-483d-40c1-b61f-88054a8e0756" style="background-color: #AA7242FF; grid-area: 13 / 4 / 14 / 5"></div><div class="pixgrid__pixel" id="e4c52378-d4fb-4604-bdf5-65b003830e5d" style="background-color: #81531EFF; grid-area: 13 / 5 / 14 / 6"></div><div class="pixgrid__pixel" id="eb5f6c0a-3b4a-4443-9494-19ae34477ff6" style="background-color: #A77425FF; grid-area: 13 / 6 / 14 / 7"></div><div class="pixgrid__pixel" id="85afcfaa-9e13-439d-8bc1-b84ef418c336" style="background-color: #E6C153FF; grid-area: 13 / 7 / 14 / 13"></div><div class="pixgrid__pixel" id="816ea388-6d3f-4dab-b57d-9789202642dd" style="background-color: #81531EFF; grid-area: 13 / 13 / 14 / 14"></div><div class="pixgrid__pixel" id="c76fa280-5114-43c8-b20a-e839a56e259e" style="background-color: #81531EFF; grid-area: 14 / 4 / 15 / 6"></div><div class="pixgrid__pixel" id="9e4f5c8c-2cd8-4e5e-aa25-3bbb6e518fbc" style="background-color: #E6C153FF; grid-area: 14 / 6 / 15 / 9"></div><div class="pixgrid__pixel" id="18af9725-f62d-44d1-9004-48b994aebfb8" style="background-color: #81531EFF; grid-area: 14 / 9 / 15 / 11"></div><div class="pixgrid__pixel" id="45233be7-4d50-43fb-ae81-b1437f9b62e2" style="background-color: #E6C153FF; grid-area: 14 / 11 / 15 / 12"></div><div class="pixgrid__pixel" id="8c448467-9a4b-433f-9d1a-a91554882cac" style="background-color: #81531EFF; grid-area: 14 / 12 / 15 / 13"></div><div class="pixgrid__pixel" id="689d98a6-69c6-45e4-a5f0-9ed6a788fda0" style="background-color: #81531EFF; grid-area: 15 / 5 / 16 / 8"></div><div class="pixgrid__pixel" id="f4c157e1-aee6-47d0-8fe4-f3bf9d57e8d4" style="background-color: #E6C153FF; grid-area: 15 / 8 / 16 / 11"></div><div class="pixgrid__pixel" id="1238396d-b404-47b4-9354-0387e5f515b9" style="background-color: #81531EFF; grid-area: 15 / 11 / 16 / 12"></div><div class="pixgrid__pixel" id="fa126595-20d3-4c8a-8531-6f8d7c406247" style="background-color: #81531EFF; grid-area: 16 / 8 / 17 / 11"></div></div>
    </div></div>
              
            
!

CSS

              
                @keyframes sprite{
  0% {margin-top: -0px;}
  25% {margin-top: -320px;}
  50% {margin-top: -640px;}
  75% {margin-top: -960px;}
  100% {margin-top: -960px;}
}

.pixel-grid-animation{
  overflow: hidden;
  height: 320px;
  width: 320px;
} 
.pixel-grid-animation .pixel-grid-wrapper{
  animation: sprite 1s steps(1) infinite;
}
              
            
!

JS

              
                
              
            
!
999px

Console