Build a single-file HTML creative design tool for generating debris-filled structural compositions.
The tool should run locally in the browser with no build step. Use a minimal premium black-and-white UI. The main canvas should let the user upload one structural SVG shape, then fill that shape with many uploaded debris assets such as SVG, PNG, JPG, JPEG, or WEBP files.
Core features:
- Single HTML file with embedded CSS and JavaScript.
- Minimal sidebar controls and a large canvas preview.
- Canvas ratio presets: 2:1, 1:2, 4:3, 3:4, A landscape, A portrait, 16:9, 9:16, and 1:1.
- Canvas width, height, and zoom controls.
- Upload one structural SVG. This SVG defines the placement/mask area.
- Upload or drag-and-drop many debris files.
- Provide default demo structure and default debris so the page is not blank before uploads.
- Place debris throughout the structure using a packing/grid target system.
- Debris should stay positioned inside the structural shape.
- Add an optional “clip edges to structure” toggle:
- Off: debris pieces are shown in full, even if their edges extend outside the structure.
- On: debris is clipped exactly to the SVG mask.
- Do not visibly draw or tint the structural SVG over the composition.
- Background controls:
- Solid color
- Uploaded image
- Multi-point gradient
- User can add/remove more than three gradient color points.
- Debris controls:
- Size
- Size randomization
- Percentage of large pieces
- Large piece scale
- Angle
- Random angle spread
- Spacing
- Overlap
- Animation controls:
- Animation on/off
- Fill mode: gravity, middle injection, pop
- Gravity strength
- Gravity angle
- Shuffle debris on/off
- Shuffle speed
- The shuffle animation should periodically retarget debris positions within the structure.
- The app should be stable and responsive. Background changes should update immediately.
- Avoid unnecessary complex physics if it makes the tool brittle. Prefer a reliable visual packing/masking approach.
Implementation notes:
- Use canvas rendering.
- Render debris to an offscreen canvas.
- Render the structural SVG to an offscreen alpha mask.
- Composite debris with the mask only when edge clipping is enabled.
- Keep all UI and logic in one HTML file.