SVG Interactive Body Chart for Sports App

I need a designer / SVG illustrator to create an interactive body chart for a sports performance app .

The app is used by football/soccer players to report muscle soreness, pain, or injury after training or matches. Players will tap/click specific muscle areas on a body diagram. Each click will cycle the selected area through these states:

empty / default
yellow = soreness / fatigue
orange = pain
red = injury
back to empty

I will handle all programming myself. I only need the SVG artwork prepared correctly so that every muscle/body area can be individually targeted in code.

Required Deliverable

Create two clean SVG body charts:

Front view of the human body
Back view of the human body

The style should be similar to a modern sports body chart:

clean outline
neutral light-gray body areas
thin darker borders between muscle zones
simple and professional
no excessive anatomical detail
suitable for a mobile app
gender-neutral athletic body shape
transparent background preferred

Important SVG Requirements

Each clickable muscle/body area must be a separate SVG path or shape.

Every area must have a clear and unique id attribute so my code can detect what the player clicked.

Example:

<path id="front_left_biceps" ... />
<path id="front_right_quadriceps" ... />
<path id="back_right_hamstring" ... />

Please do not create the body as one flat image. I need individually clickable SVG regions.

The SVG should be scalable and work well on mobile screens.

States / Colors

The default SVG should use neutral colors only.

I will apply the soreness/pain/injury colors in code, but the SVG areas should be easy to recolor via CSS or JavaScript.

Suggested default styling:

fill: #F2F3F5
stroke: #2B2F33
inner muscle border stroke: #C8CDD2

The final SVG should allow this kind of CSS targeting:

#front_left_biceps {
fill: yellow;
}

Required Front View Areas

Please create individually clickable areas for the front body chart:

front_head
front_neck
front_left_shoulder
front_right_shoulder
front_left_chest
front_right_chest
front_upper_chest
front_left_biceps
front_right_biceps
front_left_forearm
front_right_forearm
front_left_wrist_hand
front_right_wrist_hand
front_upper_abs
front_middle_abs
front_lower_abs
front_left_obliques
front_right_obliques
front_pelvis_groin
front_left_quadriceps
front_right_quadriceps
front_left_adductors
front_right_adductors
front_left_outer_thigh
front_right_outer_thigh
front_left_knee
front_right_knee
front_left_shin
front_right_shin
front_left_outer_lower_leg
front_right_outer_lower_leg
front_left_ankle_foot
front_right_ankle_foot

Required Back View Areas

Please create individually clickable areas for the back body chart:

back_head
back_neck
back_left_upper_trapezius
back_right_upper_trapezius
back_left_rear_shoulder
back_right_rear_shoulder
back_left_scapula_upper_back
back_right_scapula_upper_back
back_spine_mid_back
back_left_lats
back_right_lats
back_left_triceps
back_right_triceps
back_left_elbow
back_right_elbow
back_left_forearm_extensors
back_right_forearm_extensors
back_left_wrist_hand
back_right_wrist_hand
back_left_lower_back
back_right_lower_back
back_sacrum
back_left_glute
back_right_glute
back_left_hamstrings
back_right_hamstrings
back_left_inner_hamstring_adductors
back_right_inner_hamstring_adductors
back_left_outer_thigh
back_right_outer_thigh
back_left_back_knee
back_right_back_knee
back_left_calf
back_right_calf
back_left_achilles
back_right_achilles
back_left_heel_foot
back_right_heel_foot

Technical Requirements

Please deliver:

athlos-body-front.svg
athlos-body-back.svg

Optional but appreciated:

one combined preview image showing both views side by side
a simple HTML preview where clicking each area highlights it

The SVG should be editable in Figma, Illustrator, or Inkscape.

Please keep the SVG clean:

meaningful layer/path names
no unnecessary masks or raster images
no embedded bitmap images
no random generated IDs
no copyrighted assets
all artwork must be original or fully licensed for commercial use

Usage Context

This will be used in a commercial sports technology product. The SVG will be embedded into a web/mobile app where players report muscle soreness and pain by tapping the relevant body area.

I need the output to be visually clean, mobile-friendly, and technically structured for click detection.