We Keep Coding

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

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>

Related

I am creating an icon component for which I am storing my icons as svg co-ordinates.
Eg:
trash: 'M192 1024h640l64-704h-768zM640 128v-128h-256v128h-320v192l64-64h768l64 64v-192h-320zM576 128h-128v-64h128v64z'
But certain svg icon files have multiple paths(like below). But I intend to have only one path value for storing my icon co -ordinates. Can someone please tell me what can I do to solve this?
<svg id="add-contact-communication-workflow-system-filled" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g id="Group_822" data-name="Group 822" transform="translate(-938.662 -1091.778)">
<g id="Group_821" data-name="Group 821">
<path id="Path_821" data-name="Path 821" d="M948.432,1103.947a4.063,4.063,0,1,0-4.063-4.062A4.067,4.067,0,0,0,948.432,1103.947Z"/>
<path id="Path_822" data-name="Path 822" d="M948.432,1104.844a7.9,7.9,0,0,0-7.89,7.89,1.539,1.539,0,0,0,1.539,1.54h12.7a1.54,1.54,0,0,0,1.54-1.54A7.9,7.9,0,0,0,948.432,1104.844Z"/>
</g>
<path id="Path_823" data-name="Path 823" d="M960.033,1095.873h-1.84v-1.84a.75.75,0,0,0-1.5,0v1.84h-1.84a.75.75,0,0,0,0,1.5h1.84v1.84a.75.75,0,0,0,1.5,0v-1.84h1.84a.75.75,0,0,0,0-1.5Z"/>
</g>
<rect id="Rectangle_503" data-name="Rectangle 503" width="24" height="24" fill="none"/>
</svg>
here

As long as the paths have the same style, and none of them have a transform different from the others, you can simply append the paths together into one.
M948.432,1103.947a4.063,4.063,0,1,0-4.063-4.062A4.067,4.067,0,0,0,948.432,1103.947Z M948.432,1104.844a7.9,7.9,0,0,0-7.89,7.89,1.539,1.539,0,0,0,1.539,1.54h12.7a1.54,1.54,0,0,0,1.54-1.54A7.9,7.9,0,0,0,948.432,1104.844Z M960.033,1095.873h-1.84v-1.84a.75.75,0,0,0-1.5,0v1.84h-1.84a.75.75,0,0,0,0,1.5h1.84v1.84a.75.75,0,0,0,1.5,0v-1.84h1.84a.75.75,0,0,0,0-1.5Z
Note that the three paths, in your example SVG, are inside a group that has a transform. You may need to take account of that in your component if you want them to display in the correct place.

You have to get rid of transforms and groups first. Then only it can be done. you can try the 'https://www.npmjs.com/package/svgo' module to optimize the svgs and convert them into a single path. But again you have to get rid of groups and transforms.

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)

We are using Fabric.js 1.7.20. We aren't able (yet) to update to 2.0+.
http://jsfiddle.net/tcem4f4L/
The issue is that we are adding SVG objects to the map, but when they get output to an svg, some padding within the SVG causes the rendering to not look correct. The svg x/y coordinates and any lines within them need to have the stroke accounted for.
I'm trying to figure out a clean way to handle these and ensure that the bounding box on the canvas is around the SVG for aligning purposes.
Example SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="95" height="11" viewBox="0 0 95 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="95" height="11"></rect>
<path stroke-linecap="square" stroke-width="3" d="M1,9 l93,0"/>
</g>
</svg>
So (I think) to fix it on output to SVG, I'd need to change the rect x and y to 0.5 and the path to d="M1.5,9.5 l93,0"
I am worried that there are other things in this I'm missing.

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

I have several SVG path elements, each of which is inside a parent svg element, like so:
<svg class="connector" style="position:absolute;left:277.5px;top:65px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
<path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>
<svg style="position:absolute;left:277.5px;top:109px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="108.5px" width="410.015625px">
<path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>
The svg elements (and thus their child paths) are visually overlapping.
I want to have a hover effect, so I've setup a mouseenter and mouseleave event on each of the paths.
When the mouse is overtop of an area that doesn't overlap, the hovering works as expected, however, when the mouse is over top of an area where the bounding rects of the svg elements overlap, the mouse events are not triggered correctly.
If, however, I place the same two path elements into a single svg as shown below, then the mouse hovering works as expected, even where the bounding rectangles overlap.
<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" pointer-events:"none" version="1.1" xmlns="http://www.w3.org/1999/xhtml" height="152.5px" width="410.015625px">
<path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>
<path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>
</svg>
JSFiddle
Here is a jsfiddle showing the two cases. The red lines are in separate svg elements and the green lines are in a single svg element. The green lines work as I expect. The red lines do not.
Notes
The paths only look different because the two SVG elements had different "top" attributes in the first example.
Some similar questions mention the need to set pointer-events, but I think I've got those set correctly (to none on the svg element, and to visibleStroke on the paths).
Question
How can I make the mouse handle of the first case, with two svg elements, behave the same way as for the second case with a single svg element?

Adding pointer-events="none" with the correct syntax (you are using a : instead of an =) to the svg on top seems to work for me at least on Firefox. Like so...
<svg class="connector" style="position:absolute;left:277.5px;top:65px" height="152.5px" width="410.015625px">
<path fill="none" stroke="#ff0000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path1"></path>
</svg>
<svg style="position:absolute;left:277.5px;top:109px;" pointer-events="none" height="108.5px" width="410.015625px">
<path fill="none" stroke="#880000" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path2"></path>
</svg>
<svg class="connector" style="position:absolute;left:277.5px;top:265px" position="absolute" height="152.5px" width="410.015625px">
<path fill="none" stroke="#00ff00" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 149.5 410.015625 149.5" id="path3"></path>
<path fill="none" stroke="#008800" stroke-width="6" pointer-events="visibleStroke" d="M0 3C100 3 310.015625 105.5 410.015625 105.5" id="path4"></path>