Human Muscle Anatomy

A framework-independent human muscle anatomy component with per-muscle styling.

Features

• Works in plain HTML, React, Vue, Svelte, and other frameworks.
• Male and female anatomy models.
• Per-muscle colors with optional opacity.
• Responsive SVG output.
• TypeScript support.
• No runtime dependencies.

Install

npm install @lucawahlen/human-muscle

or

pnpm add @lucawahlen/human-muscle

Use

Import the package once to register the custom element.

import "@lucawahlen/human-muscle";

Then place the tag anywhere in your app:

<human-muscle
  gender="female"
  background-color="#0b1020"
  default-muscle-color="#1f2937"
  muscle-styles='{"chest":"#ef4444","biceps":{"fill":"#f59e0b"},"triceps":{"fill":"#22c55e","opacity":0.9},"quads":"#3b82f6"}'
></human-muscle>

React / Next.js

Do not import HumanMuscleAnatomyElement as a React component. Use the custom element tag in a client component:

// app/components/muscle-chart.tsx
"use client";

import "@lucawahlen/human-muscle";

export default function MuscleChart() {
  return (
    <human-muscle
      gender="female"
      background-color="#0b1020"
      default-muscle-color="#1f2937"
      muscle-styles='{"chest":"#ef4444","biceps":{"fill":"#f59e0b"}}'
    ></human-muscle>
  );
}

// app/login/page.tsx (Server Component)
import MuscleChart from "@/app/components/muscle-chart";

export default async function LoginPage() {
  return <MuscleChart />;
}

Vue

Register once in your app entry and use the tag directly:

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import "@lucawahlen/human-muscle";

createApp(App).mount("#app");

<template>
  <human-muscle
    gender="female"
    background-color="#0b1020"
    default-muscle-color="#1f2937"
    :muscle-styles='JSON.stringify({ chest: "#ef4444", quads: { fill: "#3b82f6", opacity: 0.85 } })'
  />
</template>

Svelte

Import once in a top-level component and use the custom element:

<script lang="ts">
  import "@lucawahlen/human-muscle";

  const styles = JSON.stringify({
    chest: "#ef4444",
    biceps: { fill: "#f59e0b", opacity: 0.9 }
  });
</script>

<human-muscle
  gender="female"
  background-color="#0b1020"
  default-muscle-color="#1f2937"
  muscle-styles={styles}
/>

Options

| Attribute | Type | Default | Description | | --- | --- | --- | --- | | gender | "male" | "female" | "male" | Chooses the anatomy model. | | default-muscle-color | string | "#1f1f1f" | Fallback color for muscles without a custom style. | | background-color | string | "#000000" | Color for the outer silhouette. | | muscle-styles | JSON string | {} | Per-muscle colors and optional opacity. |

Muscle groups

chest, lats, traps, rotatorCuffs, lowerBack, frontDelts, sideDelts, rearDelts, triceps, biceps, forearms, abs, obliques, glutes, quads, hamstrings, adductors, abductors, calves, neck

Example

<human-muscle
  gender="male"
  default-muscle-color="#202020"
  muscle-styles='{"chest":"#ef4444","abs":"#22c55e","quads":{"fill":"#3b82f6","opacity":0.85}}'
></human-muscle>

License

MIT. See LICENSE.