Embedding Workouts using Web Component

I wanted a way to represent workouts by the muscle groups they activate. Most applications where you log do it. I thought it must be easy with SVG images. It wasn’t as easy. First, I had to get an image that is remake-friendly. I used this drawing by OpenStax & Tomáš Kebert & umimeto.org, from Wikimedia Commons. Cleaned it up to reduce the complexity. Then tagged each muscle group, including separating left and right muscles, in case you focus on one side.

After that, I wanted an easy way to embed it on any web page. I chose to use web components. It converts the given list of exercises into muscle groups, then applies styles to them within the SVG and embeds the SVG. I have verified it to the best of my knowledge and from available sources. It took a lot of battling with Claude to make it the way I want, that is, to make it generic and reusable. I still have to map a bunch of muscle groups, I have listed all the short comings in the readme.

Finally, I created a WordPress shortcode to queue the JavaScript and embed the component. But that’s not really required. If you have a simple static site, then you can include SVG and a JS file and use the muscle-map tag in your HTML

Wednesday Workout

Run

Calf raise, Tibialis raise

Calf raise

Happy workout and happy logging.

---