We Keep Coding

SVG Icon getting distorted against transparent background

I am trying to display an svg icon against transparent background, however, when the transparent background is applied the svg looks like this:
ideally, I am expecting the svg icon to look like the first svg icon. One important thing to note here is that the background will dynamically be applied.
Here is the svg code:
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='white'
opacity={0.8}
></path>

The posted image with the transparent background looks like the checkered background in Photoshop. Not a real life situation.
However you are mentioning that The background is dynamic. It can be changed to any color. and this is a problem since your icon is white.
Here is a what you can do: you can use an outline filter around your icon. This way it will be visible on every background.
As an observation: 16px width and height is way too small. I would recomend at least 24px.
svg{border:solid}
<svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none">
<filter id="outline">
<feMorphology in="SourceAlpha" operator="dilate" radius=".5"/>
<feComposite in="SourceGraphic"/>
</filter>
<path id="globe" filter="url(#outline)"
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='white'
opacity="0.8"
></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="160" viewBox="0 0 16 16" fill="none" style="background:black;">
<use xlink:href="#globe" filter="url(#outline)" fill='white'opac ity="0.8"></use>
</svg>

get rid of the fill="none" inside svg tag, if you want background dynamically applied.
also you could look closer to your svg on https://yqnn.github.io/svg-path-editor/
I changed it a bit
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0.1 0.1 16 16">
<path d="M 8 0.5 C 12.1 0.5 15.5 3.9 15.5 8 C 15.5 12.1 12.1 15.5 8 15.5 C 3.9 15.5 0.5 12.1 0.5 8 C 0.5 3.9 3.9 0.5 8 0.5 Z M 10.2 11.4 H 5.8 C 6.3 13.2 7.1 14.4 8 14.4 C 8.9 14.4 9.7 13.2 10.2 11.4 H 10.2 Z M 4.6 11.4 H 2.6 C 3.3 12.5 4.4 13.4 5.7 13.9 C 5.3 13.3 4.9 12.5 4.7 11.7 L 4.6 11.4 L 4.6 11.4 Z M 13.4 11.4 H 11.4 C 11.1 12.4 10.8 13.3 10.3 13.9 C 11.5 13.5 12.6 12.6 13.3 11.6 L 13.4 11.4 V 11.4 Z M 4.3 6.5 H 1.8 L 1.8 6.5 C 1.7 7 1.6 7.5 1.6 8 C 1.6 8.8 1.8 9.6 2 10.3 H 4.4 C 4.2 9 4.2 7.7 4.3 6.5 L 4.3 6.5 Z M 10.5 6.5 H 5.5 C 5.3 7.7 5.4 9 5.6 10.3 H 10.4 C 10.6 9 10.7 7.7 10.5 6.5 Z M 14.2 6.5 H 11.7 C 11.7 7 11.8 7.5 11.8 8 C 11.8 8.8 11.7 9.5 11.6 10.3 H 14 C 14.2 9.5 14.4 8.8 14.4 8 C 14.4 7.5 14.3 7 14.2 6.5 Z M 5.7 2.1 L 5.6 2.1 C 4.1 2.7 2.9 3.9 2.2 5.4 H 4.5 C 4.7 4.1 5.1 2.9 5.7 2.1 H 5.7 Z M 8 1.6 L 7.9 1.6 C 7 1.7 6 3.2 5.6 5.4 H 10.4 C 10 3.2 9 1.7 8.1 1.6 L 8 1.6 V 1.6 Z M 10.3 2.1 L 10.4 2.2 C 10.9 3 11.3 4.1 11.5 5.4 H 13.8 C 13.2 3.9 12 2.8 10.6 2.2 L 10.3 2.1 V 2.1 Z" fill="#fff"/>
</svg>
transparent globe svg inside my button
it looks exactly as you wanted

At this scale, a shape that uses fill rather than just stroke to define the shape could give you problems because anti-aliasing might just give up.
If you don't want to recreate the shape using single strokes, then at least make it bigger and add a stroke-linejoin/round- because the shape itself isn't particularly well drawn.
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16">
<path
d="M7.99997 0.499249C12.143 0.499249 15.5015 3.85775 15.5015 8.00075C15.5015 12.143 12.143 15.5015 7.99997 15.5015C3.85697 15.5015 0.498474 12.143 0.498474 8.00075C0.498474 3.85775 3.85697 0.499249 7.99997 0.499249ZM10.2042 11.375H5.79497C6.28397 13.1855 7.13447 14.3765 7.99922 14.3765C8.86397 14.3765 9.71447 13.1855 10.2035 11.375H10.2042ZM4.63172 11.375H2.58872C3.31285 12.5337 4.38885 13.4302 5.65922 13.9332C5.26772 13.3182 4.94447 12.5487 4.70672 11.672L4.63022 11.3757L4.63172 11.375ZM13.4105 11.375H11.369C11.126 12.3762 10.775 13.25 10.3392 13.9332C11.5294 13.4625 12.5509 12.6455 13.2717 11.588L13.4105 11.3757V11.375ZM4.32047 6.5H1.80122L1.79747 6.51275C1.68111 7.00019 1.62246 7.49962 1.62272 8.00075C1.62272 8.79275 1.76747 9.551 2.03147 10.2507H4.41122C4.2301 9.00898 4.19912 7.74992 4.31897 6.50075L4.32047 6.5ZM10.5477 6.5H5.45222C5.32027 7.74899 5.35432 9.00995 5.55347 10.25H10.4465C10.6456 9.00994 10.6796 7.74899 10.5477 6.5ZM14.1987 6.5H11.6802C11.7267 6.98525 11.7515 7.48775 11.7515 8C11.7527 8.75301 11.698 9.50507 11.588 10.25H13.9677C14.2385 9.5308 14.3767 8.76849 14.3757 8C14.3757 7.48325 14.3142 6.98 14.1987 6.5ZM5.65997 2.0675L5.64272 2.0735C4.10779 2.68641 2.86957 3.86953 2.18747 5.375H4.47347C4.70897 4.061 5.11847 2.9165 5.66072 2.0675H5.65997ZM7.99997 1.62425L7.91297 1.628C6.96497 1.715 6.04697 3.2165 5.62247 5.375H10.379C9.95447 3.2225 9.04172 1.72325 8.09522 1.62875L7.99997 1.625V1.62425ZM10.34 2.06675L10.4202 2.198C10.922 3.032 11.303 4.127 11.5265 5.37575H13.8125C13.1614 3.93881 12.0025 2.793 10.5582 2.15825L10.34 2.0675V2.06675Z"
fill='grey'
opacity='0.8'
stroke="none"
stroke-linejoin="round"
></path>
</svg>

