#Muscle highlighter

Anatomical body maps - male and female, front and back - with muscles heat-shaded on a 1–10 intensity scale. One package, shared by a React Native app and a web app.

Open the interactive playground Getting started

Four body diagrams with muscles shaded from green through amber to red

import { MuscleMap } from "@gravn/muscle-highlighter/native"; // or /web

<MuscleMap
  sex="female"
  view="front"
  intensities={{ CHE: 9, DEL: 7, TRI: 4, ABS: 2 }}
  colors={{ 1: "#22c55e", 5: "#eab308", 10: "#ef4444" }}
  onMusclePress={({ region, level }) => console.log(region, level)}
/>;

#The one idea

You pass muscle codes, not shapes. The package owns the geometry, decides which region draws each code, and merges collisions. That indirection is the whole design, and it is why a caller never has to know that PEC has no path of its own while CHE does.

Two consequences fall out of it:

You can pass any of the 49 codes and something sensible happens, even for muscles no diagram can physically draw.
The artwork can improve - a region subdivided, a new muscle given its own path - without a single line changing at any call site.

#What's in the box


4 diagrams	Male and female, front and back
23 drawn regions	Muscles with their own geometry
26 aliased codes	Resolved onto the region that renders them
Per-side geometry	Left and right are separate paths, so imbalances render for free
OKLCH ramp	Any number of colour anchors, interpolated perceptually
Two renderers	`react-native-svg` and DOM SVG, one shared component

#Where to go next

Getting started - install it, render the first body, wire up the bundlers.
Muscle codes - the catalogue, the alias model, and why five muscles can never be drawn.
Intensity and colour - anchors, OKLCH, and feeding the map from real workout data.
API reference - every export.
Artwork - where the geometry came from, and how to improve it.