When I set out to build an Interactive Yoga Poses App, I had virtually no prior experience working with complex animations and only the most basic knowledge of SVG.

This project, however, was about more than just web development. Over the last few nights, I’ve been testing and integrating with the Antigravity platform—using it to rescue a graveyard of abandoned, hard-to-maintain old projects and migrating them into a brand-new Apps section on this website. I wanted to bring their essence back to life.

Building this animated yoga app became my way to deeply test the Antigravity platform. I am leveraging my curiosity to learn more about the things I feel attracted to—mixing my personal interests in yoga and math with code. I am absolutely loving the new capabilities and interactions this process is unlocking.

If you’ve ever tried to animate a vector graphic from scratch, you know the struggle: limbs detach, elbows bend the wrong way, and figures often look like they’re breaking apart mid-animation. But the solution here wasn’t a heavy JavaScript animation library. It was pure geometry.

By anchoring an SVG figure correctly and relying entirely on CSS rotational variables, you can create a skeleton that inherently understands its own joints.

The Coordinate System

To understand how the stickman moves, we first need to understand the SVG coordinate system. Unlike standard Cartesian math where the Y-axis goes up, in an SVG, the Y-axis goes down.

This flips our intuition for rotation. If you point a line straight down (the positive Y-axis) and apply a positive rotation in CSS (transform: rotate(90deg)), it rotates clockwise—meaning the line swings out to the left (the negative X-axis).

Understanding this flipped rotational space is critical when positioning our figure for complex asymmetrical poses.

Structuring the Joints

Instead of redrawing paths for every pose, our stickman is built once using <g> (group) elements. Every limb acts as a nested pendulum.

For example, the arm is built like this:

<g id="upper-arm" style="transform-origin: shoulder-X shoulder-Y; transform: rotate(var(--upper-arm-rot))">
    <line ... /> <!-- The actual bicep -->
    <g id="lower-arm" style="transform-origin: elbow-X elbow-Y; transform: rotate(var(--lower-arm-rot))">
        <line ... /> <!-- The forearm -->
    </g>
</g>

By placing the transform-origin exactly at the joints, the lower-arm automatically travels wherever the upper-arm goes. When the --upper-arm-rot changes, the entire nested group swings flawlessly.

Try it out here:

The Trigonometry of Chaturanga

Defining a standing pose is easy—you keep everything roughly at zero. But what happens when the body needs to hover entirely above the floor, supported only by the hands and toes?

In Chaturanga Dandasana (Low Plank), the body must form a perfectly rigid incline plane. Since the toes rest on the floor (Y = 368) but the arms are bent 90 degrees at the elbow, the shoulders hover slightly lower than the hips.

Here is the math I used to solve this so the figure perfectly connected its toes and hands to the mat:

1. Calculate the Vertical Drop: The upper arm goes straight back, and the lower arm goes straight down. Since each arm segment is 60px, the vertical drop from Shoulder to Hand is exactly 60px.
2. Find the Slope: If the hands are at the floor (Y = 368), the shoulders must be exactly at Y = 368 - 60 = 308. The toes are also at the floor (Y = 368). This means the body drops 60 vertical pixels over its entire length.
3. Trig to the Rescue: The length of the Torso (100px) + the Legs (160px) creates a hypotenuse of 260px.

Because we know the opposite and the hypotenuse, we can solve for (\theta):

Taking the arcsine gives us our angle:

Because the torso points up from the hips, and the hips sit in the middle of our 260px line, we can apply this 13.34° absolute rotation directly to the Torso and Legs:

• The Torso points Right (90° from UP), tilted up by 13.34° = 76.66°.
• The Legs point Left (-90° from DOWN), tilted down by 13.34° = 76.66°.

When you apply these calculated CSS angles, the stickman seamlessly lowers itself into a geometrically flawless plank.

Math doesn’t just ensure algorithms run efficiently; it gives us the power to orchestrate beautiful physical geometry. Take a look at the final Yoga Poses application to see the full Ashtanga sequence running entirely on these trigonometric angles!