Pixel Drawing Grid
Home
Snippets
Pixel Drawing Grid
HTML
CSS
JS
<div class="grid"></div>
body{ margin:0; height:100vh; display:flex; justify-content:center; align-items:center; background:#020617; } .grid{ display:grid; grid-template-columns:repeat(10,15px); gap:2px; } .pixel{ width:15px; height:15px; background:#0f172a; transition:0.2s; }
const grid=document.querySelector(".grid"); for(let i=0;i<100;i++){ const pixel=document.createElement("div"); pixel.className="pixel"; pixel.addEventListener("mouseenter",()=>{ const color=`hsl(${Math.random()*360},100%,60%)`; pixel.style.background=color; }); grid.appendChild(pixel); }
Ad #1
Ad #2
Scroll to Top