About

Pixel art operates on a constrained grid where each cell maps to exactly one color value. Errors in sprite design compound at scale: a single misplaced pixel in a 16×16 tile becomes 4 misplaced pixels at 2× zoom and 16 at 4×. This editor implements Bresenham's line algorithm for sub-pixel accuracy and iterative BFS flood fill to prevent stack overflow on grids up to 64×64. Export produces clean SVG with one <rect> per opaque pixel or a semantic HTML grid. Note: PNG export rasterizes at the canvas resolution. For print work above 300 DPI, use the SVG output.

Formulas

Bresenham's line algorithm determines which pixels to illuminate between two endpoints on the grid. Given start point (x₀, y₀) and end point (x₁, y₁):

dx = |x₁ − x₀|

dy = −|y₁ − y₀|

err = dx + dy

At each step, the error term err determines whether to advance in x, y, or both. The algorithm runs in O(max(dx, |dy|)) time with zero floating-point operations.

Flood fill uses iterative breadth-first search. A queue holds coordinate pairs. For each dequeued pixel, if its color matches the target color and differs from the replacement color, it is painted and its 4 cardinal neighbors are enqueued. Worst case fills W × H pixels in O(W ⋅ H) time.

Where W = grid width in pixels, H = grid height in pixels, dx = horizontal distance, dy = vertical distance, err = accumulated error term.

Reference Data

Grid Size	Total Pixels	Common Use	SVG File Size (approx.)	Recommended Palette
8×8	64	Micro icons, favicons	2 - 4 KB	4 colors
16×16	256	Game sprites, emoji	8 - 15 KB	8 - 16 colors
24×24	576	UI icons, avatars	15 - 30 KB	16 colors
32×32	1024	RPG sprites, tiles	25 - 55 KB	16 - 32 colors
48×48	2304	Detailed characters	50 - 120 KB	32 colors
64×64	4096	Portraits, scenes	100 - 250 KB	32 - 64 colors
Classic Palettes
Game Boy	4 shades of green		#0f380f, #306230, #8bac0f, #9bbc0f
NES	54 colors (hardware)		6-bit RGB, 4 palettes per sprite
CGA	4 colors per mode		Palette 0: black, cyan, magenta, white
PICO-8	16 fixed colors		Modern retro standard
Commodore 64	16 colors		Fixed hardware palette
Sega Master	64 colors (6-bit)		Up to 32 on screen

Frequently Asked Questions

SVG encodes each opaque pixel as a separate XML element with attributes for position, size, and fill color. A fully filled 64×64 grid produces 4096 elements. PNG uses DEFLATE compression on raster data, which is far more compact for dense images. Use SVG when you need infinite scalability (logos, print). Use PNG for web display where file size matters.

This implementation uses 4-connected fill (cardinal directions only: up, down, left, right). Diagonal pixels are not considered neighbors. This matches the behavior of classic pixel art tools and prevents color from "leaking" through single-pixel diagonal gaps that serve as visual boundaries in sprite art.

Transparent pixels (alpha = 0) are exported as grid cells with no background-color set, inheriting the parent container's background. If you need a specific background, wrap the exported HTML in a container with your desired background color. The CSS Grid structure preserves exact pixel positioning regardless of transparency.

Yes. Each pixel is a vector element. The SVG scales to any resolution without interpolation artifacts. However, for pixel art, you should apply CSS "image-rendering: pixelated" (or 'crisp-edges') to the containing element to prevent browser anti-aliasing that would blur the crisp edges at non-integer scale factors.

For a grid of width W, painting pixel at column x simultaneously paints column (W − 1 − x) in the same row. This produces vertical axis symmetry. The operation is applied at draw time before the pixel is committed to the grid buffer, ensuring undo captures both pixels as a single action.

The editor stores up to 50 full grid snapshots. Each snapshot for a 64×64 grid consumes 4096 × 4 = 16384 bytes (16 KB). At 50 snapshots, that is approximately 800 KB of memory. This limit prevents browser tab memory exhaustion while providing sufficient undo depth for most editing sessions.