Fork of Muscles

100%

Fork of Muscles

✓ Published0🌍 Public

Last edited May 3, 2021

Created on May 3, 2021

Forked from Muscles

A humanlike muscle diagram rendered as layered SVG paths visualizes a fitness tracker concept. Black silhouettes contrast with grey-filled regions to distinguish muscle groups, sourced from an Army Combat Fitness Test figure. The paths define precise anatomical shapes, while the project's intention is to show recently "hit" muscles that fade over time, guiding future workouts. The raw SVG path data and README outline this interactive training visualization idea.

AI-generated description

Initial explorations of a muscle diagram SVG found at https://www.army.mil/acft/ .

The idea is to build a fitness app that lets you "hit" certain muscle groups, then visualize what muscle groups you "hit" recently. They will fade over time, so you can check what muscles you're best off "hitting" next!

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Muscles

This visualization adapts an SVG muscle diagram from the Army Combat Fitness Test to track which muscle groups have been recently exercised. It shows a front-view body with highlighted regions representing activity, designed for a fitness app where workouts target specific muscles and visualizations fade over time. The code loads existing SVG paths from the original diagram, recolors them to black, and appends them to the page. All rendering uses raw SVG elements and inline path data, with no external libraries or JavaScript APIs beyond standard HTML document manipulation.

Aabigailwall

91% match

Loading thumbnail…

Fork of Muscles

This interactive fitness visualization presents a human muscle diagram derived from an SVG found on the Army Combat Fitness Test website, with the goal of tracking recently worked muscle groups. Users can select muscles to "hit" them, and those selections fade over time to reveal which areas are best targeted next. The example renders its static SVG paths directly using the `d3.select` API, while the fading effect would rely on `transition.attrTween` to manipulate opacity. The original SVG paths are embedded in the HTML, providing the anatomical base for the application.

AAdan Rodriguez

90% match

Loading thumbnail…

Muscles

This visualization displays a human anatomy diagram with muscle groups highlighted, showing a fitness tracking interface concept. The SVG rendering uses vector paths from an Army Combat Fitness Test resource to delineate individual muscles on the body. Filled black shapes delineate the primary muscle groups, while a lighter gray fill indicates secondary areas. The code contains raw SVG path data with embedded coordinate commands, suggesting an exploration into how different muscle regions might be visually selected and tracked for workout intensity over time, though no interactive functionality is yet implemented.

CCurran Kelleher

88% match

Loading thumbnail…

Fork of SVG Fundamentals

This example displays a large, intricate SVG path depicting an abstract, organic form, likely a map or creature shape, composed of numerous curved segments. The path data defines a complex silhouette with many internal details, rendered as a solid black shape on a white background within a 1000x1000 viewport. The rendering relies solely on the SVG `path` element and its `d` attribute, using the inherent styling of SVG within an HTML page. The source code is a static SVG fork of a tutorial, with no additional JavaScript libraries like D3.js involved.

KKamen Yin

67% match

Loading thumbnail…

Lifting Log v6

This visualization plots personal exercise activities over time as a dot matrix, showing which muscles were worked on each day for the past 24 days. Black circles represent executed workouts, while white circles with black outlines indicate planned exercises. The horizontal axis shows dates, and the vertical axis groups activities by muscle category, with dashed lines highlighting gaps since each muscle was last exercised. Built with D3 v6, it uses scalePoint and scaleTime for axes, group for data aggregation, and SVG circles and lines for rendering.

CCurran Kelleher

67% match

Loading thumbnail…

Lifting Log v7

This interactive exercise log visualizes the user's gym activity over the past 24 days, plotting each workout as a circle on a grid of dates and muscle groups. Planned workouts appear as hollow circles, while executed ones are filled, with black lines connecting each muscle's last session to the present to highlight recovery gaps. The chart uses D3 v6 scales and axes for the timeline and a hierarchical tree layout to group muscles into activity categories. The data comes from `data.csv`, and the view updates automatically based on the latest entry.

CCurran Kelleher

65% match

Loading thumbnail…

Fork test

This example displays a set of static geometric shapes composed of paths and rectangles rendered as SVG. The visualization uses plain HTML, CSS, and JavaScript, with CSS transitions applied to rectangles that change color and stroke width on hover. The layout shows a large outlined container with smaller filled blocks in orange, green, gray, and blue, using SVG elements like `<path>` and `<rect>` directly in the markup. It demonstrates basic SVG styling and interactivity without any external data or charting libraries.

Zzaioris

65% match

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates layered SVG path strokes on a solid orange background, creating a geometric composition of angular line work. Each path element is rendered without fill, except one inner path that uses yellow fill, while all strokes appear in yellow with a consistent width of five pixels. The paths are defined using SVG’s `d` attribute with absolute and relative commands like `M`, `l`, and `L`, producing a series of intersecting diagonal and horizontal lines that suggest depth or motion. The example relies on basic SVG markup embedded directly in an HTML document, with CSS styling applied to the `path` elements.

Ccachetetanger

64% match