SVG SMIL Animation not animating - javascript

I need to create an SVG animation of 2 steps, for that I tried with JS. It worked but the animation wasn't playing "correctly" let's say it just go from step a to step b without anything between.
After a few research I disabled my js to try to animate my elt with SMIL using from and to attributes.
which gives us that code:
<svg class="ronce-svg" id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1165.1 826.09" style="transition: 0.5s ease;">
<path id="ronces" d="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
transform="translate(134.07 -374.08);transition:0.5s ease"
/>
<animate
begin="0"
xlink:href="#ronces"
attributeName="d"
attributeType="XML"
from="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z"
to="M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
value="M1031,443.55s-27.35-7.84-66.35-14.74l-3.93-47.72L938.8,424.68c-38.46-5.44-83.57-8.69-124.23-3.51l-26.31-47.09-7.33,53.76a145.32,145.32,0,0,0-36.48,15.48c-23.37,14.34-43.09,36.27-61.07,62.1l-47.11-12.05,32.25,34.76c-14.32,23.15-27.83,48.3-41.63,73.29L578,591.18l31.29,41.37c-17,29.13-35,56.76-56,79.31l-42.52-23.81L534,730.28q-5,4.2-10.22,8c-29.72,21.53-58.5,27.39-88.39,27.21L424.26,732.6l-18.1,31.15c-32.43-3.22-66.83-9.71-105.61-8.24l-16.65-27-10.49,29.35a269.93,269.93,0,0,0-69.1,19.35q-3.51,1.5-6.93,3.15l-25.64-21.1,5.61,32.64c-28.06,18.94-50.27,46.19-69.52,77.19L72.28,858.31l25.19,28.27c-14.65,25.84-27.74,53.56-40.77,80.79l-42.11-9.08,30.76,32.57c-18,36.79-36.82,71.39-60.18,97.69l-25.95-17.48,12,31.67c-13.43,12.16-28.36,21.65-45.38,27.55C-202.69,1174.87-84.39,1199-84.39,1199s6.61,2,18.35.77a90,90,0,0,0,15.77-3.15c3.31-1,6.84-2.17,10.55-3.66,27.87-11.2,66.64-38.81,110.09-104.5q2.85-4.29,5.72-8.82l53.6,12.33-36.28-41.3c21-37.17,37-68.42,50.9-94.67l30.62,8.69L156,934.11c10.42-19,19.92-34.91,30-48.16l32.3,11.45-20-26a122.9,122.9,0,0,1,40.53-28.58l22,23.92-3.41-30.73c21.53-6.46,48.21-10.24,82.92-12.3l6.58-.37L358,853.22l12.16-30.74c47.87-1.32,87.45.8,122.18-2.81L516,856.05l3.65-40.78c43.1-9.87,79.2-34.33,116.42-95l49.48,11.16-33.44-39.48q3.66-6.92,7.33-14.34c12.86-25.93,22.77-49.8,31.36-71.57l56-.42-42.28-34.89c10-25.45,19.36-47.26,31.75-65.38L787.9,525.5l-28.51-46.1c22-18.62,52.7-30.79,100.57-36.39l26.21,49.73L897,440.15C933.07,438.57,977,439.69,1031,443.55Z;M970.58,357.22s-2,28.38-8.85,67.39l43.5,20-48.47,5.71c-8,38-20.42,81.5-39.19,117.94l35.25,40.83-53-11.5a145,145,0,0,1-27,29c-21.47,17.06-48.81,28.09-79.24,36.16l-4.78,48.39-21.64-42.2c-26.65,5.54-54.9,9.63-83.11,14.06l-7.09,49.41-28.17-43.55c-33.17,6-65.31,13.47-93.68,25.51l7.82,48.1-31.74-36.25q-5.65,3.25-11,6.87c-30.39,20.57-45.74,45.61-55.8,73.75l27.09,21.69L456,834.88c-8.07,31.58-13.74,66.12-28.38,102.06l19.67,24.88-31.17-.19A269.7,269.7,0,0,1,374.27,1020c-1.74,1.86-3.51,3.68-5.32,5.44L380,1056.7l-28.75-16.44c-27.39,19.89-60.59,31.44-96.31,38.93l-2,37.09-18-33.34c-29.29,4.93-59.81,7.75-89.86,10.69l-5.87,42.67-20.08-40c-40.74,4.38-79.67,10.18-112.39,23.14l7.56,30.36-25.67-22.07c-16,8.46-30,19.24-41.41,33.22C-138.6,1266.4-120.81,1147-120.81,1147s.38-6.89,5.55-17.5a89.74,89.74,0,0,1,8.36-13.74,110.18,110.18,0,0,1,7-8.67c20.06-22.35,59.27-49.34,135.85-67.71q5-1.2,10.25-2.36L53,982.42l26.39,48.22c42.11-7,77-11.4,106.37-15.45l2.31-31.75,22.28,28.21c21.43-3.29,39.61-6.78,55.5-11.68l.28-34.27,17.55,27.72a123.08,123.08,0,0,0,40.71-28.32l-14.94-28.89,27.72,13.71c13.43-18,26.1-41.8,39.91-73.71q1.32-3,2.6-6.06l-24.26-20.58,33-.92c17.6-44.53,29.16-82.45,44.42-113.85l-26.07-34.71,39.57,10.52c24-37.12,59.34-62.69,129.12-76.89l6.43-50.32,25.67,44.92q7.75-1.05,16-2c28.77-3.21,54.58-4.36,78-5l19.56-52.51,18.33,51.66c27.34-.7,51-2,72.29-7.47l-1.33-55.38L844,600.2c25-14.29,47-39,68.59-82.05l-37.76-41.64,53.1,7.86C941.75,451,955.73,409.28,970.58,357.22Z"
dur="1s"
repeatCount="indefinite"
fill="freeze"
/>
</svg>
But sadly it does exactly the same as the js script I made.
(The thing I want to animate is something I drew on Illustrator and that I just miror with a SVG animation)

Related

Animate (draw) SVG Fotography paths and fill, using CSS (JS)

