Website Development From Provided Design
Budget: $30 – $250 USD
I run a web app for planning LED channel‑letter signs. The user types a word (or uploads a pdf/svg) and the app must automatically place LED modules inside the
letter strokes so the acrylic face lights evenly — the same idea as bounceled.com and "LED Wizard" sign software.
I have a working first version but I need an expert to make the placement algorithm robust and high‑quality across all fonts, letters and sizes. This is a focused,
algorithmic job — not a full‑stack build.
What an LED module is
A module is a small rigid rectangle (e.g. ~70 mm long × ~16 mm wide) containing 3 LEDs in a row. It cannot bend. Modules are placed in runs along each stroke.
Input → Output
- Input: an SVG path (the glyph outline), its viewBox, the physical letter width/height in mm, the module's length & width in mm, edge clearance, and a target
density.
- Output: an array of module positions { x, y, angleDeg } in the SVG coordinate space.
What "good placement" looks like (acceptance criteria)
1. Straight strokes (stems, bars, the diagonals of A/M/Z/X): clean, parallel, evenly‑spaced runs aligned to the stroke axis. No staggering, no wobble.
2. Curves (S, O, C, bowls of a/d/e, arches of m/n): smooth runs that follow the curve's tangent.
3. No module crosses the outline — the oriented rectangle (including its corners) must stay inside the letter, with a clearance gap. Account for the "chord error"
when a rigid module sits on a curve.
4. Corners & junctions (L/T/E/Z): clean — no stray tilted module sitting in the corner; runs meet without gaps or overlaps.
5. Width‑aware fill: wide strokes get multiple parallel rows (count from local stroke width); narrow strokes get a single centred run. Modules must never be jammed
against the edge.
6. Deterministic & repeatable: the same input always yields the same output. Two identical letters in a word must render identically.
7. Per‑letter and total module counts reported.
8. Performance: must run in the browser in well under ~2 second for a short word and never block/freeze the UI.
Current state (what you'll build on)
- React 19 + TypeScript, runs entirely in the browser (canvas + SVG, no backend needed for the algorithm).
- My current "stroke‑axis" engine: rasterise the glyph → distance transform → Zhang‑Suen skeleton → trace branches → place runs along the stroke centrelines,
re‑centred to the true ridge, with width‑scaled parallel rows. It works but still has rough edges on certain corners, curves and thin strokes.
- The reference spec I'd like to follow is the "segment route": decompose the outline into straight segments and arcs, place runs along each, with proper junction
handling and curvature‑driven module length. I can share my code and a written spec.
Skills required
- Computational geometry / image processing: skeletonisation/medial axis, distance transforms, polygon offsetting, raster ↔ vector, oriented‑rectangle/polygon
collision.
- Solid TypeScript (this must integrate as a self‑contained TS module/function — no new heavy dependencies without discussion).
- Bonus: experience with sign‑making / LED Wizard / CNC toolpathing / font outline processing.
Deliverables
- A self‑contained, well‑commented TypeScript function/module matching the input/output contract above.
- It must pass a small visual test set I'll provide (e.g. MAZISI, LESLIE, an A, O, S, B, E, m) meeting the acceptance criteria.
- Short notes on how it works and any tunable parameters.
To apply
In your proposal, please
(a) confirm you've built skeleton/medial‑axis or contour‑offset placement before and briefly describe it OR at least you have overall idea, and (b) tell me how you'd keep a
rigid module from poking outside a tight curve.
- Bonus: experience with sign‑making / LED Wizard / CNC toolpathing / font outline processing.
Deliverables
- A self‑contained, well‑commented TypeScript function/module matching the input/output contract above.
- It must pass a small visual test set I'll provide (e.g. MAZISI, LESLIE, an A, O, S, B, E, m) meeting the acceptance criteria.
- Short notes on how it works and any tunable parameters.
letter strokes so the acrylic face lights evenly — the same idea as bounceled.com and "LED Wizard" sign software.
I have a working first version but I need an expert to make the placement algorithm robust and high‑quality across all fonts, letters and sizes. This is a focused,
algorithmic job — not a full‑stack build.
What an LED module is
A module is a small rigid rectangle (e.g. ~70 mm long × ~16 mm wide) containing 3 LEDs in a row. It cannot bend. Modules are placed in runs along each stroke.
Input → Output
- Input: an SVG path (the glyph outline), its viewBox, the physical letter width/height in mm, the module's length & width in mm, edge clearance, and a target
density.
- Output: an array of module positions { x, y, angleDeg } in the SVG coordinate space.
What "good placement" looks like (acceptance criteria)
1. Straight strokes (stems, bars, the diagonals of A/M/Z/X): clean, parallel, evenly‑spaced runs aligned to the stroke axis. No staggering, no wobble.
2. Curves (S, O, C, bowls of a/d/e, arches of m/n): smooth runs that follow the curve's tangent.
3. No module crosses the outline — the oriented rectangle (including its corners) must stay inside the letter, with a clearance gap. Account for the "chord error"
when a rigid module sits on a curve.
4. Corners & junctions (L/T/E/Z): clean — no stray tilted module sitting in the corner; runs meet without gaps or overlaps.
5. Width‑aware fill: wide strokes get multiple parallel rows (count from local stroke width); narrow strokes get a single centred run. Modules must never be jammed
against the edge.
6. Deterministic & repeatable: the same input always yields the same output. Two identical letters in a word must render identically.
7. Per‑letter and total module counts reported.
8. Performance: must run in the browser in well under ~2 second for a short word and never block/freeze the UI.
Current state (what you'll build on)
- React 19 + TypeScript, runs entirely in the browser (canvas + SVG, no backend needed for the algorithm).
- My current "stroke‑axis" engine: rasterise the glyph → distance transform → Zhang‑Suen skeleton → trace branches → place runs along the stroke centrelines,
re‑centred to the true ridge, with width‑scaled parallel rows. It works but still has rough edges on certain corners, curves and thin strokes.
- The reference spec I'd like to follow is the "segment route": decompose the outline into straight segments and arcs, place runs along each, with proper junction
handling and curvature‑driven module length. I can share my code and a written spec.
Skills required
- Computational geometry / image processing: skeletonisation/medial axis, distance transforms, polygon offsetting, raster ↔ vector, oriented‑rectangle/polygon
collision.
- Solid TypeScript (this must integrate as a self‑contained TS module/function — no new heavy dependencies without discussion).
- Bonus: experience with sign‑making / LED Wizard / CNC toolpathing / font outline processing.
Deliverables
- A self‑contained, well‑commented TypeScript function/module matching the input/output contract above.
- It must pass a small visual test set I'll provide (e.g. MAZISI, LESLIE, an A, O, S, B, E, m) meeting the acceptance criteria.
- Short notes on how it works and any tunable parameters.
To apply
In your proposal, please
(a) confirm you've built skeleton/medial‑axis or contour‑offset placement before and briefly describe it OR at least you have overall idea, and (b) tell me how you'd keep a
rigid module from poking outside a tight curve.
- Bonus: experience with sign‑making / LED Wizard / CNC toolpathing / font outline processing.
Deliverables
- A self‑contained, well‑commented TypeScript function/module matching the input/output contract above.
- It must pass a small visual test set I'll provide (e.g. MAZISI, LESLIE, an A, O, S, B, E, m) meeting the acceptance criteria.
- Short notes on how it works and any tunable parameters.
Related categories:
JavaScript
Website Design
HTML
Image Processing
Web Development
Frontend Development
SVG