This is Masamune. He's an SNES sprite drawn in pure CSS. To draw your own SNES, NES or any other sort of pixel art, use the CSS pixel art creator below. To see my current collection of SNES themed CSS, click here.
1Pixels used here to mean a single square on the grid, not literal pixels. 1 "grid pixel" === 10x10 real pixels.
1Min/Max width: 30/512. Min/Max height: 30/478
2Accepts hex, rgb, rgba, hsl, hsla, keywords (e.g. black).
Current color. Valid.
Current color. Invalid. Last valid color still active.
.foobar-container { width: 1em; height: 1em; } .foobar { width: 1em; height: 1em; }
<div class="foobar-container"> <div class="foobar"></div> </div>
Initializes the grid.
Optional Parameters: width {number of literal pixels}, height {number of literal pixels}.
If no arguments are passed in, the grid will attempt to fill in the width of the parent container and dynamically set the height based on the screen size.
Clears any drawing on the grid leaving only the grid.
Resizes the width of the grid based on the input parameter.
Required Parameter: width {number of literal pixels}.
Resizes the height of the grid based on the input parameter.
Required Parameter: height {number of literal pixels}.
Draws in a pixel at a specific (x, y) coordinate.
Required Parameters: x {number in scaled pixels1}, y {number in scaled pixels1}, color {string color code2}.
Batches the pixelGrid.color() method by taking in a JSON message. See the sidebar for the allowable format.
Required Parameter: JSON {JSON}.
var zero = { "name": "zero", "width": "", "height": "", "colors": { "black": "#000000", "white": "#ffffff", "darkRed": "#740000", "red": "#aa0000", "lightRed": "#ff0000", "lightGrey": "#bbbbbb", "grey": "#555555", "lightBlue": "#55aaff", "blue": "#0080ff", "orange": "#ff7700", "skin": "#ffbb80", "yellow": "#ffff00", "lightGreen": "#55d200", "green": "#358300" }, "coordinates": [ {"x": 16, "y": 0, "color": "black"}, {"x": 15, "y": 1, "color": "black"}, {"x": 16, "y": 1, "color": "black"}, {"x": 20, "y": 1, "color": "black"}, {"x": 14, "y": 2, "color": "black"}, {"x": 15, "y": 2, "color": "darkRed"}, {"x": 16, "y": 2, "color": "black"} ] };
Image
Zero
Robot Ness
Starman
Female Mage