Embedding Workouts using Web Component

Thejesh GN created muscle-map, an open-source web component that embeds SVG representations of workouts by muscle group, and released it on GitHub. The component converts a list of exercises into tagged muscle groups, applies styles within the SVG, and can be embedded on any web page via a custom HTML tag or a WordPress shortcode. The project, which includes a cleaned-up SVG based on a Wikimedia Commons drawing by OpenStax, Tomáš Kebert, and umimeto.org, is available at github.com/thejeshgn/muscle-map.

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 https://commons.wikimedia.org/w/index.php?curid=94071041 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 https://github.com/thejeshgn/muscle-map . 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 https://github.com/thejeshgn/muscle-map tag in your HTML Wednesday Workout Run Calf raise, Tibialis raise Calf raise Happy workout and happy logging.