Resize polygon maintaining position - jQuery - javascript

So I have this svg that has multiple polygons inside, what I want to accomplish is to animate one polygon inside it (resize it with easing) such that it doesn't move from its place. Considering that the polygon position is set by points="..." (i guess..).
I want to do this preferably in jQuery or CSS but plain JavaScript works too or any other libraries..
Here is an example:
shapes.svg:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-47 49 404 404" style="enable-background:new -47 49 404 404;" xml:space="preserve">
<style type="text/css">
.st0{fill:#154E78;}
.st1{fill:#006496;}
.st2{fill:#047EBE;}
.st3{fill:#CD99B2;}
.st4{fill:#D464A4;}
.st5{fill:#CC78B1;}
</style>
<polygon id="XMLID_14_" class="st0" points="213.4,177 241.1,129 268.9,177 "/>
<polygon id="XMLID_13_" class="st1" points="240.2,129 212.4,177 184.7,129 "/>
<polygon id="XMLID_15_" class="st2" points="156,177 183.7,129 211.4,177 "/>
<polygon id="XMLID_20_" class="st3" points="98.6,177 126.3,129 154,177 "/>
<polygon id="XMLID_22_" class="st4" points="41.1,177 68.9,129 96.6,177 "/>
<polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 "/>
</svg>
preview:
shapes.svg
what I want to accomplish is:
resized.svg
By resizing the 2nd polygon inside the svg
I dont have enough reputation to show you what happens if I scale it to 1.3 for example, but what happens is that the polygon moves along the artboard.


A simple scale transform (e.g. <polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 " transform="scale(1.5)"/>) will scale the polygon points away from the origin. You want to scale the polygon points away from the center of the polygon. You can accomplish this using a transform that translates polygon center to origin, scales, and then translates polygon center back to initial location (e.g. <polygon id="XMLID_29_" class="st5" points="125.3,129 97.6,177 69.8,129 " transform="translate(97.55,153) scale(1.5) translate(-97.55,-153)"/>). In this example, I am using the center of the polygon's bounding rectangle as the center of the polygon (i.e.(125.3+69.8)/2=97.55, (129+177)/2=153).

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>

SVG make different sections of the path in different colors

I have been trying to implement the following requirements.
1. SVG path to have multiple colors on different sections (eg - red color the curves and rest of it, in black color)
2. Only allow mouse event- click on those colored areas (curves)
I have tried with plain javascript and snap.svg
Plain html & Javascript
[Codepen using HTML & Js][1]
SNAP.svg
[Codepen using SNAP.svg][2]
[1]: https://codepen.io/sanathko1234/pen/vvMQQZ
[2]: https://codepen.io/sanathko1234/pen/OrGoRa
How can this be achieved?

One solution would be to use the path twice: first the green one and next the one using stroke-dasharray. The dashes are only over the curves. If you don't like the position or the length of the dashes change them to what you need. The gaps are not sensitive to mouse events, only the dashes are.
In css I've added #gold:hover{cursor:pointer} so that you can see that only the dashes are sensitive to the mouse.
I hope it helps.
svg{border:1px solid}
use{fill:none;stroke-width:18;}
#gold:hover{cursor:pointer}
<svg viewBox="-10 50 580 360" width="580" height="360" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="svg_1" d="m555,272c1,0.76736 4,85.76736 -71,97.76736c-75,12 -387,-39 -388,-39.76736c0,-0.23264 -29,-1.23264 -45,-21.23264l-42,-124.76736c-3,-11.23264 -3,-21.23264 3,-26.23264c6,-5 46,-67 69,-69.76736l474,184z" />
</defs>
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="360" width="580" x="-10" y="50"/>
</g>
<g>
<title>Layer 1</title>
<use xlink:href="#svg_1" stroke="green" />
<use xlink:href="#svg_1" stroke="gold" stroke-dasharray ="130 370 110 60 90 40 90 400 52.45" id="gold" pointer-events="stroke" />
</g>
</svg>
Observation: the sum of the dashes and the gaps is 1342.45 which is also the total path length.

Exporting to SVG in fabric with svgs doesn't match canvas

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.

D3.js Text on path not rendered (no height / width)

I am trying to render circles which have a text inside, that runs along a given path.
The markup d3 produces looks fine, but Chrome is not showing the texts.
Upon inspection it says text elements have 0 width and 0 height.
This is sample markup including only two circles:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 600">
<g>
<g transform="translate(334.14792673070184,58.96385042366173)">
<defs>
<path id="path-1" d="m5,50 a45,45 0 0 0 90,0"></path>
</defs>
<circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
<text fill="#333" font-size="15px">
<textpath xlink:href="#path-1" start-offset="0%">123456</textpath>
</text>
<use xlink:href="#path-1" fill="#666" opacity="0.1"></use>
</g>
</g>
<g transform="translate(374.66047394649974,371.7948729806046)">
<defs>
<path id="path-2" d="m5,50 a45,45 0 0 0 90,0"></path>
</defs>
<circle class="circle" fill="#ccc" cx="50" cy="50" r="50"></circle>
<text fill="#333" font-size="15px">
<textpath xlink:href="#path-2" start-offset="0%">123456</textpath>
</text>
<use xlink:href="#path-2" fill="#666" opacity="0.1"></use>
</g>
</svg>
When I inspect the markup in Chrome console and click "Edit as HTML" on the SVG element, make a random change, save & exit - the SVG suddenly renders correctly.
The exact same thing happens in Firefox and Opera.
Copy pasting the generated markup into a jsfiddle renders everything as expected.
I have tried pulling the < defs > tags out of each individual group into a single global < defs > but it did not solve the problem.
I have also looked at user-agent-stylesheet and other CSS rules that might interfere with rendering.
Is this a problem with how the SVG tag is included and/or the container element's width/height properties? I have been trying different things to fix this for a couple of hours now...
Here is the full SVG markup http://pastebin.com/J2Lz8p23
Here are the relevant parts in my code http://pastebin.com/Bym8kJVN

Mouse handling for overlapping SVG elements not working as expected

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>

Categories