How can I animate SVG text to be "written out"

I'm trying to animate an svg as if it's being written out, like this example on Codepen.
I'm trying to understand how to do this by comparing svg elements but so far I'm not seeing much difference. I replaced the svg in the codepen with my own but it wouldn't work. Why is this? And how could I make my own SVG's (such as the one below) animate in the same fashion as on the Codepen? (Besides replacing the path id!)
<svg xmlns="http://www.w3.org/2000/svg" width="417.773" height="224.047" viewBox="0 0 417.773 224.047">
<path id="Path_35" data-name="Path 35" d="M-3.875-234.323c-1.516,0-8.928,23.415-22.236,70.078-2.021.842-29.143,6.907-81.533,18.193-.505,0-.842-.674-1.348-2.021.842-1.179,6.57-22.742,16.846-64.687,0-.842-.505-1.179-1.348-1.348h-1.348c-1.179,0-7.581,22.91-18.867,68.73q-8.844,3.285-95.01,23.584c-35.881,7.917-53.906,12.3-53.906,13.477v2.021a4.017,4.017,0,0,1,2.021.674q56.1-14.15,143.525-33.691c0,.505.168.674.674.674h.674q0,1.516-23.584,92.988a4.017,4.017,0,0,1,.674,2.021h2.7l25.605-96.357c10.276-3.538,37.566-9.6,81.533-18.193h.674q-17.435,69.236-33.691,141.5c.674,1.853,1.348,2.7,2.021,2.7h.674l1.348-.674c11.624-53.738,23.415-101.916,35.039-144.873,38.408-8.591,66.035-12.8,82.881-12.8h5.391l3.369,3.369h.674c.674,0,1.348-.842,2.021-2.7,0-3.2-3.2-4.717-9.434-4.717h-.674c-15.5,0-42.451,3.875-80.859,11.455,0-.505-.505-.674-1.348-.674,2.7-11.624,9.265-33.86,19.541-66.709,0-1.348-.505-2.021-1.348-2.021Zm14.993,93.662c-8.254,0-13.982,6.738-17.519,20.215,0,6.57,4.548,10.276,13.477,11.455,9.434,0,19.036-7.917,28.975-23.584,0-1.348-.505-2.021-1.348-2.021H33.354c-8.76,13.477-16.677,20.215-23.584,20.215H2.358a7.891,7.891,0,0,1-4.043-4.043v-2.021a26.887,26.887,0,0,1,1.348-6.064c11.624-3.706,17.519-6.57,17.519-8.76v-2.021a5.721,5.721,0,0,0-5.391-3.369Zm-8.591,9.939c1.516-3.2,3.369-4.885,5.559-5.222l3.369-.168-4.717,2.864ZM98.716-238.029c-1.516,0-3.875,6.738-7.412,20.215q-4.3,20.973-34.365,78.838c-8.254,14.319-13.645,21.562-16.172,21.562H38.745c-1.853-.505-2.7-2.527-2.7-6.064v-10.107c14.487-43.63,24.089-76.311,28.975-97.7-.337-3.2-1.011-4.717-2.021-4.717H60.981l-4.043,4.043c-17.014,44.978-25.605,79.006-25.605,101.748v4.043c0,7.581,2.527,12.129,7.412,13.477,7.581,0,20.215-18.025,37.734-53.906h.674c-3.538,17.183-5.391,29.817-5.391,37.734v4.043c0,6.233,1.516,10.276,4.717,12.129h2.7c4.548,0,11.624-7.244,21.562-21.562-.505,0-.674-.505-.674-1.348H98.042C88.1-123.479,81.533-117.414,78.5-117.414c-1.348-.337-2.021-2.19-2.021-5.391v-4.717c0-12.971,3.2-31.838,9.434-56.6,10.276-31,15.5-48.347,15.5-51.885,0-1.348-.505-2.021-1.348-2.021Zm-41.1,17.519v.674c-2.19,11.118-6.738,26.448-13.477,45.82h-.674v-.674c0-5.054,4.548-20.383,13.477-45.82ZM106.3-139.482c-6.57,0-11.118,6.738-13.477,20.215,0,6.233,2.864,9.939,8.76,11.455,4.548,0,8.928-4.043,13.477-12.129,14.319-5.391,22.4-9.939,24.258-13.477v-.674c0-.842-.505-1.179-1.348-1.348h-1.348c-8.591,5.9-14.656,8.76-18.193,8.76h-.674C116.909-135.271,113.035-139.482,106.3-139.482Zm-1.348,5.391c3.875-1.516,6.57.168,8.086,5.391v2.021q-6.822,0-8.086-6.064Zm-4.717,5.391c4.885,3.706,8.423,5.9,10.781,6.738-2.021,5.9-4.885,8.76-8.76,8.76h-2.021c-1.348-.674-2.19-2.358-2.7-5.222C97.2-121.12,98.042-124.49,100.232-128.7Zm51.211,7.244c-4.043,0-7.075,2.19-8.928,6.738l3.032,2.864c5.728-1.685,8.928-3.538,9.6-5.728-.168-2.527-.842-3.875-1.685-3.875Z" transform="translate(262.624 238.029)" fill="#949ba5"/>
</svg>

And how could I make my own SVG's (such as the one below) animate in
the same fashion as on the Codepen? (Besides replacing the path id!)
For this you need to change your SVG
Your shapes is drawn with double paths:
You need to redraw the shape using single paths and make the line thicker (stroke-width ="6")
This is how it looks in the end:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="horizont" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3"/>
<path id="vert1" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" />
<path id="vert2" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6" />
<path id="sign" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" />
<path id="dot" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" />
</g>
</svg>
Animating one element with stroke-dashoffset
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign"
attributeName="stroke-dashoffset"
begin="0s;anSign.end+1s"
dur="3s"
values="750;0"
repeatCount="1"
fill="freeze" />
</path>
</svg>
Animating all the elements of the shape:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8" style="background:#151515">
<g fill="none" stroke="white" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="4" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>
Color scheme option as in the question:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 417.8 224" height="224" width="417.8">
<g fill="none" stroke="#949BA5" stroke-width="6" stroke-linecap="round">
<!-- Length = 337px -->
<path id="Horizont" stroke-dashoffset="337" stroke-dasharray="337" d="M3.8 130l82.4-20 60.3-13.8L213.7 81l56.2-11 25-4.2s21.7-3 32.5-2c3.3.3 5 3 5 3">
<animate id="anHorizont" attributeName="stroke-dashoffset" begin="anVert1.end+0.25s" dur="0.3s" values="337;0" fill="freeze"/>
</path>
<!-- Length = 173px -->
<path id="Vert1" stroke-dashoffset="173" stroke-dasharray="173" d="M169.1 24l-15 55.5-10.5 41.6-17.8 70" >
<animate id="anVert1" attributeName="stroke-dashoffset" begin="anVert2.end+0.25s" dur="0.25s" values="173;0" fill="freeze" />
</path>
<!-- Length = 232px -->
<path id="Vert2" stroke-dashoffset="232" stroke-dasharray="232" d="M259.3 5.8l-7.8 23.7L241 63.2l-8.6 33.2L220 148l-11.5 49.8-5.3 22.6">
<animate id="anVert2" attributeName="stroke-dashoffset" begin="anSign.end+0.25s" dur="0.25s" values="232;0" fill="freeze" />
</path>
<!-- Length = 750px -->
<path id="Sign" stroke-dashoffset="750" stroke-dasharray="750" d="M259.8 110.4s6-1.4 10.3-3.4c2.8-1.3 6.8-2 6.8-4.9 0-1.5-2-2.6-3.5-2.7-3.4-.4-7 1.6-9.3 4.1-3.6 4-5.7 10.2-5 15.6.4 2.5 2 5 4.3 6.2 3.2 1.7 7.4 1.3 11 .4 5-1.4 9.7-4.3 13.3-8.1 5.8-6.2 8.5-14.8 11.7-22.6 2.7-6.8 4-14 6.3-20.9 2.2-6.8 7.2-20.4 7.2-20.4l7.3-25s2.8-8.8 3.6-13.4c.7-3.6 4.6-9.9 1-11-3.4-1.2-4 6-5.5 9.3-3 6.1-7 19.3-7 19.3l-5.7 17.4-5.2 22.2-4.4 19a54.5 54.5 0 00-1.4 20.6c.5 3.6 2.3 9.7 3.8 10.3 2 .7 4.2 1 6.2-.7 3.4-3 6.3-6.5 9-10.2 4.5-6.4 8-13.5 11.7-20.3 3-5.3 6-10.7 8.7-16l7.6-15.1L354 32.5s4-13.3 6.2-20c1.9-6.8 4.2-13 1.3-11-3.3 6.2-4.9 15.6-6.9 22.1-2.1 7-11.3 41.8-11.3 41.8l-4.2 22.3-2.2 19.8s-.7 7.2.2 10.7c.5 1.9 1 4.6 3 5.1 3 .9 6.1-2.4 8.3-4.4 2.5-2.3 7-7.2 7-7.2s3.6-5 6.5-6.8c3.3-2-2.8 6.3-3.4 9.7-.5 3-1.5 6.5 0 9.1 1.2 2.2 3.9 4.1 6.4 4 3.5 0 6.5-3.1 8.7-5.8 2.4-3 4.2-6.7 4.5-10.5.2-2.2-.2-4.7-1.6-6.4-1.8-2.3-4.9-4.2-7.8-4-2.6.2-6.2 2-6.4 4.5-.2 2.4 3.2 3.7 5.1 5 2.3 1.6 5 3 7.7 3.3 3 .5 6.2-.2 9.2-1a42 42 0 0015.8-8.6" >
<animate id="anSign" attributeName="stroke-dashoffset" begin="0s" dur="2s" values="750;0" fill="freeze" />
</path>
<path id="Dot" stroke-width="6" stroke-dashoffset="25" stroke-dasharray="25" d="M407 123c0-2 2.7-3.6 4-4.2 1.6-.8 2.2-.7 4-1 1 0 1.4 2 1 3-.2.7-2.9 1.7-1.8 1.3 0 0-4 2.6-5.9 2.4-.7 0-1.4-.8-1.4-1.5z" >
<animate id="anDot" attributeName="stroke-dashoffset" begin="anSign.end+0.2s" dur="0.25s" values="25;0" fill="freeze" />
</path>
</g>
</svg>

Show Percentage in SVG Graphic

I am trying to show current vaccination-data from a CSV-File provided by local authorities as a progress-bar in style of a syringe.
Depending on the percentage of vaccinated people, the bar should show a part of the syringe-icon in a different color.
I already found this awesome project: https://jsfiddle.net/kimmobrunfeldt/dnLLgm5o/
But when trying to add the following code as icon, nothing happens.
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16"><path fill="currentColor" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" class=""></path></svg>
What am i doing wrong?

Easier done with a green path-stroke and pathLength=100
A stroke-dasharray="78 100" then sets percentage
svg {
width: 150px;
}
<script>
function updatePercentage(v = 50) {
document.querySelector("#ceringe").setAttribute("stroke-dasharray", v + " 100");
}
</script>
<input type="range" min="0" max="100" oninput="updatePercentage(this.value)">
<br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path id="ceringe" stroke-dasharray="50 100" pathLength="100" d="M108 403L380 132"
stroke="green" stroke-width="130" />
<path fill="black" d="M510 82 431 2C428-1 423-1 420 2L409 13C406 16 406 21 409 24L437
52 392 97 335 40 318 23C315 20 310 20 307 23L296 34C293 37 293 42 296 45L313 62 85 292
C68 309 59 333 62 357L69 421 2 487C-1 490-1 495 2 498L13 509C16 512 21 512 24 509
L90 443 154 450C178 453 202 445 219 427L446 200 463 217C466 220 471 220 474 217L487 206
C490 203 490 198 487 195L413 121 458 76 486 104C489 107 494 107 497 104L508 93
C511 90 511 85 508 82ZM425 178 198 405C188 415 173 420 159 419L107 402 93 353
C91 338 96 324 107 314L131 290 171 330C174 333 179 333 182 330L193 319C196 316 196
311 193 308L153 268 198 223 238 263C241 266 246 266 249 263L260 252C263 249 263 244
260 241L220 201 265 156 305 196C308 199 313 199 316 196L327 185C330 182 330 177 327
174L289 132 334 87 425 178Z"/>
</svg>

I would recommend adding a clipping mask and then altering the width of the clipping mask with JS based on the values in the CSV file.
This example shows have the icon in green and the full icon in black. If you change 0.5512 to 0.1512, it would be 10% full, etc.
let clipping = document.getElementById("clipping-rectangle")
clipping.width.baseVal.value = 0.5 * 512;
#container {
margin: 20px;
width: 200px;
height: 200px;
}
<div id="container">
<svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="syringe" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-syringe fa-w-16">
<defs>
<clipPath id="clipping">
<rect x="0" y="0" width="800" height="512" id="clipping-rectangle"/>
</clipPath>
</defs>
<path fill="black" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path"/>
<path fill="green" d="M509.7 81.5L430.5 2.3c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l28.3 28.3-45.3 45.3-56.6-56.6-17-17c-3.1-3.1-8.2-3.1-11.3 0l-11.3 11.3c-3.1 3.1-3.1 8.2 0 11.3l17 17L84.5 291.7c-17.3 17.3-25.6 41.1-23 65.4l7.1 63.6L2.3 487c-3.1 3.1-3.1 8.2 0 11.3l11.3 11.3c3.1 3.1 8.2 3.1 11.3 0l66.3-66.3 63.6 7.1c23.9 2.6 47.9-5.4 65.4-23l227.2-227.2 17 17c3.1 3.1 8.2 3.1 11.3 0L487 206c3.1-3.1 3.1-8.2 0-11.3l-73.5-73.5 45.3-45.3 28.3 28.3c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.2 3.1-8.2 0-11.4zm-84.9 96.2L197.7 404.9c-10.4 10.4-24.6 15.4-39.2 13.8l-58.5-6.5-6.5-58.5c-1.6-14.6 3.4-28.9 13.8-39.2l23.5-23.5 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6 45.3-45.3 39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l11.3-11.3c3.1-3.1 3.1-8.2 0-11.3L289 132.4l45.3-45.3 90.5 90.6z" id="vaccine-path-green" clip-path="url(#clipping)"/></svg>
</div>

As when using the animateMotion command, avoid turning the object moving

I created an svg application in which three objects move along a curved trajectory.
When moving, the yellow ball does not turn over as it has a symmetrical shape.
Two other objects in certain areas are turned upside down.
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="80%" height="80%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08) translate(-100 -200) " fill="darkblue" d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Witch on a broomstick -->
<path transform="scale(0.2) scale(-1 1) translate(-10 -200)" fill="black" d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+1s" end="stopRed.mouseover"
dur="4s" repeatCount="4" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Yellow ball -->
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
<animateMotion begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
dur="8s" repeatCount="2" rotate="auto" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</circle>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
If there are any ways to avoid a coup of asymmetrical figures?
I would be grateful for any help in solving this problem.
Update
remove the rotate attribute on the animateMotion element
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08) translate(-100 -200) " fill="darkblue" d="M468 264c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C469 262 468 263 468 264z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Witch on a broomstick -->
<path transform="scale(0.2) scale(-1 1) translate(-10 -200)" fill="black" d="m142.2 23.5c9-0.1 3.7-16.5 10.9-17.7 2.9-0.5 4 1.1 6.3 2.3 0.1 2.4-1.7 2.9-2.3 4.6 2.1 1.8 3.6-0.6 5.7-0.6 0.7 4-5.3 3.2-6.9 1.7-1.2-2.1 0.4-3.4 1.1-5.1-8.1-3.6-5 5.1-6.3 9.7-1.9 6.9-12.7 10.8-13.7 1.1-0.6-5.9 7.4-13.1 1.1-16.6-4.8 3.8-7.4 10.2-10.3 16-5.1 10.2-10.6 22.9-16.6 32.6 0.4 2.8 3.6 2.9 4.6 5.2 0.6 2.7-3.4 0.8-2.9 3.4 3.3 0.6 6.7-1.3 8.6-3.4 1.1-1.2 0.8-2.7 1.7-4 3.3-4.9 8-6.3 14.9-8.6 1.6-4 6.2-5.7 10.9-5.1 2-0.9 2.3-3.4 3.4-5.1 2.6-2.4 7.2-2.7 9.7-5.1-0.4-2.1-2.9-2.8-0.6-4.6 3.3-0.5 2.9 2.8 2.9 5.7-3 3-8.4 3.5-10.3 7.4 1.6 0.9 2.6 0 4.6 1.1 1.9-1.2 1.6-4.6 3.4-5.7 6.8-0.2 6.8-7.3 9.2-12 4.1 1.3-0.7 9.4-2.3 10.9-1.9 1.8-4.3 2-5.7 2.3-0.9 3.1-2.2 5.8-4.6 7.4-2 0.3-1.4-2-3.4-1.7-3 3-4.4 7.4-10.9 6.9-1.8 4.9-10.3 3-14.3 5.7-0.3 9.7-10.3 12.6-18.9 12 5.6 9.6 18 2.1 24.6-2.3 1.4-0.9 3-1.4 4.6-2.3 2.8-1.7 5.2-4.3 8-5.7 6.9-3.4 22.5-6 31.5-1.1-1.8 6.1-13.2-0.5-15.4 4.6 3.6 2.4 8.1 0.2 12 0.6 6.1 0.6 12.3 3.9 20.6 3.4 2.3 0.9 3 3.5 6.3 3.4 1.2 4.7 9.6 2.2 9.2 8.6-6.5 0.7-11.5-4.4-17.7-4.6-2.1-0.1-4.2 1.3-6.3 1.1-2.8-0.2-5.3-2.5-8-2.9-7.7-1-13.9 4.7-21.7 4.6-3.2 0-6.6-2.6-9.7-0.6 2.2 5 12 2.5 17.7 4 2.1-0.4 1.4 2 2.3 2.9 3.6-0.4 5.4 1 5.7 4 0.7 2.4-2.4 1-2.9 2.3 3 4.5 11.9 3 13.2 9.2-4.7 2.4-9.6-1.5-14.3-1.7-1.4-0.1-3.2 0.7-4.6 0.6-4.6-0.5-8.3-3.1-11.4-5.1-8.6-1.2-15.9 1.6-22.9 0-5.6-1.3-8.8-7.6-13.7-8.6-1.4 3.8 2.4 7 5.7 8 4.8 5.7 11.3 9.7 17.2 14.3 0.7 2.4 2.1 4 2.9 6.3 0.6 3.1-1.9 3-1.7 5.7 9.8 0.3 25-0.3 33.8 0 0.8 1 1.5 1.9 1.1 4-0.5-6.1 5.8-7.5 11.4-5.7 1 0.3 0 2.7 1.1 2.9 1.8 0.5 0.8-1.9 1.7-2.3 2 0.3 3.2-0.2 4.6-0.6 1.4 0.5 3.3 0.5 3.4 2.3 1.7 0 0.6-2.9 2.3-2.9 5.9-1.2 11.2-1.9 15.5-4.6 2.6-1.7 4.1-5.7 7.4-4.6 2-0.1 0.8 2.3 1.1 3.4 0.6 2.1 1.9 3.8 2.3 6.9 0.1 1.4-0.3 2.4-1.1 2.9 2.6 2.5-0.1 3.6 1.1 7.4 0.5 1.8-1.5 1.2-1.7 2.3-0.4 2.3 1.5 2.3 1.1 4.6-6.3 4.8-9.8-3.8-18.9-6.9-1.6-0.5-3.3-0.2-4.6-0.6-2.9-0.9-5-2.3-10.3-1.1-1.4-0.7-2.7-1.5-3.4-2.9-1.6 3.9-10.9 3.7-13.2 0.6-23-0.1-45 0.2-65.2-0.6 2.3 5.3 9 6.2 11.4 11.4 5.8 2.5 12.4 3.9 17.7 6.3 7 3.2 11.6 8.5 14.9 16 1.9-0.3 2.7 0.4 4 0.6 3.9 8.1 20.8 3.2 26.9 9.2 1.5-0.1-0.8-1 0-2.3 2.6 1.7 3.1 4.8 5.2 6.9 2 2 5.3 2.7 7.4 4.6 1.2 1 5.5 5.9 6.3 7.4 3.8 7.9 0.3 19.3-6.3 22.9-3.7 2-10.7 3.3-17.7 2.9-14.9-0.8-28.6-11.6-46.9-12.6-11.4-0.6-23.7 3-32.6 5.7-7.5 2.3-13.1 4.9-18.9 9.7-1.5 2.5-4 4.1-6.9 5.1-1.6-4.6 4.6-6.5 5.7-10.3 5.6-2.8 11.2-5.6 16.6-8.6 7.5-1.7 15.4-4.4 23.5-5.1 3.6-0.3 7.2 0.9 10.3-1.1 4.9 2 8.4 0.6 13.2 1.1 1.9 0.2 4.1 1.4 6.3 1.7 7.8 1 12.9 3.1 21.7 5.2 5.9 1.3 14.8 6.4 22.9 3.4 4.3-1.5 6.4-7.2 5.7-13.2-0.8-6.5-8.6-15.3-15.4-18.3-3.6-1.6-7.7-0.9-10.3-3.4-1.8-0.5-1.2 1.5-2.3 1.7-13.2-1.4-23.6-3.8-30.3-10.9-3.5-3.7-7.1-8.3-12.6-10.9-0.1 5.3 9.5 5.8 10.9 11.4-4-1.2-8-4.1-12.6-5.1-3.9-0.9-8.4-0.6-12-1.7-5.7-1.8-8.9-6-13.7-8-1-3.8-4.3-5.2-5.1-9.2-5.6-2-9.4-5.8-10.9-12-8.1 0.5-15.2 0.1-22.9 0-20-0.2-42 1.6-64.7-0.6-0.6-1.5-0.1-2.9 0.6-4.6 5.7 0.9 9.9 0 16 0 6.9-4.2 13.5-8.6 17.7-15.4-1.6-3-7.9-1.3-8.6-5.1-1.6 0.1-1.6 1.8-2.9 2.3-1.9-0.2-1.1-3.1-2.3-4 1.5-1.6 5.5-0.1 6.3-3.4-0.1-2.8-4-1.7-2.9-5.7 3-0.3 2.6 2.8 4 4 4.5 0.9 3.1-4.2 6.9-4 0.3 3.6 0.5 5.6 3.4 5.7 3.7 0.1 4.6-5.4 4.6-8 4.4-0.9 8.2-1.5 12-1.7-2.3-3.4-2.8-8.6-4.6-12.6 1.6-2.5 0.5-5.2 1.1-7.4 1.1-3.7 4-6.2 5.7-9.7 0.3-1.1-0.8-3.4 1.1-2.9-0.5-1.5-1.2-2.4-1.1-4 0.1-1.3 1.9-3.6 2.9-5.1 0.1-0.1 0.4-2.2 0.6-2.3 1.1-0.9 4.1-0.5 4.6-1.1 1.3 6.2 0.8 14.5-2.3 20.6-1.1 2.1-0.9 4.5-2.9 6.3 0.2 2.4 2 5.4 0 8.6 1.6 4.2 1.3 7.8 0.6 12.6-0.1 0.6 0.6 1.7 0.6 1.7-0.6 2.9-2.8 4.1-3.4 6.9-0.4 1.7 0.2 3.6 0 5.2-0.9 8.6-7.1 11.6-10.9 18.3 6.6 2.8 6.1-1.3 10.3-4.6 1.6-1.2 3.8-1.5 4.6-2.3 2.3-2.2 3-6.1 6.3-8 1.5-0.9 3.9-1.5 5.7-2.3 4.3-1.8 10.2-4 14.3-8 2.5-2.4 3-5.2 6.3-6.9 0.4-2.9 1.7-4.7 2.3-7.4 2.6-1.6 4.4-3.9 5.7-6.9-2.1-1.8-2.1 2.1-5.1 1.1-1.7-1.8-2.6-4.2-5.1-5.1-3.5 0.8-6.5 4.9-10.9 2.9 0.8-5.3 6.8-5.4 10.9-7.4-0.2-3.8-6.8-1.2-7.4-4.6 1.6-3.7 8.6-2 12-4 14.4-15.2 26.5-32.7 40.1-48.6 2.9 1.8 5.8 2.9 6.3 5.7 1 5.2-7.8 13.2-1.1 17.7zm1.1 20.6c1.2-1 4.7 0.1 5.7-1.1-2.1-0.4-5.2-1.3-5.7 1.1zm-26.3 55.5c-4.3-4.3-9.5-10.5-15.4-8.6-5.3 1.7-9.9 13.4-17.2 13.2-0.3 1.8-1.1 3.1-1.1 5.2 1.8 0.9 2 3.3 5.2 2.9 1.1-9 10-12.6 20.6-11.4 4.8 0.5 9.3 4.2 13.2 2.3-0.7-2.2-2.6-3.1-5.1-3.4zm-69.2-8.6c-2.2 4.2-5 8-9.7 9.7-2.3 5.9-9.4 7-12 12.6 4-0.6 8.5-0.7 13.2-0.6 5.8-4.8 16.2-12.4 12-21.7-1.1 0-2.3 0-3.4 0zm36.1 6.9c-3.2 3.7-10 3.8-14.3 6.3 0.3 4.5-3.3 5.1-4 8.6 2.3 0.9 5.3-1.1 6.9-2.3 4.4-3.4 7.8-8.8 12.6-11.4-0.1-0.7-0.2-1.4-1.1-1.1zm-25.7 14.9c2.2 1.1 4.5 0.3 4-2.9-2 0.2-3.1 1.4-4 2.9zm17.7 0c2.1-0.5 2.8 1.3 4 0 0.2-2.9-4-2.7-4 0zm49.2 23.5c0.8-1.7 0.5-3.3-1.7-3.4 0.5 1.3 0.3 3.1 1.7 3.4zm5.2 6.3c-0.3-2.3-1.3-4.1-3.4-4.6-1.3 2 1.6 3.9 3.4 4.6z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+1s" end="stopRed.mouseover"
dur="4s" repeatCount="4" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Yellow ball -->
<circle r="7" cx="2.5" cy="2.5" fill="yellow" stroke="green" >
<animateMotion begin="startButton.mouseover+0.25s" end="stopYellow.mouseover"
dur="8s" repeatCount="2" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</circle>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
Objects do not roll over, but do not track the direction of movement. Some sites go backwards

