Skip to content

elemarin/onionsvg

Repository files navigation

🧅 onionsvg

Peel any image into laser-cuttable, stackable SVG layers — screen-print style. Upload a picture, pick your colors, choose the stack order, and get one crisp SVG per sheet ready to cut on your laser cutter.

What it does

  • In-browser image editor — auto background removal (4-corner ΔE sampling), erase brush, and restore brush with smooth swept-capsule strokes.
  • Manual color palette — drag to reorder, click a swatch's group pill to assign it to an independent sub-stack (e.g. flames ≠ wheel).
  • Stacked or color-only modeStacked makes each sheet a cumulative silhouette so you can glue bottom-up without puzzle-fitting; Color only cuts each sheet as just its own color region for flush inlay.
  • Physical sizing — set width in millimetres; SVGs export with correct width/height in mm.
  • Registration marks — identical magenta "+" marks in every layer's corners so you can align cut sheets precisely.
  • Min-feature filter — drops paths whose bbox area is below a user-set threshold so tiny specks don't gum up the cut.
  • Per-layer + ZIP download — files named group-{G}-layer-{NN}-{hex}.svg.

Stack

  • Next.js 16 (App Router) + Tailwind v4 + shadcn/ui
  • Server pipeline: sharpimage-q (Wu quantizer) → potrace
  • Everything runs in one /api/process route — no database, no auth

Run it

npm install
npm run dev

Open http://localhost:3000.

Pipeline, briefly

upload → decode (sharp, keep alpha)
       → quantize (palette-building on opaque pixels only)
       → per palette-index group, mask = {this color ∪ every color above it}
       → potrace → SVG paths
       → compose per-layer SVG + combined preview + registration marks
       → return JSON { layers[], previewSvg, palette }

Transparent pixels (erased in the editor) are excluded from quantization and from every layer mask, so you never get a ghost "background" layer.

License

MIT.

About

Peel any image into laser-cuttable, stackable SVG layers, screen-print style. Upload, auto-remove the background, pick your colors, drag to set stack order, and group pieces into independent sub-stacks. Exports per-layer SVGs with mm sizing and registration marks. Runs entirely in a Next.js app with sharp + potrace.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors