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>
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>
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>
I am playing around the SVG fill animation with jQuery. But I found something quite weird.
So I created a demo and there're 4 buttons in it. Those buttons are designed to:
Fill the SVG path directly. This works great in both Chrome and Safari.
Fill the SVG path with an animation. This works in Chrome but NOT in Safari.
Fill the SVG path with an animation from color A to B. This doesn't work.
Animate the SVG path from opacity value 0 to 1. Like #2, this works in Chrome but NOT Safari.
I did some research but still got confused a lot. Especially the different case for two browsers. What I know is that the use xlink:href stuff might bring the pain. But I have to use it because it's a very good way to repeatedly use the same graph to save the size. So I created this demo, hope to get some fundamental tutorial or solution to my confusion.
All the questions above are explained in the following code:
var raw_svg = $('#svg_holder').html();
$('#plan1').click(function(){
$('#svg_holder').empty().html(raw_svg);
var $path = $('svg').find('#test').find('path');
$path.css('fill', '#f00');
});
$('#plan2').click(function(){
var $path = $('svg').find('#test').find('path');
$path.css('fill', '#00f');
$path.css('transition', '5s');
});
$('#plan3').click(function(){
$('#svg_holder').empty().html(raw_svg);
var $path = $('svg').find('#test').find('path');
$path.css('fill', '#f00');
$path.css('transition', '5s');
$path.css('fill', '#00f');
});
$('#plan4').click(function(){
$('#svg_holder').empty().html(raw_svg);
var $path = $('svg').find('#test').find('path');
$path.hide();
$path.css('fill', '#f00');
$path.show(5000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="svg_holder">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="296px" height="100px" viewBox="0 0 296 100">
<defs>
<g id="test">
<path fill="#669999" stroke="none" d="
M 24.85 0
Q 22.15 1.95 20.35 4.05 19.15 5.45 18.8 5.45 18.75 5.45 16.6 3.5 14.45 1.5 14.15 1.5 6.4 3 0.7 15 0.75 15.65 1.35 17.15 1.95 18.6 1.95 18.95 1.95 19.25 0.8 20.35 -0.25 21.4 0.1 22.35 0.5 23.6 3.85 23.6 8.45 23.6 13.9 24.75 14.15 24.8 15.35 23.9 17.45 22.35 19 21.35 19.65 20.95 20.8 19.2 22.3 16.9 22.8 16.25 27.45 9.95 32.75 6.5 34.9 5.1 35.3 4.6 36.2 3.7 36.2 2.25 36.2 0.9 33.9 1.05 31.3 1.55 30.6 1.65
L 24.85 0 Z"/>
</g>
</defs>
<g transform="matrix( 1, 0, 0, 1, 10.2,10.05) ">
<g transform="matrix( 1, 0, 0, 1, 0,0) ">
<use xlink:href="#test"/>
</g>
</g>
</svg>
</div>
<button id="plan1">
1 - Fill directly to #f00
</button>
<button id="plan2">
2 - Animate to #00f with CSS transition
</button>
<button id="plan3">
3 - Animate from #f00 to #00f with CSS transition
</button>
<button id="plan4">
4 - Animate from opacity 0 to 1
</button>
Questions:
<ul>
<li>
Why does animate from 0 to 1 works in Chrome but not in Safari?
</li>
<li>
Why doesn't "Button 2" works in Chrome but not in Safari
</li>
<li>
Why doesn't "Button 3" not working as a transition but "Button 2" does?
</li>
</ul>