Pixel Art of Son Goku with SCSS

Make a pixel art of Son GOKU with the power of SCSS Function !

- Powered by SCSS function

$size: 5px;

$t: transparent;
$j: #ffc40d;
$n: #333;
$g: #505050;
$g2: #bfbfbf;
$w: #fff;
$b: #0025ff;
$b2: #001180;
$o: #fe7000;
$o2: #b94c00;
$or: #ffc40d;
$r: #ff0000;
$ro: #f7af7e;


$goku: (
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $n, $n, $n, $n, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $n, $g, $g, $n, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $g, $g, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $g, $g, $n, $n, $n, $j, $j, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $g, $g, $n, $n, $j, $j, $j, $n, $n, $n, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $g, $g, $n, $n, $n, $j, $j, $n, $g, $g, $g, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $g, $g, $n, $n, $n, $j, $n, $g, $g, $g, $g, $g, $g, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $g, $g, $n, $n, $n, $n, $g, $g, $g, $g, $g, $g, $g, $g, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $n, $g, $g, $n, $n, $n, $g, $g, $g, $g, $g, $n, $n, $n, $n, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $n, $g, $g, $n, $n, $n, $g, $g, $g, $g, $g, $n, $n, $n, $n, $n, $n, $n, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $g, $g, $g, $n, $n, $n, $n, $n, $g, $g, $n, $n, $n, $n, $n, $n, $j, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $g, $g, $g, $n, $n, $n, $n, $n, $n, $n, $n, $n, $n, $n, $n, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $j, $j, $j, $n, $g, $n, $n, $n, $g, $n, $n, $n, $n, $n, $n, $n, $n, $n, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $j, $n, $n, $n, $n, $n, $g, $g, $n, $n, $g, $g, $n, $n, $n, $n, $n, $n, $n, $g, $g, $n, $n, $n, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $j, $n, $g, $g, $n, $n, $n, $g, $g, $n, $n, $ro, $n, $n, $n, $n, $n, $g, $g, $g, $g, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $j, $j, $j, $j, $n, $n, $n, $g, $g, $n, $n, $n, $n, $n, $g, $n, $n, $ro, $ro, $ro, $n, $n, $n, $n, $n, $n, $n, $n, $n, $n, $j ),
	( $t, $t, $t, $t, $j, $n, $n, $n, $g, $g, $g, $g, $n, $n, $n, $n, $n, $ro, $n, $g, $n, $ro, $ro, $ro, $ro, $n, $n, $n, $n, $n, $j, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $j, $j, $j, $n, $n, $n, $n, $n, $n, $n, $ro, $n, $n, $ro, $ro, $n, $n, $ro, $ro, $ro, $ro, $ro, $n, $n, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $j, $j, $j, $n, $n, $n, $n, $n, $ro, $ro, $n, $ro, $n, $g2, $g2, $n, $ro, $ro, $ro, $ro, $n, $n, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $j, $n, $n, $ro, $ro, $ro, $ro, $n, $g2, $w, $g, $n, $ro, $ro, $n, $j, $j, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $j, $n, $n, $ro, $ro, $ro, $ro, $ro, $ro, $ro, $ro, $ro, $n, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $n, $n, $n, $n, $ro, $ro, $ro, $ro, $n, $n, $ro, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $n, $o2, $n, $ro, $ro, $n, $n, $ro, $ro, $ro, $ro, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o2, $n, $o2, $n, $ro, $ro, $ro, $n, $n, $n, $n, $n, $o, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $b2, $b2, $o2, $n, $o, $n, $n, $ro, $ro, $ro, $ro, $ro, $ro, $n, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $b2, $b, $b, $b2, $o2, $o2, $o, $n, $n, $n, $ro, $ro, $ro, $n, $b2, $o2, $n, $j ),
	( $t, $t, $t, $t, $t, $j, $j, $j, $j, $n, $n, $b2, $b, $b, $b2, $o, $o2, $o, $n, $b2, $n, $n, $n, $b, $b2, $o2, $n, $j ),
	( $t, $t, $t, $t, $j, $j, $n, $n, $j, $n, $ro, $n, $b2, $b, $b2, $o, $o, $o, $o2, $n, $b2, $b, $b, $b, $b2, $o, $n, $j, $t, $t, $j, $j, $j ),
	( $t, $t, $t, $j, $j, $n, $o2, $ro, $n, $n, $ro, $ro, $n, $b2, $n, $o, $o2, $o, $o, $o2, $n, $b2, $b, $b2, $o2, $o2, $n, $j, $j, $j, $j, $n, $j, $j, $j ),
	( $t, $t, $j, $j, $n, $ro, $n, $o2, $ro, $n, $o2, $ro, $ro, $n, $o2, $o, $o, $n, $o2, $o, $o2, $n, $b2, $n, $o, $n, $ro, $n, $j, $j, $n, $o2, $n, $n, $j, $j ),
	( $t, $t, $j, $n, $ro, $o2, $ro, $n, $n, $ro, $o2, $ro, $o2, $n, $n, $o2, $o2, $o, $n, $o2, $o, $o, $n, $o, $o2, $n, $ro, $ro, $n, $n, $n, $ro, $o2, $ro, $n, $j ),
	( $t, $t, $j, $n, $ro, $ro, $ro, $o2, $n, $b, $ro, $ro, $n, $j, $j, $n, $o2, $o2, $o2, $n, $o2, $o2, $o, $o2, $n, $ro, $ro, $ro, $b2, $b, $n, $o2, $ro, $o2, $n, $j ),
	( $t, $t, $j, $j, $n, $ro, $o2, $ro, $o2, $b, $ro, $o2, $n, $j, $j, $j, $n, $n, $n, $n, $n, $b2, $b2, $b2, $n, $ro, $ro, $b2, $b, $n, $ro, $ro, $o2, $ro, $n, $j ),
	( $t, $t, $t, $j, $n, $ro, $ro, $b2, $b2, $b, $n, $n, $j, $j, $j, $j, $n, $b2, $b2, $b2, $b2, $b, $b, $b, $n, $n, $ro, $n, $b, $n, $ro, $ro, $ro, $n, $j, $j ),
	( $t, $t, $t, $j, $j, $n, $n, $n, $n, $n, $j, $j, $j, $t, $j, $n, $n, $n, $n, $n, $n, $b2, $b2, $b2, $n, $j, $n, $n, $n, $n, $n, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $j, $j, $j, $j, $j, $j, $j, $t, $t, $j, $j, $n, $o2, $o2, $n, $o2, $o, $n, $o2, $n, $o, $n, $j, $j, $j, $j, $j, $j, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o2, $n, $o2, $o, $o, $n, $o2, $o2, $o, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o2, $n, $o, $o, $o, $n, $o2, $o, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $o2, $o, $o2, $o, $o, $o, $n, $o2, $o, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o, $o, $o, $o, $o, $o, $n, $o2, $o, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $o2, $o2, $o, $o, $o2, $o, $o, $n, $o2, $o, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $n, $o2, $o2, $o2, $o, $o, $n, $o2, $o2, $o2, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o, $n, $n, $o, $o, $o, $n, $o2, $o2, $o2, $o, $o2, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $o2, $o, $o, $o, $o, $o, $o2, $n, $n, $o2, $o2, $o2, $n, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $n, $n, $o2, $o2, $o2, $o, $o, $o2, $n, $o2, $n, $o2, $o2, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o2, $n, $n, $o2, $o2, $o2, $n, $o2, $o2, $o, $n, $n, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $o2, $o2, $o2, $o, $o, $n, $n, $n, $n, $o2, $o, $o, $o, $o, $o, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $n, $n, $o2, $o, $o, $n, $j, $n, $o2, $o2, $o, $o, $o, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $b, $r, $b, $n, $n, $n, $j, $j, $n, $n, $n, $n, $n, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $n, $b, $r, $b, $b2, $n, $j, $j, $j, $n, $b, $b, $b2, $r, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $or, $or, $r, $or, $or, $n, $j, $t, $j, $n, $or, $or, $or, $r, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $b, $r, $b, $b2, $n, $j, $j, $t, $j, $n, $b, $b, $b, $b2, $r, $n, $j, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $b, $r, $b2, $b2, $n, $j, $t, $t, $j, $j, $n, $b, $b, $b, $b2, $r, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $n, $n, $n, $n, $n, $j, $j, $t, $t, $t, $j, $j, $n, $n, $n, $n, $n, $n, $j ),
	( $t, $t, $t, $t, $t, $t, $t, $t, $t, $j, $j, $j, $j, $j, $j, $j, $t, $t, $t, $t, $t, $j, $j, $j, $j, $j, $j, $j, $j )
);



@function pixelize($colors, $size) {
	$result: '';
	$numRows: length($colors);

	@for $rowIndex from 1 through $numRows {
		$y: ($rowIndex - 1);
		$row: nth($colors, $rowIndex);
		$numCols: length($row);

		@for $cellIndex from 1 through $numCols {
			$x: ($cellIndex - 1);
			$color: nth($row, $cellIndex);

			$sep: ',';
			@if $x == 0 and $y == 0 {
				$sep: '';
			}

			$result: $result + '#{$sep} #{$x * $size} #{$y * $size} #{$color}'
		}
	}

	$result: unquote($result);
	@return $result;
}



main {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;

	#son-goku {
		position: relative;
		width: calc( 38 * #{$size} );
		height: calc( 56 * #{$size} );
	
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: $size;
			height: $size;
			box-shadow: pixelize($goku, $size);
		}
	}
}