I'm not very sure if this is what you need. Anyway I've centered the ballerina path around the 0,0 point, which is what I usually do. Please take a look.
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
<linearGradient id="grad1" x2="0%" y2="100%"
spreadMethod="pad" >
<stop offset="0%" stop-color="skyblue"/>
<stop offset="90%" stop-color="white"/>
<stop offset="100%" stop-color="yellowgreen"/>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" stroke="none" />
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
UPDATE
The OP is commenting:
in the second half of the journey a dancer should look left.
For this I'm using animateTransform type="scale" and calcMode="discrete" The scale is used to flip the dancer.
The only thing I don't like is that the track you are using is not symmetric and the dancer is not flipping exactly when you may expect.
svg{border:1px solid;overflow:visible;}
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
</defs>
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
<animateTransform attributeType="XML" attributeName="transform" type="scale" values="0.08,0.08;-0.08,0.08" calcMode="discrete" begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="1" fill="freeze" restart="whenNotActive" />
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>
UPDATE 2
In which I'm using keyTimes and calcMode="linear"
svg{overflow:visible;}
<svg version = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
width="60%" height="60%"
viewBox="0 0 300 200" >
<defs>
<style type="text/css"><![CDATA[
#startButton:hover {
text-decoration: underline;
fill:green;
opacity: 0.5;
}
#stop:hover{
opacity: 0.5;
}
]]>
</style>
<marker id="mark_path" viewBox="0 0 10 10" refX="1" refY="5"
markerUnits="strokeWidth" orient="auto"
markerWidth="4" markerHeight="3">
<polyline points="0,0 10,5 0,10 1,5" fill="black" />
</marker>
</defs>
<!-- Motion curve -->
<path id="t_path" d="m28 30c16-18 51-12 72-1 35 18 34 79 66 96 32 17 79 24 102 0C291 102 295 43 266 25 194-19 112 177 38 136 7 118 4 56 28 30Z" marker-mid="url(#mark_path)" stroke="#c3c3c3" stroke-width="1" fill="none" />
<!-- balerina -->
<path id="balerina" transform="scale(0.08)" fill="darkblue" d="M126.4,-43.5c1 3 2 7 4 10 5 12 12 23 15 28s1 5 2 9c1 4 6 14 9 19 3 6 5 8 5 9 0 1-3 1-3 5s4 12 7 18 5 9 5 10c0 1-3 1-4 2 -2 2-3 5-5 7 -2 2-6 3-9 3 -3 0-6 0-8-1 -2-1-3-3-6-4 -2-1-5 0-8-2 -2-2-4-7-6-10 -2-3-5-4-7-6 -2-3-3-8-5-11 -2-3-5-5-7-8 -2-3-2-7-4-7 -1 0-3 4-5 10s-6 17-7 24 0 13-1 20c0 7-2 15-3 23 -1 8 0 16 2 30 2 14 5 34 9 49 3 14 6 23 7 32s0 19-2 28c-2 9-4 17-5 21s-2 5-4 6c-2 0-7 0-9-2 -2-2-1-6-1-12 0-6 0-15-2-21s-4-8-7-10c-3-3-6-5-8-9 -2-3-1-7 0-9 2-2 5-4 7-6 2-2 3-4 2-8 -1-3-2-8-7-17 -4-9-11-24-15-39s-3-32-4-45 0-21-1-35c-1-13-2-31-4-46 -1-15-3-28-4-36 -1-8-2-11-9-14 -7-4-20-8-36-14 -16-6-34-13-45-18 -12-6-17-10-24-15 -7-4-15-9-27-15 -11-6-26-15-37-20 -11-5-19-7-28-10 -9-3-21-8-31-13 -11-6-21-13-25-17s-2-6-1-8c2-2 3-3 9-3 6 0 17 3 27 7 10 4 20 9 26 13 6 4 9 6 12 8 4 2 9 5 22 8 13 3 33 8 47 13 14 5 22 12 29 16 7 4 13 5 25 7s33 3 41 3c9 0 7-1 6-3s-1-4-2-6c-1-2-4-4-5-6 -1-2-1-4-2-6s-4-5-5-8c-1-2-1-4-2-7s-3-5-4-7c-1-2 0-3-1-6 -1-2-2-6-2-9 0-3 1-6 2-8 0-3-1-5-1-7 1-2 3-4 6-4 2 0 5 1 6 1 1 0 2-2 3-3 2 0 4 1 6 1s3-1 5 1c2 2 6 6 9 8 2 3 3 4 4 4 1 0 1-1 2 0s3 5 6 8c2 4 4 7 5 8s1-1 2 0c1 1 4 4 6 8 3 4 5 7 7 9 2 1 2 1 4 2 2 1 4 5 8 10 1 1 2 3 3 4 2 0 2-4 1-8 -1-5-2-11-2-16 -1-6-1-11-1-15 0-4-1-7-3-9 -2-2-5-4-12-7 -7-3-16-6-23-8 -7-3-11-4-17-6 -6-1-15-3-24-6 -10-3-21-7-29-10 -8-3-13-4-17-3 -4 1-6 3-9 4 -3 1-7 1-10 1 -3 0-4 1-6 2s-3 0-4 0c-1 0-2-1-1-2 1-1 3-2 5-4 2-2 5-3 5-5 0-1-4-2-8-3 -5 0-11 1-15 2 -4 1-6 3-8 3 -2 1-4 1-5 0 -1-4 13-12 16-12 4-1 8-2 11-2 3-1 4-1 7 0 3 0 8 1 12 1s7 0 10 0c2 0 4 0 8 1 4 1 10 3 19 5s21 3 29 3c8 1 12 2 18 4 5 2 12 6 17 9 6 2 11 3 16 4s10-1 15 0c5 0 11 2 14 2 4 0 6 0 7-2 1-2 2-5 2-7 0-2-1-4-3-6 -2-2-6-3-11-6 -4-3-9-7-12-12 0-1-1-1-1-2l0 0c-3 1-6 0-8-1s-4-4-5-8c-1-4-1-10 1-14 2-4 5-7 8-8 3-1 5 0 7 2 0-1 1-1 1-2 4-4 9-7 13-9 4-2 8-2 13-3s8 0 13 1c4 1 8 4 11 7 2 3 3 6 4 9s4 4 6 5c2 1 4 2 4 3 0 1-2 3-3 4 -1 1-1 2 0 3s2 2 2 3c0 1 0 2 0 2s1 1 1 2c0 1 0 2 0 4 0 2 1 3 1 4 0 1 0 3-2 3 -2 1-7 2-10 4 -3 3-4 7-3 12 1 5 3 11 5 14 3 3 5 3 9 2 4-2 9-5 15-8 6-2 12-4 19-7 8-3 17-9 24-15 7-5 11-11 18-16s15-10 21-15c6-4 9-7 14-11 4-4 9-8 13-10 5-2 9-2 15-3 6 0 12-1 17-1 4 0 6-1 8-1 2 0 4 0 7 0 3 0 6 0 9 1 3 1 6 3 5 4 -1 1-4 0-11 0 -6 0-14 2-18 3 -4 1-2 2 0 4 2 1 6 3 7 4 1 1 1 2-1 2 -2 0-4 0-8-1 -4 0-10 0-15-1s-8-2-10-2 -3 1-5 2c-2 2-6 5-12 11 -6 6-15 15-22 22 -7 7-12 11-22 19 -10 8-25 18-35 25 -10 7-14 9-15 13 -1 4 1 9 1 18 0 9-3 22-8 34 -5 12-12 22-17 33 -6 11-11 21-13 32C127.4,-45.5,126.4,-44.5,126.4,-43.5z" fill-rule="evenodd">
<animateMotion begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="3" fill="freeze" restart="whenNotActive" >
<mpath xlink:href="#t_path" />
</animateMotion>
<animateTransform attributeType="XML" attributeName="transform" type="scale" values="0.08,0.08;
0.08,0.08;
-0.08,0.08;
-0.08,0.08;
0.08,0.08;"
keyTimes= "0;
0.45;
0.50;
0.95;
1" begin="startButton.mouseover+0.5s" end="stopTeal.mouseover"
dur="12s" repeatCount="3" fill="freeze" restart="whenNotActive" />
</path>
<!-- Button `Start` -->
<g id="startButton" transform="scale(0.7) translate(-20 -20)" >
<rect x="20" y="20" rx="3" ry="3" width="60" height="20" fill="deepskyblue" />
<text x="50" y="35" font-size="16" font-weight="bold" font-family="Arial" text-anchor="middle"
fill="white" >Start</text>
</g>
<!-- Button group `Stop` -->
<g transform="translate(95 -5)">
<g id="stop" fill-opacity="1" >
<rect x="180" y="140" rx="3" ry="3" width="20" height="60" fill="none" stroke-width="2px" stroke="#c3c3c3" />
<g id="stopRed" >
<circle r="6" cx="190" cy="150" fill="none" stroke="black" />
<circle r="4" cx="190" cy="150" fill="black" />
</g>
<g id="stopYellow" >
<circle r="6" cx="190" cy="170" fill="none" stroke="black" />
<circle r="4" cx="190" cy="170" fill="yellow" stroke="orange" />
</g>
<g id="stopTeal" >
<circle r="6" cx="190" cy="190" fill="none" stroke="black" />
<circle r="4" cx="190" cy="190" fill="darkblue" stroke="orange" />
</g>
</g>
<text x="170" y="170" transform="rotate(-90 170,170)"
font-size="18" font-weight="bold" font-family="serif" text-anchor="middle" fill="gray" >Stop
</text>
</g>
</svg>

