Add a Running exercise with an animated stride figure

Stance and flight keyframes with single-frame foot pins for the strikes, forward lean, opposite-arm drive, and daylight under both feet in flight — distinct from Cardio's high-knee march, which stays as is. Claude-Session: https://claude.ai/code/session_01PKptrgbx74peTwHGRxBojv
2026-07-12 00:37:23 -04:00
parent 79e75a9127
commit d04526826c
11 changed files with 298 additions and 6 deletions
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" fill="none">
+  <title>Running</title>
+  <defs>
+    <linearGradient id="grad-leg_l-0" gradientUnits="userSpaceOnUse" x1="164.1" y1="91.6" x2="152.1" y2="121.0"><stop offset="0" stop-color="#47b0a5"/><stop offset="1" stop-color="#86cfc5"/></linearGradient>
+    <linearGradient id="grad-leg_r-1" gradientUnits="userSpaceOnUse" x1="166.8" y1="122.9" x2="160.7" y2="149.9"><stop offset="0" stop-color="#0d9488"/><stop offset="1" stop-color="#53b6ab"/></linearGradient>
+    <linearGradient id="grad-leg_r-2" gradientUnits="userSpaceOnUse" x1="160.7" y1="149.9" x2="168.2" y2="151.5"><stop offset="0" stop-color="#53b6ab"/><stop offset="1" stop-color="#59b9ae"/></linearGradient>
+  </defs>
+  <path d="M 108.5 157.5 L 210.8 157.5 L 210.8 150.2 L 108.5 150.2 Z" fill="none" stroke="#b9bec9" stroke-width="2.1" stroke-linejoin="round"/>
+  <g id="leg_l">
+    <path d="M 164.1 91.6 L 152.1 121.0" stroke="url(#grad-leg_l-0)" stroke-width="3.68145" stroke-linecap="round"/>
+    <path d="M 152.1 121.0 L 125.8 111.6" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 125.8 111.6 L 121.0 117.6" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="leg_r">
+    <path d="M 160.0 92.0 L 166.8 122.9" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 166.8 122.9 L 160.7 149.9" stroke="url(#grad-leg_r-1)" stroke-width="3.99764" stroke-linecap="round"/>
+    <path d="M 160.7 149.9 L 168.2 151.5" stroke="url(#grad-leg_r-2)" stroke-width="3.77767" stroke-linecap="round"/>
+  </g>
+  <g id="arm_l">
+    <path d="M 174.5 33.4 L 183.3 52.2" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 183.3 52.2 L 202.4 43.4" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <path id="girdle" d="M 174.5 33.4 L 170.3 33.4 L 170.3 34.7" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="pelvisBar" d="M 164.1 91.6 L 160.0 91.1 L 160.0 92.0" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="spine" d="M 160.0 91.1 Q 165.3 61.6 170.3 33.4" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="arm_r">
+    <path d="M 170.3 34.7 L 156.8 50.6" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 156.8 50.6 L 172.9 63.9" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+  </g>
+  <circle id="head" cx="173.7" cy="20.0" r="7.0" fill="white" stroke="#3a3f4b" stroke-width="4.2"/>
+  <line id="nose" x1="180.7" y1="20.7" x2="185.6" y2="21.2" stroke="#3a3f4b" stroke-width="2.8" stroke-linecap="round"/>
+  <g font-family="-apple-system, Helvetica, sans-serif" font-size="11" fill="#6b7180">
+    <line x1="224" y1="16" x2="238" y2="16" stroke="#3a3f4b" stroke-width="4" stroke-linecap="round"/>
+    <text x="243" y="20">near</text>
+    <line x1="273" y1="16" x2="287" y2="16" stroke="#a9afba" stroke-width="4" stroke-linecap="round"/>
+    <text x="292" y="20">far</text>
+  </g>
+</svg>
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" fill="none">
+  <title>Running</title>
+  <defs>
+    <linearGradient id="grad-leg_l-0" gradientUnits="userSpaceOnUse" x1="164.1" y1="89.5" x2="187.3" y2="111.6"><stop offset="0" stop-color="#4cb3a8"/><stop offset="1" stop-color="#86cfc5"/></linearGradient>
+    <linearGradient id="grad-leg_r-2" gradientUnits="userSpaceOnUse" x1="120.7" y1="125.5" x2="121.7" y2="133.0"><stop offset="0" stop-color="#0d9488"/><stop offset="1" stop-color="#219e92"/></linearGradient>
+  </defs>
+  <path d="M 108.5 157.4 L 210.8 157.4 L 210.8 150.2 L 108.5 150.2 Z" fill="none" stroke="#b9bec9" stroke-width="2.1" stroke-linejoin="round"/>
+  <g id="leg_l">
+    <path d="M 164.1 89.5 L 187.3 111.6" stroke="url(#grad-leg_l-0)" stroke-width="3.66725" stroke-linecap="round"/>
+    <path d="M 187.3 111.6 L 164.6 127.8" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 164.6 127.8 L 168.6 134.3" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="arm_l">
+    <path d="M 174.5 31.3 L 172.3 51.9" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 172.3 51.9 L 191.1 61.0" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="leg_r">
+    <path d="M 160.0 89.9 L 147.9 119.3" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 147.9 119.3 L 120.7 125.5" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 120.7 125.5 L 121.7 133.0" stroke="url(#grad-leg_r-2)" stroke-width="4.1411" stroke-linecap="round"/>
+  </g>
+  <path id="girdle" d="M 174.5 31.3 L 170.3 31.3 L 170.3 32.6" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="pelvisBar" d="M 164.1 89.5 L 160.0 89.0 L 160.0 89.9" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="spine" d="M 160.0 89.0 Q 165.3 59.5 170.3 31.3" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="arm_r">
+    <path d="M 170.3 32.6 L 168.1 53.2" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 168.1 53.2 L 187.0 62.3" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+  </g>
+  <circle id="head" cx="173.7" cy="17.9" r="7.0" fill="white" stroke="#3a3f4b" stroke-width="4.2"/>
+  <line id="nose" x1="180.7" y1="18.6" x2="185.6" y2="19.1" stroke="#3a3f4b" stroke-width="2.8" stroke-linecap="round"/>
+  <g font-family="-apple-system, Helvetica, sans-serif" font-size="11" fill="#6b7180">
+    <line x1="224" y1="16" x2="238" y2="16" stroke="#3a3f4b" stroke-width="4" stroke-linecap="round"/>
+    <text x="243" y="20">near</text>
+    <line x1="273" y1="16" x2="287" y2="16" stroke="#a9afba" stroke-width="4" stroke-linecap="round"/>
+    <text x="292" y="20">far</text>
+  </g>
+</svg>
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" fill="none">
+  <title>Running</title>
+  <defs>
+    <linearGradient id="grad-leg_l-0" gradientUnits="userSpaceOnUse" x1="164.1" y1="91.6" x2="170.2" y2="122.8"><stop offset="0" stop-color="#48b1a6"/><stop offset="1" stop-color="#86cfc5"/></linearGradient>
+  </defs>
+  <path d="M 108.5 157.5 L 210.8 157.5 L 210.8 150.2 L 108.5 150.2 Z" fill="none" stroke="#b9bec9" stroke-width="2.1" stroke-linejoin="round"/>
+  <g id="leg_l">
+    <path d="M 164.1 91.6 L 170.2 122.8" stroke="url(#grad-leg_l-0)" stroke-width="3.67976" stroke-linecap="round"/>
+    <path d="M 170.2 122.8 L 159.3 148.2" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 159.3 148.2 L 166.4 151.1" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="arm_l">
+    <path d="M 174.5 33.4 L 161.0 49.3" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 161.0 49.3 L 177.1 62.6" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="leg_r">
+    <path d="M 160.0 92.0 L 147.9 121.4" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 147.9 121.4 L 121.6 111.9" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 121.6 111.9 L 116.9 117.9" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+  </g>
+  <path id="girdle" d="M 174.5 33.4 L 170.3 33.4 L 170.3 34.7" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="pelvisBar" d="M 164.1 91.6 L 160.0 91.1 L 160.0 92.0" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="spine" d="M 160.0 91.1 Q 165.3 61.6 170.3 33.4" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="arm_r">
+    <path d="M 170.3 34.7 L 179.2 53.5" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 179.2 53.5 L 198.2 44.7" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+  </g>
+  <circle id="head" cx="173.7" cy="20.0" r="7.0" fill="white" stroke="#3a3f4b" stroke-width="4.2"/>
+  <line id="nose" x1="180.7" y1="20.7" x2="185.6" y2="21.2" stroke="#3a3f4b" stroke-width="2.8" stroke-linecap="round"/>
+  <g font-family="-apple-system, Helvetica, sans-serif" font-size="11" fill="#6b7180">
+    <line x1="224" y1="16" x2="238" y2="16" stroke="#3a3f4b" stroke-width="4" stroke-linecap="round"/>
+    <text x="243" y="20">near</text>
+    <line x1="273" y1="16" x2="287" y2="16" stroke="#a9afba" stroke-width="4" stroke-linecap="round"/>
+    <text x="292" y="20">far</text>
+  </g>
+</svg>
@@ -0,0 +1,38 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 180" fill="none">
+  <title>Running</title>
+  <defs>
+    <linearGradient id="grad-leg_l-0" gradientUnits="userSpaceOnUse" x1="164.1" y1="89.5" x2="152.1" y2="118.9"><stop offset="0" stop-color="#4cb3a8"/><stop offset="1" stop-color="#86cfc5"/></linearGradient>
+    <linearGradient id="grad-leg_r-1" gradientUnits="userSpaceOnUse" x1="183.2" y1="111.9" x2="160.5" y2="128.1"><stop offset="0" stop-color="#0d9488"/><stop offset="1" stop-color="#0f9589"/></linearGradient>
+    <linearGradient id="grad-leg_r-2" gradientUnits="userSpaceOnUse" x1="160.5" y1="128.1" x2="164.5" y2="134.6"><stop offset="0" stop-color="#0f9589"/><stop offset="1" stop-color="#27a195"/></linearGradient>
+  </defs>
+  <path d="M 108.5 157.4 L 210.8 157.4 L 210.8 150.2 L 108.5 150.2 Z" fill="none" stroke="#b9bec9" stroke-width="2.1" stroke-linejoin="round"/>
+  <g id="leg_l">
+    <path d="M 164.1 89.5 L 152.1 118.9" stroke="url(#grad-leg_l-0)" stroke-width="3.66725" stroke-linecap="round"/>
+    <path d="M 152.1 118.9 L 124.8 125.1" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 124.8 125.1 L 125.9 132.6" stroke="#86cfc5" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="arm_l">
+    <path d="M 174.5 31.3 L 172.3 51.9" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+    <path d="M 172.3 51.9 L 191.1 61.0" stroke="#a9afba" stroke-width="3.5" stroke-linecap="round"/>
+  </g>
+  <g id="leg_r">
+    <path d="M 160.0 89.9 L 183.2 111.9" stroke="#0d9488" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 183.2 111.9 L 160.5 128.1" stroke="url(#grad-leg_r-1)" stroke-width="4.19308" stroke-linecap="round"/>
+    <path d="M 160.5 128.1 L 164.5 134.6" stroke="url(#grad-leg_r-2)" stroke-width="4.11689" stroke-linecap="round"/>
+  </g>
+  <path id="girdle" d="M 174.5 31.3 L 170.3 31.3 L 170.3 32.6" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="pelvisBar" d="M 164.1 89.5 L 160.0 89.0 L 160.0 89.9" stroke="#3a3f4b" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path id="spine" d="M 160.0 89.0 Q 165.3 59.5 170.3 31.3" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round" stroke-linejoin="round"/>
+  <g id="arm_r">
+    <path d="M 170.3 32.6 L 168.1 53.2" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+    <path d="M 168.1 53.2 L 187.0 62.3" stroke="#3a3f4b" stroke-width="4.2" stroke-linecap="round"/>
+  </g>
+  <circle id="head" cx="173.7" cy="17.9" r="7.0" fill="white" stroke="#3a3f4b" stroke-width="4.2"/>
+  <line id="nose" x1="180.7" y1="18.6" x2="185.6" y2="19.1" stroke="#3a3f4b" stroke-width="2.8" stroke-linecap="round"/>
+  <g font-family="-apple-system, Helvetica, sans-serif" font-size="11" fill="#6b7180">
+    <line x1="224" y1="16" x2="238" y2="16" stroke="#3a3f4b" stroke-width="4" stroke-linecap="round"/>
+    <text x="243" y="20">near</text>
+    <line x1="273" y1="16" x2="287" y2="16" stroke="#a9afba" stroke-width="4" stroke-linecap="round"/>
+    <text x="292" y="20">far</text>
+  </g>
+</svg>