Mario Fireball Pixelart

HTML
<div class="mario1-fireball"></div>
SCSS
$r: #d82800; $s: #ffa542; $o: #fc9838; $w: #fcd8a8; body { background-color: #27282E; } .mario1-fireball { margin: 40px auto; padding: 0; width: 10px; height: 10px; box-shadow: /* Row 1 */ -50px 0 0 $w, -40px 0 0 $w, -30px 0 0 $w, -20px 0 0 $w, -10px 0 0 $w, /* Row 2 */ -70px 10px 0 $w, -60px 10px 0 $w, -50px 10px 0 $w, -40px 10px 0 $w, -30px 10px 0 $w, -20px 10px 0 $w, -10px 10px 0 $o, /* Row 3 */ -80px 20px 0 $w, -70px 20px 0 $w, -60px 20px 0 $w, -50px 20px 0 $w, -40px 20px 0 $w, -30px 20px 0 $w, -20px 20px 0 $o, -10px 20px 0 $o, /* Row 4 */ -80px 30px 0 $w, -70px 30px 0 $w, -60px 30px 0 $w, -50px 30px 0 $w, -40px 30px 0 $w, -30px 30px 0 $w, -20px 30px 0 $w, -10px 30px 0 $w, 0 30px 0 $w, 10px 30px 0 $w, 20px 30px 0 $w, /* Row 5 */ -80px 40px 0 $r, -70px 40px 0 $r, -60px 40px 0 $r, -50px 40px 0 $o, -40px 40px 0 $o, -30px 40px 0 $r, -20px 40px 0 $o, -10px 40px 0 $o, 0 40px 0 $o, /* Row 6 */ -90px 50px 0 $r, -80px 50px 0 $o, -70px 50px 0 $o, -60px 50px 0 $r, -50px 50px 0 $o, -40px 50px 0 $o, -30px 50px 0 $r, -20px 50px 0 $r, -10px 50px 0 $o, 0 50px 0 $o, 10px 50px 0 $o, 20px 50px 0 $o, /* Row 7 */ -90px 60px 0 $r, -80px 60px 0 $o, -70px 60px 0 $o, -60px 60px 0 $r, -50px 60px 0 $r, -40px 60px 0 $o, -30px 60px 0 $o, -20px 60px 0 $o, -10px 60px 0 $o, 0 60px 0 $o, 10px 60px 0 $o, 20px 60px 0 $o, 30px 60px 0 $o, /* Row 8 */ -100px 70px 0 $r, -90px 70px 0 $r, -80px 70px 0 $o, -70px 70px 0 $o, -60px 70px 0 $r, -50px 70px 0 $r, -40px 70px 0 $o, -30px 70px 0 $o, -20px 70px 0 $o, -10px 70px 0 $r, 0 70px 0 $o, 10px 70px 0 $o, 20px 70px 0 $o, 30px 70px 0 $o, /* Row 9 */ -100px 80px 0 $r, -90px 80px 0 $r, -80px 80px 0 $o, -70px 80px 0 $o, -60px 80px 0 $o, -50px 80px 0 $o, -40px 80px 0 $o, -30px 80px 0 $r, -20px 80px 0 $r, -10px 80px 0 $r, 0 80px 0 $r, 10px 80px 0 $r, 20px 80px 0 $r, /* Row 10 */ -90px 90px 0 $r, -80px 90px 0 $r, -70px 90px 0 $o, -60px 90px 0 $o, -50px 90px 0 $o, -40px 90px 0 $o, -30px 90px 0 $o, -20px 90px 0 $r, -10px 90px 0 $r, 0 90px 0 $o, 10px 90px 0 $o, 20px 90px 0 $o, 30px 90px 0 $o, /* Row 11 */ -70px 100px 0 $r, -60px 100px 0 $o, -50px 100px 0 $o, -40px 100px 0 $r, -30px 100px 0 $r, -20px 100px 0 $r, -10px 100px 0 $o, 0 100px 0 $o, 10px 100px 0 $o, 20px 100px 0 $o, /* Row 12 */ -80px 110px 0 $r, -70px 110px 0 $w, -60px 110px 0 $w, -50px 110px 0 $r, -40px 110px 0 $r, -30px 110px 0 $r, -20px 110px 0 $r, -10px 110px 0 $r, 0 110px 0 $o, 10px 110px 0 $o, /* Row 13 */ -90px 120px 0 $r, -80px 120px 0 $w, -70px 120px 0 $w, -60px 120px 0 $r, -50px 120px 0 $r, -40px 120px 0 $r, -30px 120px 0 $r, -20px 120px 0 $r, -10px 120px 0 $r, 0 120px 0 $o, /* Row 14 */ -90px 130px 0 $r, -80px 130px 0 $w, -70px 130px 0 $r, -60px 130px 0 $r, -50px 130px 0 $r, -40px 130px 0 $r, -30px 130px 0 $r, -20px 130px 0 $r, /* Row 15 */ -90px 140px 0 $r, -80px 140px 0 $w, -70px 140px 0 $r, -60px 140px 0 $r, -50px 140px 0 $r, -40px 140px 0 $r, -30px 140px 0 $r, -20px 140px 0 $w, -10px 140px 0 $r, /* Row 16 */ -90px 150px 0 $r, -80px 150px 0 $w, -70px 150px 0 $r, -60px 150px 0 $r, -50px 150px 0 $r, -40px 150px 0 $r, -30px 150px 0 $w, -20px 150px 0 $w, -10px 150px 0 $r, 150px 150px 0 $r, /* Row 17 */ -80px 160px 0 $w, -70px 160px 0 $w, -60px 160px 0 $r, -50px 160px 0 $r, -40px 160px 0 $w, -30px 160px 0 $w, -20px 160px 0 $w, -10px 160px 0 $r, 0 160px 0 $r, 110px 160px 0 $r, 120px 160px 0 $r, 130px 160px 0 $r, 170px 160px 0 $r, /* Row 18 */ -80px 170px 0 $w, -70px 170px 0 $w, -60px 170px 0 $w, -50px 170px 0 $w, -40px 170px 0 $w, -30px 170px 0 $w, -20px 170px 0 $w, -10px 170px 0 $w, 0 170px 0 $r, 100px 170px 0 $r, 110px 170px 0 $r, 120px 170px 0 $o, 130px 170px 0 $r, 140px 170px 0 $r, 160px 170px 0 $r, /* Row 19 */ -80px 180px 0 $w, -70px 180px 0 $w, -60px 180px 0 $w, -50px 180px 0 $w, -40px 180px 0 $w, -30px 180px 0 $s, -20px 180px 0 $w, -10px 180px 0 $w, 0 180px 0 $w, 100px 180px 0 $r, 110px 180px 0 $o, 120px 180px 0 $o, 130px 180px 0 $o, 140px 180px 0 $r, 170px 180px 0 $r, /* Row 20 */ -90px 190px 0 $w, -80px 190px 0 $w, -70px 190px 0 $w, -60px 190px 0 $w, -50px 190px 0 $w, -40px 190px 0 $w, -30px 190px 0 $w, -20px 190px 0 $w, -10px 190px 0 $w, 0 190px 0 $w, 100px 190px 0 $r, 110px 190px 0 $o, 120px 190px 0 $w, 130px 190px 0 $o, 140px 190px 0 $r, 150px 190px 0 $r, 160px 190px 0 $r, 170px 190px 0 $r, /* Row 21 */ -90px 200px 0 $w, -80px 200px 0 $w, -70px 200px 0 $w, -60px 200px 0 $w, -50px 200px 0 $w, -40px 200px 0 $w, -30px 200px 0 $w, -20px 200px 0 $w, -10px 200px 0 $w, 0 200px 0 $w, 100px 200px 0 $r, 110px 200px 0 $r, 120px 200px 0 $o, 130px 200px 0 $w, 140px 200px 0 $o, 150px 200px 0 $o, 160px 200px 0 $r, /* Row 22 */ -90px 210px 0 $w, -80px 210px 0 $w, -70px 210px 0 $w, -60px 210px 0 $w, -50px 210px 0 $w, -40px 210px 0 $w, -30px 210px 0 $w, -20px 210px 0 $w, -10px 210px 0 $w, 0 210px 0 $w, 110px 210px 0 $r, 120px 210px 0 $r, 130px 210px 0 $o, 140px 210px 0 $o, 150px 210px 0 $r, 160px 210px 0 $r, /* Row 23 */ -120px 220px 0 $r, -110px 220px 0 $r, -100px 220px 0 $r, -90px 220px 0 $r, -80px 220px 0 $w, -70px 220px 0 $w, -60px 220px 0 $w, -50px 220px 0 $w, -40px 220px 0 $w, -30px 220px 0 $w, -20px 220px 0 $w, -10px 220px 0 $r, 0 220px 0 $w, 10px 220px 0 $w, 120px 220px 0 $r, 130px 220px 0 $r, 140px 220px 0 $r, 150px 220px 0 $r, /* Row 24 */ -120px 230px 0 $r, -110px 230px 0 $r, -100px 230px 0 $r, -90px 230px 0 $r, -80px 230px 0 $w, -70px 230px 0 $w, -60px 230px 0 $w, -50px 230px 0 $w, -40px 230px 0 $w, -30px 230px 0 $r, -20px 230px 0 $r, -10px 230px 0 $w, 0 230px 0 $w, 10px 230px 0 $w, /* Row 25 */ -120px 240px 0 $r, -110px 240px 0 $r, -100px 240px 0 $r, -90px 240px 0 $r, -80px 240px 0 $w, -70px 240px 0 $w, -60px 240px 0 $w, -50px 240px 0 $w, -40px 240px 0 $r, -30px 240px 0 $w, -20px 240px 0 $w, -10px 240px 0 $w, 0 240px 0 $w, /* Row 26 */ -120px 250px 0 $r, -110px 250px 0 $r, -100px 250px 0 $r, -90px 250px 0 $r, -80px 250px 0 $w, -70px 250px 0 $w, -60px 250px 0 $w, -30px 250px 0 $w, -20px 250px 0 $w, -10px 250px 0 $w, 0 250px 0 $w, /* Row 27 */ -120px 260px 0 $r, -110px 260px 0 $r, -100px 260px 0 $r, -90px 260px 0 $r, -30px 260px 0 $r, -20px 260px 0 $r, -10px 260px 0 $r, 0 260px 0 $r, /* Row 28 */ -120px 270px 0 $r, -110px 270px 0 $r, -30px 270px 0 $r, -20px 270px 0 $r, -10px 270px 0 $r, 0 270px 0 $r, /* Row 29 */ -120px 280px 0 $r, -30px 280px 0 $r, -20px 280px 0 $r, -10px 280px 0 $r, 0 280px 0 $r, 10px 280px 0 $r, 20px 280px 0 $r, /* Row 30 */ -30px 290px 0 $r, -20px 290px 0 $r, -10px 290px 0 $r, 0 290px 0 $r, 10px 290px 0 $r, 20px 290px 0 $r, ; }
JAVASCRIPT
Expand for more options Login