How to overlap two SVG vectors without using inline SVG?

I have two SVG vectors that I have overlapped by using CSS. See here. The shapes are as follows:
<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg id="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
If I change the CSS by removing the position:absolute (check the following), then they become two separate shapes. They don't overlap (stay adjacent in this case) anymore.
* {
/* position: absolute; */
}
#path1{
margin: 10px;
padding: 50px;
border: 1px solid;
}
#path2{
margin: 10px;
padding: 50px;
border: 1px solid red;
}
In this question: How to overlap two SVG images? , it says CSS is one solution or I could use them both inside a single SVG tag (inline SVG).
I can't use CSS; because I need to place the shapes in another HTML page. There if I keep position: absolute, it creates all sorts of mess as you can imagine.
I can't use inline SVG; because I am trying to animate the shapes using Vivus. This JS library requires both shapes to be inside a separate SVG tag. So I need to keep the shapes in two different SVG tags to make them animate separately.
Is there any other genius hack to this problem?
(Without CSS or inline SVG)

All you need to do is restrict the application of the position: absolute by restricting that behaviour to one page and not the other.
For example in the snippet below, the SVGs in <div class="draw"> are overlapped, but the ones in <div class="draw2"> are not.
.draw {
height: 250px;
}
.draw svg {
position: absolute;
}
.path1{
margin: 10px;
padding: 50px;
border: 1px solid;
}
.path2{
margin: 10px;
padding: 50px;
border: 1px solid red;
}
.draw2 .path1,
.draw2 .path2 {
border: 1px solid green;
}
<div class="draw">
<svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
</div>
<div class="draw2">
<svg class="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
</svg>
<svg class="path2" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px" >
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>
</div>

