tutorial
Every tool, every shortcut, every workflow trick. pixgel is designed to feel utilitarian and minimal — most things have a single keystroke. Five minutes here will make you fast.
1. the canvas
pixgel uses an infinite canvas. There's no fixed art-board. Draw anywhere; the editor remembers the bounds of your filled cells. Zoom from 5% (tiny overview) to 20000% (single-cell editing) and the rendering stays crisp at every step.
- Two-finger drag (trackpad) → pan
- Pinch → zoom toward the cursor
- Ctrl/⌘ + scroll → zoom (same as pinch)
- Alt/⌘ + drag, middle-click, or right-click → pan from any tool
- Press 0 → reset view
- Minimap (bottom right) → click to jump, drag the viewport rectangle to scrub
2. tools
| tool | shortcut | what it does |
|---|---|---|
| Pen | P / B | Sets cells to the active colour. Drag for lines (Bresenham-stable). |
| Eraser | E | Removes cells. |
| Fill | G | Flood-fill connected region of matching cells (or matching emptiness). |
| Rect fill | R | Marquee. Drag a rectangle, release to fill every cell inside with the active colour. |
| Rect erase | ⇧R | Same marquee, but erases. |
| Eyedropper | I | Pick the colour under the cursor into the palette. |
| Pan | H / Space | Explicit pan tool. Useful on touchscreens. |
3. blend
The slider in the right sidebar controls how much each pixel blends into its neighbours.
- 0% — sharp squares. Classic pixel art.
- ~25% — softened corners. Modern app-icon feel.
- 50% — fully rounded droplets. Isolated cells become circles; adjacent cells form pills; diagonals form pinched bridges.
Use [ and ] to nudge the blend live while drawing.
4. colours
The palette starts with eight defaults. Click the + tile to open a
colour picker, or type a hex code in the hex input directly below the palette.
Picked colours stay around for the session.
5. share by URL
Click share in the header. pixgel encodes the entire drawing into a tiny URL fragment and copies it to your clipboard. Send that URL to anyone — they open the link and your drawing loads instantly. No accounts, no servers, no cloud storage. The drawing is in the link itself.
Under the hood: each cell becomes one byte, the grid is compressed with
deflate-raw, the result is base64-url-encoded into the URL hash.
Small drawings produce tiny URLs (often < 400 characters).
6. export to SVG
Press ⌘E or click export svg. The export dialog offers:
- Dimensions — exact pixel width and height. Aspect-locked by default; click the lock to break.
- Blend — override the blend amount just for export. Render sharp pixels even if you authored at 50%.
- Padding — extra space around the drawing, measured in cells.
- Background — none (transparent), white, black, or any custom hex.
- Preview — exactly what your downloaded file will look like.
Exported SVGs are clean, single-file, and use shape-rendering="geometricPrecision".
They scale to any size without aliasing. Drop them into Figma, Sketch, your
web stylesheet, an Illustrator artboard, or a print job.
7. undo / redo
⌘Z undo, ⌘⇧Z or ⌘Y redo. Each draw stroke, flood fill, or marquee operation is a single history step.
8. complete shortcut reference
| action | shortcut |
|---|---|
| Pen | P or B |
| Eraser | E |
| Fill | G |
| Rect fill | R |
| Rect erase | ⇧R |
| Eyedropper | I |
| Pan | H or Space |
| Zoom | scroll / pinch |
| Reset view | 0 |
| Blend − | [ |
| Blend + | ] |
| Undo | ⌘Z |
| Redo | ⌘⇧Z or ⌘Y |
| Export SVG | ⌘E |
9. tips and tricks
- Use diagonals. The signature pixgel look comes from two cells touching at a corner — they pinch together like ferrofluid drops. Try drawing letters or icons that lean on diagonal contact.
- Blend live. Sketch sharp, then crank blend to 50% to see your art melt. Most drawings look surprisingly different at each end.
- Export big. Even tiny grids export to crisp 4096×4096 SVGs since the output is vector. Great for print or hi-DPI display.
- Share early, share often. Share URLs are deterministic — same drawing always produces the same URL. Drop one in Slack or a tweet.
frequently asked
Is pixgel free?
Yes. No signup, no ads, no tracking. Your drawing never leaves your browser unless you click share.
Does pixgel work offline?
Once the page is loaded, yes — everything runs locally. No backend.
Can I use pixgel art commercially?
Yes. You own everything you draw.
What's the difference between pixgel and a regular pixel art editor?
Pixel art editors (Aseprite, Piskel, Pixilart) render every cell as a sharp square. pixgel renders the same cells with rounded convex corners and concave inner curves, so your drawing reads as a continuous shape — like liquid mercury — while remaining authored on a discrete grid.
What's the difference between pixgel and a vector drawing tool?
Vector tools (Figma, Illustrator, Inkscape) give you full bezier freedom but no grid constraints. pixgel constrains you to a pixel grid, then upgrades the rendering to vector quality. Best of both worlds for icons and glyphs.