Interactive Body Measurements Diagram

[mlouielu]

Live demo: Seamly2D Interactive Body Measurements Diagram

This diagram is based on:

• File:Seamly2d-body-measurements 20230112.svg - Seamly
• Fix lines for J1, J3, N2, and N3 · mlouielu/seamly2d-interactive-body-measurements-diagram@aaa7f95 · GitHub

What you can do with this interactive diagram:

Hover/click highlighting between measurement definitions and diagram paths

Hover on definition:

Hover on path:

Click-to-copy measurement variable names on definitions & paths

[mlouielu]

Add mobile layout & search

Focus/Zoom by section

List of section measurements name

• Click to focus & highlight
• Double click to copy variable name

Search by name

Share with anchor will focus/highlight the path

• Shoulder Tip to Shoulder Tip Half Front (I05): Seamly2D Interactive Body Measurements Diagram
• Bustpoint to Shoulder Tip (J07): Seamly2D Interactive Body Measurements Diagram

[Sue]

Fabulous! Is this ready for use?

[mlouielu]

Yes, it is. Both the HTML wrapper version and standalone SVG is ready to use.

They are all based on this updated static SVG, where I updated:

• Fix jointed lines: Fix lines for J1, J3, N2, and N3 · mlouielu/seamly2d-interactive-body-measurements-diagram@aaa7f95 · GitHub
• Add transparent bounding box for each section: Add transparent bounding box for each section · mlouielu/seamly2d-interactive-body-measurements-diagram@078b40c · GitHub

I think the static SVG is also ready to update in File:Seamly2d-body-measurements 20230112.svg - Seamly, just need to change the attribution year (it’s still -2023).

[Sue]

@mlouielu Please feel free to create a PR to push the new .svg to the repo. Let us know if you have any problems.