You haven't really explained what you mean exactly by "overlap". Or what exactly your restrictions are. If the SVGs are not inlined then they effectively become the same as if they were PNGs or JPEGs. Overlapping them is just a matter of using CSS positioning.
If you just need to draw something that contains both paths, then you can just combine them in one SVG.
<svg id="path1" xmlns="http://www.w3.org/2000/svg" width="400px" height="120px">
<path
id="path120"
d="m273 82c-8.5 0.3-15 0.7-14.5 0.9 0.6 0.2 1.8 0.2 2.9 0.1 1.2-0.1 1.6 0.2 1 1.1-0.5 0.9-0.2 1 0.9 0.6 0.9-0.3 2.7-0.2 3.9 0.3 2.1 0.8 2.2 0.9 0.3 1.1-1.1 0.1-2.6 0.1-3.2 0-1.8-0.3-1.6 1.4 0.4 3 1.1 1 1.4 1 0.9 0.1-0.5-0.8 0.1-1.2 1.8-1.2 1.6 0 2.6-0.6 2.6-1.4 0-1 1.2-1.3 4.7-1 5.6 0.4 8.1-0.9 3.3-1.7-2.6-0.5-1.8-0.6 3-0.7 3.6 0 7 0.4 7.7 0.9 0.6 0.6 1.4 0.6 1.7 0.1s2.5-0.7 4.9-0.6c3.2 0.2 4.4-0.1 4.4-1.2 0-0.8-0.7-1.4-1.4-1.4-0.9 0-1.1 0.5-0.7 1.2 0.5 0.9 0.2 0.9-0.9-0.1-1.3-1-1.7-1-1.7-0.1 0 1-0.4 1-1.6-0.1-1.3-1-1.7-1-2.5 0.2-0.6 0.9-1.2 1-1.6 0.4-0.5-0.6-6.5-0.8-16.3-0.5zm-2.3 1.6c-0.3 0.3-1.2 0.4-1.9 0.1-0.8-0.3-0.5-0.6 0.6-0.6 1.1-0.1 1.7 0.2 1.3 0.5z" />
<path
id="path126"
d="m230 83.1c-4.7 0.3-8 0.6-7.5 0.7 0.6 0.2 0.2 0.7-0.8 1.3-0.9 0.6-2.6 0.8-3.6 0.4-1.1-0.3-2.2-0.2-2.5 0.4-0.6 0.9-10.2 2.7-12.1 2.2s-20.6 0.8-21.4 1.5c-0.2 0.1 8 0.3 18.1 0.3s19.2 0.3 20.1 0.7c1 0.3 1.7 0.1 1.7-0.5s1.5-1.1 3.3-1.2c1.7 0 4.1-0.5 5.2-1 1.5-0.7 1.2-0.8-1.5-0.4-7.1 1.1-15.6 1.5-13 0.6 1.4-0.5 3.7-0.9 5.3-1 1.5-0.1 2.7-0.7 2.7-1.4 0-0.9 2.5-1.2 8.9-1.2 4.9 0 9.3 0.3 9.7 0.7 0.4 0.5-0.4 0.8-1.9 0.8-1.4 0-2.8 0.4-3.1 0.8-0.9 1.5 5.3 0 6.6-1.6 1-1.2 1-1.4 0.1-0.8-0.7 0.4-1.3 0.2-1.3-0.3 0-1.3 1.7-1.4 2.4-0.2 0.4 0.5 1.4 0.8 2.4 0.6 0.9-0.2 2.7-0.4 4-0.4 1.2-0.1 2.2-0.5 2.2-1 0-1-9.9-1-24 0z" />
</svg>