fly-svg-maker

An interactive, browser-based NeuroMechFly pose editor and SVG maker. Orbit the fruit-fly model, drag a body part to pose it (inverse kinematics) or use the joint-angle sliders, then download the result as a vector SVG in the flyplotlib silhouette style.

▶ Open the editor

Everything runs in your browser — forward kinematics, inverse kinematics and the silhouette SVG export are all done in plain JavaScript (fk.js, ik.js, svg-export.js); Three.js only draws the live WebGL preview. There is no Python and no server at runtime.

How it works

The app is a thin consumer of assets/model.json and the binary STL meshes under assets/meshes/. Those are the only link to flyplotlib: they are baked once from flyplotlib's vendored NeuroMechFly data (kinematic tree, rest transforms, the actuated "biological" DOF set, neutral pose, colors) and committed here, so the site deploys as pure static files. fk.js is a direct port of flyplotlib.neuromechfly._segment_transforms, and the page logs an FK self-test on load to confirm it reproduces the Python reference to ~1e-6.

Run it locally

It is a static site — serve the repo root with any static file server:

python -m http.server 8000
# then open http://localhost:8000/

Maintainer tasks

These need the dev tooling (uv sync installs flyplotlib + Playwright):

# Regenerate assets/model.json + meshes from the current flyplotlib model.
uv run python scripts/build_editor_assets.py

# Headless smoke test (FK self-test, a slider edit, IK convergence, SVG export).
uv run playwright install chromium
uv run python scripts/e2e_check.py

Attribution & licensing

• App code: MIT (see LICENSE).
• NeuroMechFly body meshes and rigging in assets/ are vendored from flygym (Apache-2.0); see assets/NOTICE. NeuroMechFly v2: Wang-Chen et al. (2024), Nature Methods.
• Leg joint-angle limits are from NeLy-EPFL/sequential-inverse-kinematics (Apache-2.0).
• Vendored JS libraries (Three.js, polygon-clipping) — see vendor/ATTRIBUTION.txt.