So, I wanted to animate a huge SVG photography, I have done it a year ago but have lost track of how I have done it.
The SVG inside the given code part is not the full image since it has too many characters... but you'll get the sence of the scale and structure by looking at the style definitions.
To start off with, first it should draw all paths and then fill all resulting areas slowly, how could I do this using CSS only? If there is no way, I would be down for some easy JavaScript.
Of course I have the option to have the style for the SVG inline but i thought it would be better this way for now?
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 332.75 500.05">
<defs>
<style>.cls-1{fill:#fcfcfc;}.cls-2{fill:#e0b5a0;}.cls-3{fill:#b78e76;}.cls-4{fill:#cda593;}.cls-5{fill:#d8ae98;}.cls-6{fill:#b8978a;}.cls-7{fill:#d0b2a2;}.cls-8{fill:#e3ccc1;}.cls-9{fill:#ecc3b2;}.cls-10{fill:#f9c7ba;}.cls-11{fill:#fdccc2;}.cls-12{fill:#f5c7bf;}.cls-13{fill:#ecada4;}.cls-14{fill:#d79a89;}.cls-15{fill:#ebaaa2;}.cls-16{fill:#dc9181;}.cls-17{fill:#efb3ab;}.cls-18{fill:#f7bab8;}.cls-19{fill:#ca836c;}.cls-20{fill:#de9483;}.cls-21{fill:#e4bab4;}.cls-22{fill:#deada6;}.cls-23{fill:#facbc1;}.cls-24{fill:#d68b77;}.cls-25{fill:#e19e8f;}.cls-26{fill:#e3ada2;}.cls-27{fill:#d3947d;}.cls-28{fill:#e3a399;}.cls-29{fill:#d3968a;}.cls-30{fill:#edd5cd;}.cls-31{fill:#fbc9c5;}.cls-32{fill:#f4e4e9;}.cls-33{fill:#e2c1b5;}.cls-34{fill:#c87d66;}.cls-35{fill:#e69e95;}.cls-36{fill:#dcae9e;}.cls-37{fill:#e8baae;}.cls-38{fill:#d78b7a;}.cls-39{fill:#e7bbaf;}.cls-40{fill:#d6a796;}.cls-41{fill:#cab3b3;}.cls-42{fill:#d2b9b9;}.cls-43{fill:#d5b9b9;}.cls-44{fill:#d58c6d;}.cls-45{fill:#decfd6;}.cls-46{fill:#e0bbb1;}.cls-47{fill:#e7c1bc;}.cls-48{fill:#dec6ca;}.cls-49{fill:#fcd4cc;}.cls-50{fill:#fbd4ce;}.cls-51{fill:#cd9b8a;}.cls-52{fill:#ad8369;}.cls-53{fill:#b28a77;}.cls-54{fill:#bd9c8a;}.cls-55{fill:#bc8d7d;}.cls-56{fill:#cda48f;}.cls-57{fill:#d1b5a8;}.cls-58{fill:#bd9c88;}.cls-59{fill:#d7b7ab;}.cls-60{fill:#e4a89b;}.cls-61{fill:#de9e92;}.cls-62{fill:#bd5b33;}.cls-63{fill:#c57760;}.cls-64{fill:#be907b;}.cls-65{fill:#bd816b;}.cls-66{fill:#cd917f;}.cls-67{fill:#b26f51;}.cls-68{fill:#dea396;}.cls-69{fill:#c77c60;}.cls-70{fill:#bb6649;}.cls-71{fill:#b96d4d;}.cls-72{fill:#dd9587;}.cls-73{fill:#c8633d;}.cls-74{fill:#f4cfd4;}.cls-75{fill:#cd856e;}.cls-76{fill:#c9836f;}.cls-77{fill:#d5ac9c;}.cls-78{fill:#d0ad9c;}.cls-79{fill:#ab7f67;}.cls-80{fill:#b8907e;}.cls-81{fill:#e5d0c6;}.cls-82{fill:#c5917f;}.cls-83{fill:#c2775e;}.cls-84{fill:#bc5f44;}</style>
</defs>
<title>hand</title>
<path class="cls-1" d="M150.63,500Q76.2,500,1.78,500c-.89,0-1.08-.2-1.08-1.08Q.73,250,.7,1C.7.13.89-.07,1.78-.07q165.3,0,330.59,0c.88,0,1.08.2,1.08,1.08q0,248.94,0,497.89c0,.88-.19,1.08-1.08,1.08q-44.82,0-89.64,0a7.11,7.11,0,0,1-.6-3.87c0-4.42-.4-8.82-.54-13.23a24.51,24.51,0,0,1-.2-2.56,41.51,41.51,0,0,0-.31-6.78c0-.66-.1-1.32-.1-2,0-4-.42-8-.67-12-.1-1.6-.07-3.19-.23-4.8-.41-3.95-.38-7.94-.73-11.91,0-.15,0-.31,0-.47,0-4.57-.16-9.14-.35-13.71-.27-6.68-.46-13.37-1-20-.2-2.26-.18-4.53-.31-6.8a210.43,210.43,0,0,0-2.54-25.91c-1-5.74-2.62-11.36-4-17a59.1,59.1,0,0,1-1.7-13.25,121,121,0,0,1,.85-15.69c.48-4.07.56-8.19.82-12.29.24-3.71.42-7.42.61-11.13.15-3,.21-6,.53-9a149.7,149.7,0,0,1,2.13-15.93c.65-3,1.42-5.94,2.17-8.9,1.29-4.18,2.26-8.44,3.24-12.7,1.29-5.62,2.32-11.28,3.15-17,.35-2.36.6-4.74,1-7.1,0-.3.19-.59.21-.9a2.27,2.27,0,0,1,.09-.52,2.91,2.91,0,0,0,.15-1.17,3.73,3.73,0,0,1,.09-.67,4.23,4.23,0,0,0,.19-1,3.43,3.43,0,0,1,.06-.34,6,6,0,0,0,.16-1.52c0-.12,0-.24.07-.35a4,4,0,0,0,.11-1.57,4.79,4.79,0,0,1,.09-1.07,3.42,3.42,0,0,0,.17-1.23,3.12,3.12,0,0,1,.08-.52,4.09,4.09,0,0,0,.15-1.52,2.89,2.89,0,0,1,.08-.65,3.2,3.2,0,0,0,.15-.76,1.35,1.35,0,0,1,.1-.74,1.82,1.82,0,0,0,.17-.86,4.25,4.25,0,0,1,.08-.61,3.1,3.1,0,0,0,.15-.91,3.4,3.4,0,0,1,.09-.46,3.22,3.22,0,0,0,.15-.75,3.41,3.41,0,0,1,.1-.46,4.55,4.55,0,0,0,.17-.75c0-.1,0-.21.07-.31a2.18,2.18,0,0,0,.1-.8,29.92,29.92,0,0,1,1.8-5.62,2.2,2.2,0,0,0,.35-.68l.09-.29a4.71,4.71,0,0,0,.22-.84c0-.1,0-.19.07-.29a4.42,4.42,0,0,0,.11-.89,2.64,2.64,0,0,1,.08-.49,8.46,8.46,0,0,0,.17-1.23c0-.12.07-.24.11-.37a75.49,75.49,0,0,0-.11-8.77,2.4,2.4,0,0,1-.09-1.22c0-1.79.09-3.58-.06-5.37a1.56,1.56,0,0,1-.1-.37,2.36,2.36,0,0,1,0-.75,1.71,1.71,0,0,0,0-1.24,2.94,2.94,0,0,1-.05-.59c0-2.37,0-4.74,0-7.11,0-.13,0-.26,0-.39a3.61,3.61,0,0,0,.2-1.3,3.47,3.47,0,0,1,.09-.91,2.9,2.9,0,0,0,.15-1,4,4,0,0,1,.09-.84,4.53,4.53,0,0,0,.19-1c0-.11,0-.21.07-.32a3.87,3.87,0,0,0,.18-1.07,2.84,2.84,0,0,1,.06-.31,4.58,4.58,0,0,0,.19-.75,1.63,1.63,0,0,1,.07-.3,3.08,3.08,0,0,0,.13-.91,2.43,2.43,0,0,1,.08-.47,3.91,3.91,0,0,0,.14-1.27,2.67,2.67,0,0,1,.08-.48,6.23,6.23,0,0,0,.22-1c0-.11.05-.21.08-.32a5.09,5.09,0,0,0,0-1.51,5.64,5.64,0,0,1,.1-1.08,5.43,5.43,0,0,0,.15-1.84,3.72,3.72,0,0,1,.08-.57,8.59,8.59,0,0,0,.15-2.53,3.09,3.09,0,0,1,.08-.61,49.4,49.4,0,0,0,.15-6.32,2.75,2.75,0,0,1,.05-.86c.4-1.84.1-3.7.19-5.55,0-.42,0-.85,0-1.27a2,2,0,0,1,0-.64,8.8,8.8,0,0,0,.14-3.07,7.44,7.44,0,0,1,.1-1.7,47.5,47.5,0,0,0,.16-6.85,9.74,9.74,0,0,1,.05-2.29,5.46,5.46,0,0,0,.21-1.93,2.62,2.62,0,0,1,.07-.74,3.54,3.54,0,0,0,.18-1.25,3.35,3.35,0,0,1,.08-.54,1.89,1.89,0,0,0,.07-1.08c0-1.83.39-3.64.27-5.47a11.15,11.15,0,0,0-.13-3.16,7.93,7.93,0,0,1-.11-1.54,2.74,2.74,0,0,0-.07-1.24,1.86,1.86,0,0,1-.07-.34,5,5,0,0,0-.17-1.16,2.81,2.81,0,0,1-.09-.49,3.17,3.17,0,0,0-.15-1,2.7,2.7,0,0,1-.09-.48,4,4,0,0,0-.13-1.29c0-.1-.05-.21-.07-.31a3.71,3.71,0,0,0-.17-.94,2.46,2.46,0,0,1-.08-.46,3.6,3.6,0,0,0-.14-.92c0-.1-.05-.2-.07-.3a4,4,0,0,0-.18-.91c0-.1-.05-.21-.07-.31a4.44,4.44,0,0,0-.19-1,4.37,4.37,0,0,1-.09-.5,2.85,2.85,0,0,0-.26-1q-1.5-5.68-2.69-11.42c-.9-4.37-2.1-8.66-3.11-13a37,37,0,0,1-.86-5.55c-.2-2.37-.87-4.69-1-7.07-.23-4.69-2.11-9.06-2.66-13.69a67.46,67.46,0,0,0-1.52-7.82,2.57,2.57,0,0,1-.12-.55,3.39,3.39,0,0,0-.15-.89,3.28,3.28,0,0,1-.1-.7,3.52,3.52,0,0,0-.14-1.37,3.28,3.28,0,0,1-.1-.69,3.67,3.67,0,0,1,0-1c.21-.61-.32-.65-.58-.9a20.12,20.12,0,0,1-1.32-3.85c-.06-1.13-.29-2.25-.44-3.37-.32-2.64-.81-5.25-1-7.9-.06-.68-.47-.94-1.12-.87-.16,0-.31,0-.47.06-2.67.42-2.68.44-3.26,3.06-.37,1.63-.44,3.35-1.6,4.72a2,2,0,0,1-.25.25,6.1,6.1,0,0,0-.86.57,14,14,0,0,0-5.71,4.81c-.42.65-.72,1.37-1.08,2.06a25,25,0,0,0-2,8.13A132.77,132.77,0,0,0,219,65.48,35,35,0,0,0,220.83,76c.93,2.66.5,5.4.35,8.11a81.55,81.55,0,0,0,0,9.25q.21,3.25.5,6.51c.21,2.52.54,5,.83,7.54a9.91,9.91,0,0,0,.29,2.43c.43,3.2,1.43,6.31,1.27,9.6a34.31,34.31,0,0,1-1.34,8c-1.12,3.78-2.3,7.54-3.24,11.37a7.66,7.66,0,0,0-.19,1.15,41.93,41.93,0,0,0-.86,8.51,5,5,0,0,1-.31,2.19c-.24.49-.54.52-.87.08a3.68,3.68,0,0,1-.53-1.3Q215,143.15,212.88,137a3,3,0,0,0-.26-.87,32,32,0,0,1-1.88-4.81,1.75,1.75,0,0,0-.24-.74,3,3,0,0,1-.44-.95c-.05-.23-.06-.47-.13-.7a2.68,2.68,0,0,1-.07-.27c-.06-.17-.11-.35-.18-.53l-.1-.27a4.49,4.49,0,0,0-.24-.56l-.15-.29a65.83,65.83,0,0,1-2.44-8.08,46.69,46.69,0,0,0-2.74-7.35,6.58,6.58,0,0,0-.29-.78c-.37-.82-.93-1.52-1.36-2.31a1.62,1.62,0,0,0-.52-.74c-.11-.12-.21-.24-.31-.37-1.69-2.2-2.86-4.76-4.63-6.92-1.62-2-3.26-3.9-4.76-6-.52-.73-1-1.49-1.56-2.2-.32-.5-.67-1-1-1.49a72.22,72.22,0,0,0-4.47-6,2.69,2.69,0,0,1-.2-.27c-1.26-1.69-2.56-3.36-3.92-5-1-1-1.78-2.18-2.86-3.1a9.24,9.24,0,0,1-1-1.15c-2.57-3.59-5.46-6.94-8-10.57a64.32,64.32,0,0,0-4.42-6.35c-1.58-1.78-3.22-3.5-4.73-5.36-2-2.53-3.57-5.41-5.42-8.07a64.15,64.15,0,0,0-5.19-6.65,3.07,3.07,0,0,0-.74-.56c-1.79-1-2.72-2.69-3.66-4.38-1.35-2.47-2.63-5-3.81-7.52-.74-1.6-1.56-1.87-3.24-1.26-.44.16-.87.34-1.3.53a7.86,7.86,0,0,0-3.11,2.24c-.39.48-.62.87.13,1.28a1.88,1.88,0,0,1,.86,1.48c.22,1.75.86,3.57-.76,5.06-.23.22-.09.51,0,.77.18.64.48,1.24.63,1.89s-.36.92-.7,1.3a7.86,7.86,0,0,0-2.21,5.62,22.51,22.51,0,0,0,2.64,10.81c1.26,2.25,2.13,4.7,3.31,7a113.81,113.81,0,0,0,8.83,15.19c1.57,2.16,3.34,4.14,4.93,6.27A15.63,15.63,0,0,1,153,87.27a102,102,0,0,0,9.29,18.13c.61.9,1.25,1.79,1.92,2.65,2,2.93,4.09,5.71,6.05,8.63a5,5,0,0,0,.81.85,7.24,7.24,0,0,1,1.54,2.32c1.15,2,2.77,3.7,3.49,6a11,11,0,0,1,.74,4.09c-.09.59-.1,1.25-1,1-.94-.68-1.06-1.85-1.65-2.73a17.54,17.54,0,0,0-6.59-6.81c-1.36-.77-2.66-1.63-4-2.51-3.7-2.52-7.16-5.36-10.81-7.94-1.09-.92-2.3-1.7-3.34-2.7-2.84-2.14-5.9-3.95-8.85-5.94-1.35-.92-2.58-2-4-2.87-1.21-1.07-2.47-2.1-3.78-3.06a2.37,2.37,0,0,0-.73-.31c-2.91-2-6.39-2.69-9.57-4.07a18.52,18.52,0,0,0-3-1.11c-2.32-.56-3.88-2.26-5.55-3.77-.84-.77-1.74-1.45-2.56-2.23-.49-.47-.2.09-.25.17-.39.56-.78.14-1.08-.06a26.81,26.81,0,0,0-4-2.16,3.25,3.25,0,0,1-1.61-1,4.25,4.25,0,0,0-.56-.29,7.08,7.08,0,0,1-1.22-.79,17.41,17.41,0,0,1-2.27-2.11,14.27,14.27,0,0,1-2.18-2.41,3.65,3.65,0,0,0-5.66,0,.65.65,0,0,0,0,.93,3.88,3.88,0,0,1,.58,3.57,2.5,2.5,0,0,0,.7,2.72,2.94,2.94,0,0,1,.69.94,2,2,0,0,1-.39,1.55,4.8,4.8,0,0,0-.45,3.42,34.74,34.74,0,0,1,.38,5.48,3.14,3.14,0,0,0,.36,1.45,29.88,29.88,0,0,0,6.27,7.09,16.93,16.93,0,0,0,4.42,2.86,1.13,1.13,0,0,1,.27.22,3.47,3.47,0,0,0,1.15,1.29,69.25,69.25,0,0,1,6.79,5,34.7,34.7,0,0,0,6.24,3.71,10.23,10.23,0,0,1,3.78,3.22c3.31,4.55,7.48,8.29,11.52,12.16a105.3,105.3,0,0,0,10.58,9.1,12.61,12.61,0,0,1,4.74,7.65c1.5,6.11,2.89,12.27,5.82,17.92,1.48,2.84,3.17,5.57,4.61,8.43.65,1.11,1.11,2.31,1.65,3.47a10.4,10.4,0,0,1-.55,6.15c-.79,2.19-1.2,4.51-2.33,6.58-.13.24-.23.5-.38.72-.6.9-1.12.92-1.83.1-1.38-1.59-2.57-3.33-3.94-4.93a109.38,109.38,0,0,0-7-8.54c-1.84-2.18-3.44-4.55-5.22-6.78-2.23-3.46-5.67-5.21-9.37-6.5a74.87,74.87,0,0,1-17.13-8.41,13,13,0,0,0-8.79-2,29.14,29.14,0,0,1-10.66-1c-1.63-.41-3.35-.32-4.93-1l-.33-.11a19.86,19.86,0,0,0-2.22-.73,3.61,3.61,0,0,1-.44-.22,2,2,0,0,0-.91-.23,1.77,1.77,0,0,1-.31-.08,11.11,11.11,0,0,1-1.13-.31,4.27,4.27,0,0,0-5.29,1.19c-.25.28-.59.47-.86.78a1.81,1.81,0,0,1,2.63,2c0,.84-.72,1.74.13,2.54a1.51,1.51,0,0,1,.79,1.46c0,.74,0,1.49,0,2.23a7.38,7.38,0,0,0,3.43,6.34c3.46,2.19,6.86,4.49,10.47,6.45a12.81,12.81,0,0,0,4.12,1.65,6.55,6.55,0,0,1,4.68,2.94,13.16,13.16,0,0,0,2.82,2.6c3.43,2.45,7.1,4.55,10.17,7.48a12.51,12.51,0,0,0,2.71,1.61,7.17,7.17,0,0,1,2.61,2.8c2.12,4.35,5.09,8.15,7.82,12.1,1.92,2.76,3.7,5.6,5.56,8.4a9.09,9.09,0,0,0,2.43,2.67,1.45,1.45,0,0,1,.65,1.43c-.36,2.53.75,4.66,1.86,6.78a2.83,2.83,0,0,1,.56,1.75,14.29,14.29,0,0,0,.64,6.14c.58,2.12.47,4.27.79,6.39a37.09,37.09,0,0,0,1.38,6.75,5.46,5.46,0,0,1,0,3.46,28.88,28.88,0,0,0-1,8c-.08,1.86-.68,3.6-.86,5.43-.22,2.33-.72,4.66-.8,7-.13,3.63-1.32,7.06-1.6,10.65a35,35,0,0,1-.66,4.39,142.22,142.22,0,0,0-2.49,15.05c-.39,3.72-.16,7.49-.34,11.23-.11,2.41-.38,4.82-.36,7.25s.14,5,.37,7.49c.22,2.32.22,4.67.51,7a50.92,50.92,0,0,0,3.12,12.25,21.73,21.73,0,0,0,2.16,4.41A6.58,6.58,0,0,0,145,351.1a6.19,6.19,0,0,1,1.81,3.33,27.74,27.74,0,0,0,1.23,3.41c.75,2.43,1.77,4.75,2.73,7.09a13.71,13.71,0,0,1,.53,2.28c.65,3,.75,6,1.11,9,.41,3.48,1.2,6.92,1.35,10.43.11,2.81.43,5.59.64,8.39.17,2.42.22,4.83.18,7.25-.09,5.36-.33,10.7-.82,16a31.72,31.72,0,0,0-.31,4.78c-.16,1.85-.26,3.73-.33,5.6-.1,3-.36,6.06-.62,9.08-.12,1.39-.23,2.8-.32,4.2-.25,4.16-.42,8.33-.59,12.49-.11,2.76-.33,5.52-.29,8.3.08,4.48-.09,9-.2,13.46-.11,4.25,0,8.5,0,12.76,0,3.36,0,6.72,0,10.08A1.18,1.18,0,0,1,150.63,500Z" transform="translate(-0.7 0.07)"/>
<path class="cls-2" d="M241.8,480.22c.53,6.57.68,13.15.93,19.73H205.37a.66.66,0,0,0-.94,0h-3.05c-.31-.28-.55-.6-.25-1s.68-.33,1.05-.12.79.27,1-.27.83-.75,1.47-.47c.27.12.6.34.86,0s0-.6-.15-.87a1,1,0,0,1,.07-1.3,1.79,1.79,0,0,0,.14-2.45c-.24-.41-.53-.8-.13-1.28a.41.41,0,0,0-.07-.61c-.21-.22-.53-.43-.27-.79s.56-.2.87-.14.73.39,1,0a1,1,0,0,0-.32-1.18c-.81-.74-1.45-1.48-.51-2.58.17-.18,0-.44-.13-.65a1.51,1.51,0,0,1,.05-1.47,1.51,1.51,0,0,0-.38-2.09,3.76,3.76,0,0,1-1.46-3.51,1,1,0,0,0-.64-1c-.24-.13-.49-.31-.35-.64s.41-.33.69-.33a8.05,8.05,0,0,1,1.39.22,1.67,1.67,0,0,0,1.55-.3.91.91,0,0,1,1.55.27,1.66,1.66,0,0,0,.87.72c-.91-.91-.9-1.27.07-2.55-.31.06-.39.35-.58.52a1.15,1.15,0,0,1-1.41.18,1.13,1.13,0,0,1-.71-1.23c.21-1.23.14-2.27-1.14-3-.65-.37-.36-1.51.36-1.84.31-.15.69-.09,1.13-.34-2-.88-1.64-2.58-1.61-4.17a.75.75,0,0,1,.31-.6c.54-.37.46-.76.07-1.17a1.18,1.18,0,0,1-.39-.95c.06-.49.26-.71.79-.48.35.16.79.86,1.1.08s.6-1.47-.22-2c-.48-.31-1.15-.4-1.18-1.15a3,3,0,0,1,.59-2.32,2,2,0,0,0,.29-2.4c-.07-.14,0,0-.06-.11-.65-1.7-.12-2.56,1.67-2.42,1,.08,1.07-.13,1-1a2.93,2.93,0,0,0-.86-2.4,1,1,0,0,1,.23-1.66,1.82,1.82,0,0,0,.44-2.69A1.31,1.31,0,0,1,209,443a3.55,3.55,0,0,0-.4-2.92,2.36,2.36,0,0,1-.33-2.11,5.36,5.36,0,0,0-.37-2.87,2.88,2.88,0,0,1,.07-1.59,9.06,9.06,0,0,0-.06-3.44c-.08-.94.12-1.27,1-1.38s1.08-.41.43-1.16-1.73-1.4-1.54-2.72c0-.09-.14-.17-.22-.25-1.29-1.42-1.36-2.19-.34-3.73.25-.37.51-.7,1-.57.77.18.68-.37.56-.76-.33-1.13-.5-2.29-.72-3.44-.05-.22-.21-.46-.16-.68a7.24,7.24,0,0,0-.47-3.87,3.41,3.41,0,0,0-.93-1.79,2.47,2.47,0,0,1-.26-3.18c.14-.2.39-.39.28-.61-.49-1,0-2.21-.73-3.16a1.09,1.09,0,0,1-.14-1c0-.15.16-.36.09-.45-1-1.21.17-2.27.23-3.4,0-.15.14-.33.08-.46-.6-1.43.52-2.46.85-3.67a1.31,1.31,0,0,1,.41-.71c.65-.51,1.16-1,.33-1.81-.26-.25,0-.57.21-.84.93-1.44.92-1.94-.11-3.25a3.62,3.62,0,0,1-1-2.78,2.38,2.38,0,0,0-.86-2.2,1.18,1.18,0,0,1-.56-1.11c.23-.88-.32-1.56-.43-2.32a41.77,41.77,0,0,0-1-5.32c-.07-.25.12-.53.18-.79a3.17,3.17,0,0,0-.25-2.4,1.55,1.55,0,0,1,0-2c.39-.5.1-1.06-.31-1.47a2.4,2.4,0,0,1-.7-1.57c-.14-1.49-.77-2.88-.94-4.35-.24-2.2-.46-4.41-.82-6.6a22.88,22.88,0,0,0-1.78-6.18,7.46,7.46,0,0,1-.79-4.37,7,7,0,0,0-.43-3.8c-.07-.18-.2-.38-.1-.56.74-1.39.57-3.15,1.78-4.35a2.79,2.79,0,0,0,.61-1.74.91.91,0,0,0-.67-1.09c-1.37-.45-2.14-1.65-3.08-2.6-.63-.63-1.18-1.36-1.81-2a3.19,3.19,0,0,0-1.82-.95,4.85,4.85,0,0,1-3.47-3.05c-.43-1,.51-.65,1-.83a3,3,0,0,1-.16-1.74,1.15,1.15,0,0,0-.34-1.08,6.55,6.55,0,0,1-.84-1.67c-.1-.25-.27-.63,0-.77,1-.58.42-1.26.17-1.91a2.1,2.1,0,0,1-.16-1.26,2.82,2.82,0,0,0-.15-1.72,1.1,1.1,0,0,1,0-.92c.75-1.3,0-2.43-.44-3.56a3.86,3.86,0,0,1-.23-2.9,6.23,6.23,0,0,0-.44-4c-.51-1.33-.5-1.38.82-1.77.74-.22.89-.78.52-1.26-1-1.28-.83-2.82-1.15-4.25-.17-.72-.19-1.37.88-1.28.54.05.47-.32.5-.71.13-1.88-.36-3.71-.39-5.58a5.47,5.47,0,0,0-.8-2.19,7.37,7.37,0,0,1-.71-1.86c-.2-1,.22-1.4,1.22-1.25a4.6,4.6,0,0,1,.89.28,2.33,2.33,0,0,0,.95.35,2,2,0,0,0-.36-1.6c-.26-.44-.58-.84-.82-1.29-.79-1.49-.78-1.79.41-3,.44-.44.69-.82.38-1.43-.17-.33-.23-.81.1-1,1.07-.51.54-1.24.26-1.83a18.17,18.17,0,0,0-2.21-4,4.56,4.56,0,0,1-1-1.72c-.1-.42-.24-.87.25-1.15a.84.84,0,0,1,1.06.21,4.37,4.37,0,0,0,.88.59c.28.18.53.38.82.55a21.29,21.29,0,0,1,1.75,1.53c.11.2.2.41,0,.63-.52.32-.73.59-.12,1.13,1.6,1.4,2.36,3.38,3.29,5.21.41.8-.23,1.78-.05,2.74.05.31-.94.68-1.34,1.2-.21.28-.65,0-1-.17s-.47-.41-.73-.19-.18.58-.14.89a8.37,8.37,0,0,0,1.81,3.37,17.85,17.85,0,0,1,1.12,1.51.51.51,0,0,1,0,.65.44.44,0,0,1-.55.06c-.95-.64-2.26,0-3.18-.92-.32-.33-.54.06-.46.45a4.33,4.33,0,0,0,.68,1.48,18,18,0,0,1,1.6,3,1.42,1.42,0,0,1-.33,1.8,2.66,2.66,0,0,0-.81,2.78,1.84,1.84,0,0,1-.42,2.05.72.72,0,0,0-.23.75c.36,1.26.38,2.63,1.33,3.71.74.85.64,1.22-.41,1.81-.62.36-.7.73-.62,1.42.14,1.24.66,2.52-.09,3.75-.06.1-.1.26,0,.34.95,1.2.36,2.71.81,4,.24.66.36,1.32-.31,1.81-.4.28-.2.52,0,.77,1.06,1.35,1,3.19,2.1,4.54a1.2,1.2,0,0,1,.18.91,2.4,2.4,0,0,0,1.26,2.63c1.2.83,2.14,2,3.74,2.27,1.17.2,1.78,1.41,1.76,2.73a2.1,2.1,0,0,0,2.81,2.2c1.66-.63,3,.28,4.4.68,1.62.46,2.2,4,1.11,5.36-.08.09-.15.21-.26.23-1.91.29-3.38,1.57-5.13,2.2a1,1,0,0,1-.8,0c-.31-.22-.14-.53-.07-.86-.59.37,0,.58,0,.84-1.06,1.64-.93,3.56-1.24,5.37a2,2,0,0,0,.18.91,8.13,8.13,0,0,1,.33,2.66c-.07,1.09.84,2,.89,3.11a14.48,14.48,0,0,0,1.14,4.68,9.66,9.66,0,0,1,.52,3.59c.07,1.42.9,2.66.92,4.1,0,.47.41.83.7,1.2a2.72,2.72,0,0,1,.54,1.91,7.28,7.28,0,0,0,.9,3.32c.27.52.58,1,.26,1.65s.21.68.49.93a7,7,0,0,0,.91.53c.76.45.73.75-.07,1.16-.14.07-.29.12-.32.3s0,.18.1.19c1.44.23,1.45.23.82,1.57a1.83,1.83,0,0,0,.25,2.18,1.6,1.6,0,0,1,.38,1.93.53.53,0,0,0,.06.65c.9,1,.78,2.24,1,3.42a14.63,14.63,0,0,0,1.66,4.88c.23.4.63.4,1,.39s.73,0,.85.45a.83.83,0,0,1-.41.91c-.15.12-.32.21-.47.34-.46.39-.35.65.2.79.27.06.54.06.81.14.61.18,1,.5.67,1.2-.24.5-.21,1,.3,1.21,1.48.54,1.75,1.86,2.12,3.18.65-.11.88-.64,1.22-1,.73-.84,1.35-.75,1.72.28.23.63.71,1.27.14,2-.18.23,0,.43.18.61a1.31,1.31,0,0,1,.2,1.34c-.52,1-.41,2.06-.92,3.07a20.51,20.51,0,0,0-.83,3.35c.92-.1,1.05-.57.89-1.22a1.61,1.61,0,0,1,.52-1.7.8.8,0,0,1,1-.18.71.71,0,0,1,.36.91,4.39,4.39,0,0,0-.18,2.16,1.66,1.66,0,0,1-1,1.6,2.9,2.9,0,0,0-1.51,2.23c-.43,1.73-1,1.9-2.31.74a5.44,5.44,0,0,1,.66,2.92c-.14,1,.51,2.13-.62,2.85,0,.16.08.22.17.22,1.8-.17,2.25.32,1.94,2.12a5.05,5.05,0,0,0-.15,1.16c.06,1.39,0,1.52-1.3,2.06a5,5,0,0,1,.57,6,7.91,7.91,0,0,1-1.2,1.44,2.09,2.09,0,0,0-.24,2.77c.24.37.55.19.84.15.45-.06.89-.06,1.1.42a.85.85,0,0,1-.52,1.16c-1.09.55-.75,1.63-.87,2.5-.1.66.22,1.37.18,2.08a.47.47,0,0,0,.51.53c1.16-.14,1.12.67,1.19,1.43a2.43,2.43,0,0,0,.08.86,11.56,11.56,0,0,1,1.55-3.2.89.89,0,0,1,1-.45c.36.14.21.54.25.84.1.81.31,1.62-.36,2.33a.55.55,0,0,0-.08.66c1.09,1.2,1,3.52,3.42,3.45a1.64,1.64,0,0,1,1.53.94,16,16,0,0,1,.77-3.33c0-.11.1-.21.14-.32.32-.83,1.51-.82,1.71-1.43s.33-1.46,1.08-1.93a1.26,1.26,0,0,0,.65-1.6c-.25-.66-.81-.59-1.38-.57-1.11,0-1.47-.42-1.26-1.55a4,4,0,0,0,0-2,.93.93,0,0,1,.51-1.28c.64-.23.77.32.93.77.09.26.18.59.55.43a.85.85,0,0,0,.53-1.16c-.55-1-.51-2.21-1-3.23a3.7,3.7,0,0,1-.24-.54c-.14-.45-.37-1,.23-1.22s.87.18,1.16.58.4,1.42,1.11,1.36.36-1,.65-1.47.59-.68-.19-1c-.57-.24-.4-1,.23-1.41a2.05,2.05,0,0,0,1-2.72c0-.2,0-.41-.3-.43-1.24-.12-1-1.08-.89-1.78A26,26,0,0,0,234,416a2.62,2.62,0,0,0-.13-1.15,3.59,3.59,0,0,1,.65-3.43,2.26,2.26,0,0,1,2.6-.88c.51.15.59.59.7,1a9.21,9.21,0,0,1-.09,3.84,11.23,11.23,0,0,0,.5,5.53,10.59,10.59,0,0,1,.37,4.42,23,23,0,0,0,.67,5.55,5.7,5.7,0,0,1,.06,2,12.49,12.49,0,0,0,.18,4.76,10.36,10.36,0,0,1,0,2.78,22.82,22.82,0,0,0,.14,3.7c.23,3.62.29,7.24.63,10.85a34.71,34.71,0,0,1,.09,4.78c-.06,1.35.38,2.61.45,3.94,0,.65,0,1.31.09,1.95.27,2.63.18,5.26.29,7.88C241.3,475.74,241.58,478,241.8,480.22Z" transform="translate(-0.7 0.07)"/>
<path class="cls-3" d="M173,500H156.5c-1.14-1-1-1.39-.87-2.73.17-2.23,1.13-4.44.18-6.77-.35-.85-.82-2,0-3,.28-.35,0-.92.13-1.38a13.75,13.75,0,0,1,.4-3.12,1.36,1.36,0,0,0,0-1.26,2.81,2.81,0,0,1-.34-2.88c.48-1.34.12-2.52,0-3.78a1.63,1.63,0,0,1,.24-1.13c.68-.87.53-1.91.68-2.89.06-.37,0-.62-.41-.71-.82-.19-.67-.76-.48-1.29a5.61,5.61,0,0,0,.2-3.79,2.5,2.5,0,0,1,.11-1.62,8.37,8.37,0,0,0,.21-4.1c-.09-.73.16-1.47-.44-2.11-.14-.16-.07-.47,0-.68a6,6,0,0,0,.49-3.29,1,1,0,0,1,.27-.74.68.68,0,0,0,.19-.75c-.46-1.11-.14-2.29-.28-3.41a14.87,14.87,0,0,1,.22-3.85c.24-1.71-.24-3.39.12-5.06.09-.43.17-.95.66-1,.75-.08.59-.41.37-.84-.12-.25-.25-.49-.39-.73-.65-1.06-1.13-2.05-.24-3.31a2.86,2.86,0,0,0,.1-2.29,21.06,21.06,0,0,1-.31-2.09c-.07-.47,0-.82.48-1.05.69-.34.65-.84.12-1.29a1,1,0,0,1-.12-1.46,1.76,1.76,0,0,0,.28-1.46c-.28-.92-.2-1.63,1.21-2-1.22-.26-1.19-.8-.81-1.41s.51-1-.25-1.43c-.35-.19-.34-.56-.23-.94,0-.13,1-.26,0-.52-.32-.08-.09-.4.13-.5a1.94,1.94,0,0,0,.81-.66c.08-.11.52-.11.07-.42s-.15-.87.1-1.21.7-.2,1,.05.63.46.88.65c.74-1,.09-2.22.57-3.37-.49-.29-1.1-.07-1.64-.21s-.81-.26-.77-.74.5-.45.84-.43c1.1,0,2.2.12,2.74-1.05-.07,0-.62.48-.65-.09s.76-.55,1.13-.9c-.4-.1-.92.31-1.14-.2s.27-.7.48-1a3.65,3.65,0,0,1,.78-1c.28-.21.45-.38.13-.74-.56-.63-.16-.86.45-.95a1.93,1.93,0,0,0-1,.42.74.74,0,0,1-1-.16c-.2-.33.18-.55.41-.73.43-.33.87-.55.74-1.29-.06-.35.54-.48.93-.54.11.12.1-.22.07-.07s-.08.07-.11,0c-.33-.91-.8-1.6-1.94-1.47a.45.45,0,0,1-.4-.5.48.48,0,0,1,.36-.43c.8-.14,1.56-.29,1.14-1.41,0-.09.21-.21.15-.39-.53-.2-1.33.4-1.59-.28s.57-.83.9-1.24.61-1.24,1.66-1.27a1.58,1.58,0,0,0-.47,0c-.58,0-1.41.57-1.67-.16s.74-.88,1.18-1.26a5.36,5.36,0,0,1,1.9-.64,7.74,7.74,0,0,0-2,.56c-.41.11-.89.47-1.19.11s.24-.72.47-1c.93-1.22.95-1.21,2.47-1.17-.74,0-1.14-.14-1-.77a.64.64,0,0,1,.35-.23c-.15,0-.21.13-.32.19-.29.89-1,1-1.77.92-.41-.06-.82-.2-.78-.7s.43-.93.82-.81c.9.27,1.36-.24,1.93-.7a1.86,1.86,0,0,1,1.49-.52,2,2,0,0,0-1.82.75c-.45.48-.81.32-1.24.15-.63-.26-.77-.64-.21-1.13a4.32,4.32,0,0,0,.63-.5c-.27.11-.67.38-.71-.14a1.44,1.44,0,0,1,1.13-1.72,8.85,8.85,0,0,0-1.14,0c-.27,0-.6.05-.69-.3s.17-.57.46-.73a1,1,0,0,1,.67-.15,1.39,1.39,0,0,0,1.64-1,1.11,1.11,0,0,1,.28-.4c-.51.44-.82,2.05-2.08.9-.68-.61.33-.89.57-1.39-1.28-.6-.09-1.16.21-1.8-.69.13-1.26.4-1.88.46-.27,0-.57.06-.73-.23s0-.46.17-.64c.37-.53.76-1,1.53-.83a1.5,1.5,0,0,0,1.31-.3c-.08-.37-.46-.24-.65-.4-.38-.74-.21-1.31.53-1.26a3.87,3.87,0,0,0,2.57-1.11l.08,0s-.05-.07-.07-.07a10.39,10.39,0,0,0-2.42.85c-.44.24-1.22.6-.81-.56.09-.26-.13-.43-.16-.65a1.35,1.35,0,0,1,1.36-1.38,3.49,3.49,0,0,0,1.25-.08c-.72.12-1.5-.28-2.17.37a.53.53,0,0,1-.83,0c-.21-.26,0-.53.17-.73a14.12,14.12,0,0,0,2.34-2.88c.1-.2.39-.44.56-.38.83.27,1.27-.24,1.81-.7.3-.26.57,0,.63.38s-.22.57-.31.86c.87-.11.84-.1.48-.88-.15-.33-.45-.72-.08-1.07s.51-.06.73.12l.24.2a1.12,1.12,0,0,0,.86-1.68,3.24,3.24,0,0,1-.23-2.46,3,3,0,0,0-.37-2.17c-.17-.27-.22-.48-.09-.66-1.52.42-.79,1.91-1.07,2.89-.4,1.35-1.44,1.65-2.39,2.19-.31.18-.63,0-.7-.39a1.09,1.09,0,0,1,.68-1.34c.39-.14.87-.1.78-.74-.45-.14-.74.28-1.14.26s-.57,0-.62-.39c0-.19.17-.31.27-.45-.15.13-.34.22-.42.4a1.28,1.28,0,0,1-1.46.72.64.64,0,0,1-.61-.47c-.07-.32.11-.49.36-.65a4.44,4.44,0,0,0,2.48-3.32c.06-.55,1.7-1.1,2.15-.78.29.21.19.49.05.74a4.15,4.15,0,0,1-1.08,1.14c.94.13.84-.73,1.1-1.12.39-.61,1.13.32,1.38-.55-.53,0-1.17,0-1.18-.82s.71-2.12,1.38-2.26a7.56,7.56,0,0,0,2-.72,3.33,3.33,0,0,1,1,3.46c-.19.54-.39,1,0,1.55a.8.8,0,0,1,0,.79,1.06,1.06,0,0,0,.29,1.45c.67.59.33,1.68,1.13,2.32.28.23-.29,1-.56,1.45a.78.78,0,0,0,0,1.09c.77,1,.52,2.18-.58,3.55.34.24.93-.23,1.12.33s-.27.86-.54,1.23c1.68.63-.11,1.29.06,2.05l.24,0c.39,0,.95-.35,1.15.19s-.41.84-.82,1.11-.81.47-1,1a.24.24,0,0,0,.21.11c.47,0,1.05-.59,1.37,0s-.35,1-.67,1.37a5.75,5.75,0,0,1-1.52,1.11,9.87,9.87,0,0,1,2.49,0c.51,0,.92.54.42.84-1,.63-1.94,1.56-3.19,1.84.37.17.66-.06,1-.28.88-.54,1.54-.27,1.76.73.07.32.16.51.48.56,1,.14.74.65.38,1.23a4.47,4.47,0,0,1-2.4,2A3.4,3.4,0,0,0,174,389a.56.56,0,0,1,.83.12c.21.33-.08.55-.29.8-.89,1.08-1.87,2.07-2.93,3.33,1,0,1.55.28,1.63,1.13a.39.39,0,0,0,.17.3c1.16.58,1.21,1.31.31,2.19a.3.3,0,0,0,0,.5c.19.15.38.4.27.6-.36.69-.37,1.15.52,1.41.31.09.24.55.07.84a5.36,5.36,0,0,0-.41,1.42c1-.57,1.12.2,1.13.86,0,.84-.3,1.76,1,2,.13,0,.05-.07.08.06a6.49,6.49,0,0,0,.33,2c.36.76-.28,1.24-1,1.58-.88.43-1,.87-.22,1.63a2.41,2.41,0,0,1,.67,2.36,1.71,1.71,0,0,1-2.16,1.55c.35.49.86.3,1.3.34a1.06,1.06,0,0,1,1,.84c.15.58-.27.75-.69.91a5.15,5.15,0,0,0-1,.61c-.89.62-1.08.55-1.28-.52,0-.1,0-.29-.08-.29-.5,0-.72-.26-1-.68a7.58,7.58,0,0,1-.76-1.18,5.59,5.59,0,0,0-.81,1.5c-.13.36-.64,1,.37,1.32.77.27.28,1.29-.08,1.57a1.51,1.51,0,0,0-.53,1.69c.26,1.58-1.06,2.15-2,3-.3.28-.95.18-.74.94s.33,1.09,1.12,1c.6-.07,1.23.11,1.81-.29s.9-.11,1.26.27a.82.82,0,0,1,.14,1,1.22,1.22,0,0,1-1.25.7,6.65,6.65,0,0,1-1.38-.56,2.6,2.6,0,0,1,.82,2.35,11.67,11.67,0,0,0,.18,1.75c0,.86.24,1.46,1.21,1.67a1.87,1.87,0,0,1,1.27,1.15,1.46,1.46,0,0,0,1.85,1,.59.59,0,0,1,.23,0,.86.86,0,0,1,.85.68c.08.43-.18.66-.55.77-.89.25-.7.69-.18,1.13s.66.78,1,1.14a.73.73,0,0,0,.85.23c.3-.13.35-.4.36-.69a3.6,3.6,0,0,0-.27-1.93c-.67-1.22-.47-1.64.84-2a5.78,5.78,0,0,0,.92-.34,1.68,1.68,0,0,1-1.36-.89c-.16-.33-.42-.38-.78-.32-.88.12-1.15-.39-1-1.14a2.06,2.06,0,0,0-.13-1.13,2.54,2.54,0,0,1,1.26-3.44,2,2,0,0,0-.16-3.32c-.57-.42-1.12-.85-1.68-1.28a2.09,2.09,0,0,1-.82-1c-.13-.45-.26-1,.23-1.28s.75.19.94.5c1.11,1.89,3.1,1.69,4.84,2,.51.1.46-.34.32-.63-.37-.79-.3-1.36.66-1.57.12,0,.26-.12.26-.22.05-1,.59-1.88.15-2.84-.6-1.3-.62-1.29.87-1.9-1-1.11-.68-2.48-.83-3.77a.93.93,0,0,1,.34-.94c1.13-.8,1-1.93.8-3-.1-.51-.15-.81.44-1,1.16-.3,1.55-1.34.67-2.14s-.57-2.31-1.28-3.3a.21.21,0,0,1,0-.22c1-.76.91-1.79.9-2.87,0-.32.13-.57-.11-.9-.59-.8-.76-1.89-1.66-2.51-.15-.11-.27-.39-.19-.53.56-1,.21-2.17.7-3.16a1.71,1.71,0,0,1,.63-.83,5.4,5.4,0,0,0,2.15-2.52,2,2,0,0,0-1.46-3.06,3.25,3.25,0,0,0-.82-.07c-1,.08-1.39-.45-1.6-1.33a2.35,2.35,0,0,0-2.85-1.87c-.19,0-.38.08-.58.09a.74.74,0,0,1-.78-.4c-.16-.38.19-.54.45-.71s.51-.2.75-.33c1-.55,1.11-.89.37-1.81s-.18-1.09.69-1.3c-.41-.17-.79-.23-.82-.68s.41-.59.27-1c-.44-.14-.75.16-1.09.33-.61.3-1,0-1.51-.34a.44.44,0,0,1-.12-.62c.23-.48.68-.58,1.15-.69s1.17.38,1.19-.48c0-1-.75-.71-1.34-.68-.31,0-.67.06-.81-.31a.64.64,0,0,1,.35-.8c.92-.35,1-1.22,1.33-1.94a1.83,1.83,0,0,1,2.26.93c.12.24.21.4.51.33a1.48,1.48,0,0,1,1.81.92c.45.93-.47,1.19-.89,1.75.33.45,1.26.22,1.22,1,0,.63-.64.86-1.05,1.39.82-.07,1.31-.06,1.17,1-.08.62.64,1.33.65,2.22,0,.37,1,.48,1.51,0,.68-.69,1.29-1,2-.06.41.51.62.08.8-.32.51-1.14,1-1.23,1.86-.34a2.34,2.34,0,0,1,.79,2.29.73.73,0,0,0,.54-.74,2.69,2.69,0,0,1,1.12-2c.28-.22.59-.54.52-.88-.3-1.54.79-2.91.46-4.51-.12-.6.18-1.4,0-2.13a1.9,1.9,0,0,0-.43-.93c-.67-.8-.55-1.24.49-1.39.75-.11.91-.33.7-1.05a2.39,2.39,0,0,1,.36-2.23c.43-.53.28-.9-.18-1.3-.69-.59-1.09-1.21-.28-2.07.39-.41.12-1-.08-1.44-.62-1.43-1-2.95-1.56-4.4a9,9,0,0,1-.69-4.78,1.18,1.18,0,0,0-.65-1.26,4.77,4.77,0,0,1-1.94-2.71c-.33-1.05-.19-1.19,1.12-1-1.19-.88-.65-2.15-1-3.19-.19-.57.64-.55,1-.83-.14-.57-.7-.59-1-.85-1.17-.85-1.28-1.65-.29-2.69a.67.67,0,0,0,.14-.84,4.73,4.73,0,0,0-.87-1.39c-.65-.59-1.3-1.13-1.05-2.16.05-.21-.16-.44-.34-.59a13,13,0,0,1-2.22-3.29,4,4,0,0,1-.72-2.21,2,2,0,0,0-.39-1.2,3.81,3.81,0,0,1-.63-2,2.17,2.17,0,0,0-.55-1.39,2.67,2.67,0,0,1-.24-3.28,2.34,2.34,0,0,0-.05-2.41c-1-2.09-1.06-4.39-1.37-6.63-.1-.66.49-1.13.54-1.77a13.11,13.11,0,0,0-.92-6.52,4,4,0,0,1-.3-2.17,1,1,0,0,1,1,0c1.16.53,2.18,3.24,1.6,4.35a2,2,0,0,0-.16,1.81,6.3,6.3,0,0,1-.06,4.24,1.43,1.43,0,0,0,.24,1.5,4.14,4.14,0,0,1,1,2.81,3.12,3.12,0,0,0,.53,1.76,3.42,3.42,0,0,1,.1,3.58,1.71,1.71,0,0,0,.09,1.85c1,1.6,1.45,3.48,2.87,4.81a1,1,0,0,1,.12,1.21c-.43.78-.07,1.34.47,1.86a7.77,7.77,0,0,0,1.08.91,2.23,2.23,0,0,1,1.16,2.22,6.33,6.33,0,0,0,1,2.95c.3.63.6,1.27.91,1.91s.37,1.13-.44,1.53,0,.83.22,1a4.46,4.46,0,0,1,2,2.52,20.9,20.9,0,0,0,1.44,5.08,1.49,1.49,0,0,1-.11,1.26,1.43,1.43,0,0,0,0,1.35c.06.14.17.3.14.44a2.7,2.7,0,0,0,.84,2.65.6.6,0,0,1,.07.77,1.87,1.87,0,0,0,.09,2.1,25.43,25.43,0,0,1,.93,3.13c.39,1.13.39,2.34.78,3.46a3.16,3.16,0,0,1-.05,2.08,2.43,2.43,0,0,0-.22.9c0,1.14,0,1.14-1.17,1.12.23.4.66.75.46,1.25-.38,1,0,2.13-.56,3.1-.2.37.05.57.29.79a1,1,0,0,1,.19,1.38,5.4,5.4,0,0,0-.36,4.51c.28.71.26,1.23-.61,1.56s-1.18,1.51-2.08,2c-.23.11,0,.51.16.74a2.35,2.35,0,0,1,.14,1.82c-.14.57-.4,1.06-1.05,1.09s-.82-.49-1-1.26a3.81,3.81,0,0,1-1.18,2.76,1.29,1.29,0,0,0-.19,1.71,5.3,5.3,0,0,1,.69,4.14,2.23,2.23,0,0,0,1,2.47c.48.34,1.12.58.79,1.34s-.91.79-1.58.62a.56.56,0,0,0-.53.08c.4,1,.38,2.24,1.35,3.09a1.09,1.09,0,0,1,.35,1.28c-.19.45-.59.21-.92.21-.61,0-1,.67-.81,1.38a3.3,3.3,0,0,0,1.11,1.76c1.43,1.17,1,2.78.91,4.26,0,.57-.82.71-1.32.34-.2-.16-.16-.55-.54-.55-.19.43.16.5.4.68,1.12.82,1,2-.21,2.49a1.25,1.25,0,0,0-.83,1c-.13.65-.29,1.3-.36,2a1.68,1.68,0,0,1-.74,1.25,3.11,3.11,0,0,0-.42,4.11c1.1,1.33.92,2.28-.63,3.09-.56.29-.88.53-.49,1.23a17,17,0,0,1,1.42,4.58c.24,1.19.07,1.52-1.12,1.81-.71.17-.8.52-.56,1.1s.4,1.11.69,1.62.58,1.12,0,1.6-.93-.33-1.45-.66c.14,1,.32,1.8,1.36,2.07s1,.89.67,1.65c-.65,1.46-1.25,2.95-3,3.5,1,1.36,1,1.55-.45,2.12a2.09,2.09,0,0,0-.81.66,1.92,1.92,0,0,1-1.15.75c-1.05.18-1.62.73-1.6,1.75,0,.82-.67,1.42-.53,2.3.06.39-.57.56-1,.59s-.65-.23-1-.23c-.16.31,0,.49.15.68a1.41,1.41,0,0,1-.33,2.13c-.64.53-1.32,1.15-.73,2.25.31.58-.29,1-1,.78a2.36,2.36,0,0,1-1.62-2.25.4.4,0,0,0-.35-.48c-.49-.14-.91-.45-1.41-.59,0,.36.27.47.43.67.55.72.48,1.17-.37,1.39-1.17.31-1.51,1.67-2.65,2-.14,0-.21.26-.15.41.44,1,.05,2,.07,3a1.92,1.92,0,0,0,.46,1.17c.19.26.34.6.08.85s-.64,0-.91-.22-.39-.49-.74-.73c.66,1.57-.09,3.15.35,4.67.11.38-.23.64-.61.75s-.56.18-.47.54.38.24.65.19c1.29-.27,1.49.88,2,1.58a1.24,1.24,0,0,1-.13,1.78c-1,1.11-1,1.15-2.37,1.39.29.87.17,1.87,1.47,2.18.62.15.58.83-.06,1.12-.94.43-.61.88-.14,1.42,1,1.13,1,1.52-.29,2.41a.68.68,0,0,0-.25,1.07c.08.13.18.25.27.38.24.35.58.71.31,1.17s-.72-.12-1.11.14a4,4,0,0,0,.88,2.34,5.4,5.4,0,0,1,1,2.11c.16.53.14,1-.55,1.18-.47.09-.54.38-.48.77a2.2,2.2,0,0,1-.06,1,1.47,1.47,0,0,0,.81,1.87c1.16.62,1.82,1.38,1.42,2.82a3.28,3.28,0,0,0,.37,1.93c.36,1,.15,1.44-.78,1.87a.81.81,0,0,0,0,1.46C172.89,499.07,173.16,499.34,173,500Z" transform="translate(-0.7 0.07)"/>
</svg>
</svg>

Path CSS animation fill:
<!DOCTYPE html><html><head><style>body{background:#444}svg{width:648px;fill-opacity:0;stroke-dasharray:361;stroke-dashoffset:361;animation:fl 1s 1s linear forwards}#keyframes fl{to{fill-opacity:1}}</style></head><body><svg>
<path d="M1,20H37V32H25V92H13V32H1z" stroke="#fff" fill="#fff">
<animate dur="1" attributeName="stroke-dashoffset" to="0" fill="freeze"/></path>
</svg></body></html>
Path CSS animation stroke:
<!DOCTYPE html><html><head><style>body{background:#444}svg{width:648px;fill:#444;stroke-dasharray:361;stroke-dashoffset:361;animation:strk 1s linear forwards}#keyframes strk{to{stroke-dashoffset:0}}</style></head><body><svg>
<path d="M1,20H37V32H25V92H13V32H1z" stroke="#fff">
<animate dur="1" begin="1" attributeName="fill" to="#fff" fill="freeze"/></path>
</svg></body></html>

How to draw an animated SVG to a Canvas at a specific time offset?

Consider any animated SVG defined as HTML <svg> tag. How do I draw the SVG's content at a specific time index to a canvas using client-side JS?
What I am looking for is a function drawAnimatedSVG(fromSVG, toCanvas, animationOffset) that I can invoke with an SVG and Canvas DOM Node and number specifying the amount of secods (as floating point value) elapsed since the animation's beginning. The drawn result should only be a still image. I know that an SVG Element has a setCurrentTime method, but I can't figure out how to get the actual image at a specific time.
Please note that just waiting or delaying is not an option for me, as the SVGs I am dealing with contain animations lasting for minutes. That's why this answer does not help me.
Example SVG:
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" rx="15" />
<circle r="5" fill="blue">
<animateTransform
attributeName="transform"
type="translate"
from="10,10" to="90,90"
begin="0" dur="2" repeatCount="0" />
<animateTransform
attributeName="transform"
type="translate"
from="90,90" to="10,90"
begin="2" dur="2" repeatCount="0"/>
<animateTransform
attributeName="transform"
type="translate"
from="10,90" to="10,10"
begin="4" fill="freeze"
dur="2" repeatCount="0"/>
</circle>
</svg>

How to stop SVG animateMotion on hover?

I am using a path:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" xml:space="preserve">
<g class="path path--1">
<path class="path_layer" id="path1" d="M200,240c-80,0 -80,-80 0,-80c80,0 80,80 0,80" stroke="#333333" stroke-width="2" fill="none"/>
</g>
<circle r="5" fill="white" id="planet">
<title>Computer Science</title>
<animateMotion dur="15s" repeatCount="indefinite" keyPoints="0.5;0;1;0.5" keyTimes="0;0.5;0.5;1" calcMode="linear">
<mpath xlink:href="#path1" />
</animateMotion>
</circle>
along which I will be animating the circle as shown above.
Now, I would like to stop the animation on hover, any idea how to do this?
When I hover on the circle, I want to stop the animation and later resume it from wherever I stopped it. The CSS way does not work for this. Should I use JS, if so, how?

You can use the SVG DOM to pause and unpause the animation timeline. The <svg> element's interface has the following useful methods:
pauseAnimations(); // pauses the SMIL animation
unpauseAnimations(); // resumes the SMIL animation
setCurrentTime(); // changes the timeline thereby allowing you to rerun an animation

svg path animate whole whole path

I have a simple path that animates with from="0%" to="100%", but only a part of the path shows up. How can I animate from the beggining to the end of the path?
<svg>
<path d="M100,100 S150,100 200,150 S150,150 100,200 S100,200 100,300 S200,300 300,300 S200,300 100,200 S100,200 100,300 S200,300 300,300 S315,300 330,200" stroke="black" stroke-width="1" fill="none" stroke-dasharray="100000,100000" id="foo">
<animate xlink:href="#foo" attributeName="stroke-dasharray" dur="1s" fill="freeze" from="0%" to="100%"></animate>
</path>
</svg>
http://jsfiddle.net/8g2k2cy4/

Ok, found a way to it, maybe there are better ways...
So the svg path element has a .getTotalLength(); method that returns the path length. This way I can apply/use that in the animate element via JavaScript like:
var animEl = document.querySelector('animate');
animEl.setAttribute('to', animEl.parentNode.getTotalLength());
http://jsfiddle.net/8g2k2cy4/1/

SVG transform circle into simple line

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle again.
Yet I can't find much information on how to approach it... Any and every help will be greatly appreciated!

An example of the animation using scale
<svg width="500" height="150">
<circle cx="60" cy="60" r="40" style="stroke:#006600; fill:#00cc00" >
<animateTransform
attributeName="transform"
begin="0s"
dur="2s"
type="scale"
from="1 1"
to="1 0.01"
repeatCount="indefinite"
/>
</circle>
</svg>

Categories