Vanilla JavaScript metal-profile configurator with a live SVG cross-section drawing engine.
BendForm is a browser-based configurator for sheet-metal and profile-style sections. It takes user-entered dimensions, solves the profile geometry, and renders a live technical SVG drawing with labels, bend angles, centerlines, and overall dimensions.
The current version is intentionally frameworkless. It focuses on the core drawing engine, predictable geometry behavior, and a clean repo setup that can be extended into a production quoting or fabrication workflow later.
- Live SVG cross-section preview driven by editable profile dimensions
- Parametric profile families for equal angle, unequal angle, channel, lipped channel, top hat, and Z section
- Trigonometric bend handling for non-90-degree geometry
- Automatic centering and scaling through computed SVG
viewBoxbounds - Toggleable drawing overlays for grid, centerline, segment labels, bend labels, and dimensions
- Export actions for SVG and JSON configuration snapshots
- Public-catalogue seed presets for fast demos and regression coverage
- Localhost-only Node dev server with zero framework dependencies
- Vanilla JavaScript modules
- Native SVG rendering
- Node.js for local static serving and test execution
node:testfor geometry regression testsghCLI for repository metadata and publishing workflows
git clone https://github.com/pradhankukiran/bend-form.git
cd bend-form
npm startOpen http://127.0.0.1:4173.
npm start # start the localhost-only static server
npm run dev # same as start
npm test # run geometry and rendering regressionsEach profile family exposes the dimensions and bend angles that matter for that section type. Presets seed realistic starting values, and the configurator immediately switches into a custom state when those values are edited.
Inputs are treated as outside dimensions. For each segment, the engine solves a neutral-axis centerline length using bend allowances:
centerline = outside length - (t / 2 * tan(theta_start / 2)) - (t / 2 * tan(theta_end / 2))
The centerline is then offset by thickness / 2 to form the rendered section polygon.
The viewer draws:
- profile fill and outline
- optional centerline
- segment labels
- bend labels
- overall width and height callouts
- thickness callout
- adaptive background grid
| Family | Purpose |
|---|---|
| Equal Angle | Symmetric L profiles with variable included angle |
| Unequal Angle | Asymmetric L profiles with independent legs |
| Channel | U channels with independent top and bottom bend angles |
| Lipped Channel | Cold-formed channels with lips and four bend controls |
| Top Hat | Hat sections with crown, walls, and flanges |
| Z Section | Offset Z profiles with opposing flanges |
bendform/
├── docs/ # README assets such as logo and preview
├── src/
│ ├── lib/
│ │ ├── geometry.js # vector math and polygon helpers
│ │ ├── profile-engine.js # parametric strip-section builder
│ │ ├── profiles.js # profile definitions and presets
│ │ └── render.js # SVG markup generation
│ └── main.js # UI state, events, export actions
├── tests/
│ └── profile-engine.test.js
├── index.html
├── server.mjs
└── styles.css
- The engine currently assumes sharp bends and uniform thickness within a profile.
- Invalid non-finite inputs are rejected before they reach SVG rendering.
- Self-intersecting profile results are blocked and surfaced as geometry errors instead of exporting corrupted shapes.
- Exported SVG uses inline styles from the live drawing engine; font embedding is still a future improvement.
- Bend-radius aware geometry instead of sharp-corner assumptions
- DXF or CAD-driven profile ingestion
- Manufacturing-oriented export fidelity improvements
- More preset libraries and fabrication-specific profile families
- Quote-ready metadata and BOM style output
- Hydro Standards Catalogue: https://www.hydro.com/Document/Doc/Standards%20Catalogue.pdf?docId=629095
- Judah Steel Top Hats and Steel Angles: https://judah-steel.com/products/top-hats-and-steel-angles/