We Keep Coding

Regex round all RGB instances to nearest monochrome, example: `... fill="rgb(252,252,253)" ...` => `... fill="rgb(255,255,255)" ...`

I have a task to replace all RBG instances in a string to the nearest monochrome values.
The complexity is slowing down the process and I'd like to know if there's a faster way to replace all the instances in the string.
As you can see bellow, for rounding up to white 255 I just deleted the paths to save time. But it's just a quick hack and not a solution to my problem.
The string is an SVG style text with a lot of data:
// Completely delete white paths:
//svg = svg.replace(/<path[^>]*?fill="rgb\(255[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(254[^>]*?\/>/g, '')
svg = svg.replace(/<path[^>]*?fill="rgb\(253[^>]*?\/>/g, '')
...
// Replace almost black with full black
svg = svg.replace(new RegExp('7,7,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,7', 'g'), '0,0,0')
svg = svg.replace(new RegExp('6,6,6', 'g'), '0,0,0')
...
As you can see from a part of the code, sometimes not all of the three RGB parameters are the same so it's really slowing down the code and I'm stressing out.
There's a treshold if any of the three RBG parameters is bellow 200, it will be all black 0, otherwise it should be white with all values at 255.
I have only limited experience with regex so this is about as much as I could do.
Any improvements would be really helpful.

Short answer
This is not really the way to create monochrome, and will usually not be the "nearest" monochrome either. Though I am not clear on what your actual goals are, so let's discuss.
Longer Answer
The R G and B channels do not contribute equally to the total luminance that makes a monochrome version of an image. And also, yes RGB values are not linear in nature. I see that your breakpoint is at value 200, I'm curious how you arrived at that and what the purpose is of splitting something into either black or white.
If you had monochrome values to start with, the middle contrast point is closer to 170. The middle grey breakpoint in terms of surface colors is usually considered to be 18% which works out to 118 in sRGB, due to the nonlinear encoding of the sRGB TRC.
If you want an accurate grayscale, then the procedure would be to first linearize and then apply coefficient to each of the channels and sum them to create a luminance Y.
The down and dirty simple version of the JS code to determine that value given a tuple of sRGB numerical values, finding the mid-point to flip, and related topics I discuss in this answer: https://stackoverflow.com/a/69869976/10315269
But here's a code snippet:
let Ys = Math.pow(sR/255.0,2.2) * 0.2126 +
Math.pow(sG/255.0,2.2) * 0.7152 +
Math.pow(sB/255.0,2.2) * 0.0722; // Andy's Easy Luminance for sRGB. For Rec709 HDTV change the 2.2 to 2.4
This gives you the weighted light value from the monitor, which can then be used to determine a break point.
If we put this together with some regex to help parse values, then:
let container = document.getElementById('BWBlock');
function setSVGtoBW (myOriginalSVG = "<null SVG string>") {
let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;
// regex to parse the hex string
// We are explicit about 0-9a-f instead of \w, because
// We no not want to replace ID calls like <use '#newLines'>
function findYflip (match, p1, p2, p3, offset, string) {
let Ys = Math.pow(parseInt(p1,16)/255.0,2.2) * 0.2126 +
Math.pow(parseInt(p2,16)/255.0,2.2) * 0.7152 +
Math.pow(parseInt(p3,16)/255.0,2.2) * 0.0722; // Andy's Easy Luminance Estimate for sRGB. For Rec709 HDTV change the 2.2 to 2.4, and use different coefficients for P3 etc!
return (Ys > 0.4) ? "#ffffff" : "#000000"; // luminance based color flipper.
};
return myOriginalSVG.replace(rex, findYflip)
};
// An svg for demo purposes
let placeholder = "<?xml version='1.1' encoding='UTF-8'?> <!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> <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 494.6 525.8'> <title>CIE 1931 xyY Gamut Comparison</title> <defs> <path id='locus' d='M 150,473 C 147,473 145,471 142,469 C 135,462 129,455 124,446 C 121,441 118,436 116,431 C 113,424 110,416 107,408 C 103,396 99,385 95,373 C 86,339 77,298 72,264 C 66,226 61,179 62,141 C 63,118 65,81 80,60 C 84,54 91,50 98,49 C 105,48 112,51 118,53 C 140,60 160,76 178,90 C 236,135 287,191 339,243 C 360,264 380,284 401,305 C 409,313 417,321 426,329 C 428,332 430,334 433,337 C 434,337 434,338 435,339 C 435,339 436,340 436,340'/> <path id='gamutStot' d='M 76.875,-30.750 L 153.75,-307.5 L 328,-169.125 Z'/> <g id='lines'> <use xlink:href='#gamutStot' stroke='#3377aa' fill='#eeccff' stroke-width='6' /> </g> <g id='labels'> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#eedd22' stroke-width='4' stroke-linejoin='round' fill='#3300aa'/> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#ffaa11' stroke-width='4' stroke-linejoin='round' fill='#6622ff' transform='translate(0,100)' /> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#6622ff' stroke-width='4' stroke-linejoin='round' fill='#ffaa11' transform='translate(0,200)' /> <path d='M 520,-865 L 820,-865 L 820,-790 L 520,-790 Z' stroke='#3300aa' stroke-width='4' stroke-linejoin='round' fill='#eedd22' transform='translate(0,300)' /> <text x='540' y='-10' text-anchor='start' fill='#3300aa' font-size='15'>Copyright © 2021 Myndex Research</text> </g> </defs> <use stroke='#234567' stroke-width='2' fill='#ccddee' xlink:href='#locus'/> <path stroke='#6622cc' stroke-width='2.75' stroke-linecap='square' fill='none' d='M 60,15 v 461 h 410 M 60,476 v 4 M 86,476 v 4 M 111,476 v 4 M 137,476 v 4 M 162,476 v 4 M 188,476 v 4 M 214,476 v 4 M 239,476 v 4 M 265,476 v 4 M 290,476 v 4 M 316,476 v 4 M 342,476 v 4 M 367,476 v 4 M 393,476 v 4 M 418,476 v 4 M 444,476 v 4 M 470,476 v 4 M 60,476 h -4 M 60,450 h -4 M 60,425 h -4 M 60,399 h -4 M 60,373 h -4 M 60,348 h -4 M 60,322 h -4 M 60,297 h -4 M 60,271 h -4 M 60,245 h -4 M 60,220 h -4 M 60,194 h -4 M 60,169 h -4 M 60,143 h -4 M 60,117 h -4 M 60,92 h -4 M 60,66 h -4 M 60,41 h -4 M 60,15 h -4'/> <path opacity='0.5' stroke='#88aaff' stroke-dasharray='4,4' stroke-width='3' fill='none' d='M 85.5,475.5 v -460.8 M 111.5,475.5 v -460.8 M 136.5,475.5 v -435.2 M 162.5,475.5 v -409.6 M 188.5,475.5 v -384 M 213.5,475.5 v -358.4 M 239.5,475.5 v -332.8 M 264.5,475.5 v -307.2 M 290.5,475.5 v -281.6 M 316.5,475.5 v -256 M 341.5,475.5 v -230.4 M 367.5,475.5 v -204.8 M 392.5,475.5 v -179.2 M 418.5,475.5 v -153.6 M 444.5,475.5 v -128 M 469.5,475.5 v -102.4 M 60.5,450.5 h 409.6 M 60.5,424.5 h 409.6 M 60.5,399.5 h 409.6 M 60.5,373.5 h 409.6 M 60.5,347.5 h 384 M 60.5,322.5 h 358.4 M 60.5,296.5 h 332.8 M 60.5,271.5 h 307.2 M 60.5,245.5 h 281.6 M 60.5,219.5 h 256 M 60.5,194.5 h 230.4 M 60.5,168.5 h 204.8 M 60.5,143.5 h 179.2 M 60.5,117.5 h 153.6 M 60.5,91.5 h 128 M 60.5,66.5 h 102.4 M 60.5,40.5 h 76.8 M 60.5,15.5 h 51.2 M 111.5,15.5 L 469.5,373.5'/> <g transform='translate(60,476)' stroke-width='4' stroke-linejoin='round' stroke='#FF4411' fill='#FF4411'> <use xlink:href='#lines'/> </g> <g transform='translate(60,476) scale(0.5125)' > <use xlink:href='#labels' stroke='none'/> </g> <g font-family='Times, serif' font-size='10'> <g fill='#6622cc'> <g text-anchor='middle'> <text x='240' y='505' font-size='30' font-style='italic'>x</text> </g> <g text-anchor='end'> <text x='40' y='251.4' font-size='30' font-style='italic'>y</text> </g> </g> </g> </svg> ";
let newBWsvg = setSVGtoBW(placeholder);
container.innerHTML = newBWsvg;
CODEPEN
I set this up at CodePen here: https://codepen.io/myndex/pen/rNzZWWB
Notice the regex:
let rex = /#([0-9a-f]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})/ig;
We are explicit about 0-9a-f instead of \w, because we no not want to replace ID calls references like <use '#newLines'> which could become <use '#000000es'> if we used (\w\w).
Greyscale
Also, you could now make this a greyscale converter, instead of black and white, by replacing the luminance color flipper return (Ys > 0.4) ? "#ffffff" : "#000000"; with instead a Y to sRGB conversion:
let sRGBgr = ((Math.pow(Ys,1/2.2)*255)&0xff).toString(16).padStart(2,'0');
return "#" + sRGBgr + sRGBgr + sRGBgr
This converts the Y back to an sRGB value, and concatenates it to an sRGB hex. The codepen for this greyscale version is https://codepen.io/myndex/pen/mdMGmVw

Can you use GSAP in a wix HTML iframe element?

I have got aa animation working using HTML and javascript with GSAP, however when i implement this code as HTML content in wix for my website it fails to work?
Is it possible to use GSAP within the wix environment and if so how do I import the GSAP module?
Thanks in advance for any help!
Edit: This is the code i have trued within the HTML element:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Page Title</title>
<link rel="stylesheet" href="./style_test.css" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"defer></script>
<script type="text/js" defer>
let tween = gsap.from('.r', { duration: 3, y: '10%', x:'300%' })
tween.repeat(0);
</script>
<div class="container" style=
"width:100%; height: auto;
border:10px dashed black;">
<svg
id="svg5344"
version="1.1"
id="svg"
width="100%" height="auto"
viewBox="58 0 180 200"
>
<path
style="fill:none;stroke:#808080;stroke-width:0.02401723px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 85.427742,87.94295 Z"
id="path7543" />
<g
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="axpro">
<path
d="m 122.69115,99.69019 q 0.25918,0.77427 0.32152,1.22702 0.0656,0.45276 -0.17388,0.68897 -0.23622,0.22966 -0.83891,0.26247 -0.60235,0.0656 -1.65648,0.0656 -1.0971,0 -1.72111,-0.0328 -0.60236,-0.0262 -0.92519,-0.0984 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.21653,-0.45275 l -1.8717,-5.59542 h -10.45614 l -1.76409,5.44319 q -0.0886,0.29527 -0.23622,0.51509 -0.12795,0.19684 -0.45176,0.32808 -0.29856,0.0984 -0.88221,0.16404 -0.55905,0.0328 -1.48457,0.0328 -0.989493,0 -1.548871,-0.0656 -0.559378,-0.0656 -0.774927,-0.29527 -0.216533,-0.26247 -0.150917,-0.70866 0.06234,-0.45275 0.321519,-1.20406 l 8.584336,-24.69826 q 0.12795,-0.36745 0.29855,-0.5807 0.17061,-0.22966 0.53773,-0.34448 0.38713,-0.13124 1.05412,-0.16405 0.66699,-0.0328 1.76442,-0.0328 1.26935,0 2.02196,0.0328 0.75328,0.0263 1.16207,0.16405 0.43011,0.0984 0.60235,0.34448 0.19685,0.22966 0.32152,0.64632 z M 109.91164,79.27273 h -0.0427 l -3.9372,11.83322 h 7.89609 z"
/>
<path
d="m 146.40005,99.66854 q 0.38713,0.7513 0.49474,1.20405 0.12796,0.45276 -0.12795,0.68897 -0.25918,0.22966 -0.94651,0.29528 -0.66699,0.0656 -1.8717,0.0656 -1.01115,0 -1.59218,-0.0328 -0.5807,-0.0328 -0.92519,-0.13124 -0.32152,-0.0984 -0.47342,-0.29527 -0.15092,-0.16404 -0.25918,-0.42979 l -5.22787,-10.0396 -5.20655,10.04748 q -0.12795,0.26246 -0.27887,0.42978 -0.15092,0.16405 -0.49474,0.29528 -0.32152,0.0984 -0.92519,0.13123 -0.58071,0.0328 -1.5492,0.0328 -1.11876,0 -1.74277,-0.0656 -0.60235,-0.0656 -0.81757,-0.29527 -0.21654,-0.22966 -0.0853,-0.68897 0.12795,-0.45275 0.53772,-1.20406 l 6.66949,-12.15572 -6.19614,-11.42411 q -0.38713,-0.77427 -0.53772,-1.22702 -0.12795,-0.47244 0.10827,-0.68897 0.25918,-0.22966 0.92519,-0.29528 0.66698,-0.0656 1.89335,-0.0656 1.01115,0 1.59218,0.0328 0.60235,0.0328 0.94684,0.16404 0.34416,0.0984 0.47342,0.26246 0.15092,0.16404 0.27887,0.42979 l 4.88388,9.20824 4.75468,-9.20824 q 0.12795,-0.26247 0.25918,-0.42979 0.15092,-0.16404 0.45177,-0.26246 0.32152,-0.0984 0.86055,-0.16404 0.55938,-0.0328 1.52755,-0.0328 1.07578,0 1.69979,0.0656 0.62401,0.0328 0.86055,0.29528 0.23622,0.22965 0.10827,0.68897 -0.10827,0.45275 -0.47342,1.22702 l -6.19614,11.3598 z"
/>
<path
d="m 169.89379,82.41411 q 0,2.34577 -0.73129,4.15219 -0.73162,1.80772 -2.1299,3.05443 -1.39828,1.22702 -3.44229,1.87006 -2.02229,0.64632 -4.7762,0.64632 h -2.32347 v 8.88542 q 0,0.22965 -0.15092,0.38713 -0.12795,0.16404 -0.45177,0.29528 -0.32152,0.0984 -0.86055,0.16404 -0.53806,0.0656 -1.37696,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29528 -0.12795,-0.16404 -0.12795,-0.38713 V 75.97978 q 0,-1.01049 0.5164,-1.50589 0.53805,-0.51509 1.39861,-0.51509 h 6.56191 q 0.98982,0 1.8717,0.0984 0.90354,0.0656 2.15156,0.32808 1.24769,0.22966 2.51703,0.90222 1.291,0.66601 2.19454,1.69946 0.90353,1.01049 1.37695,2.38843 0.47342,1.35497 0.47342,3.05443 z m -5.91648,0.4101 q 0,-1.46324 -0.5164,-2.40812 -0.5164,-0.94815 -1.26934,-1.39762 -0.75295,-0.45275 -1.59218,-0.56102 -0.81758,-0.13123 -1.69946,-0.13123 h -2.40942 v 9.44479 h 2.53869 q 1.3553,0 2.25883,-0.36745 0.92519,-0.36417 1.50589,-1.01049 0.58104,-0.666 0.88221,-1.57151 0.30184,-0.92518 0.30184,-2.00129 z"
/>
<path
d="m 194.97962,101.06715 q 0,0.22965 -0.0853,0.4101 -0.0853,0.16404 -0.40878,0.26246 -0.32152,0.0984 -0.94652,0.16404 -0.62368,0.0328 -1.69979,0.0328 -0.90353,0 -1.44158,-0.0328 -0.53773,-0.0328 -0.86056,-0.16404 -0.30183,-0.13123 -0.43044,-0.29527 -0.12795,-0.19685 -0.21654,-0.45275 L 186.3944,94.7739 q -0.45176,-1.05314 -0.88221,-1.87334 -0.43011,-0.81693 -0.96816,-1.35498 -0.5164,-0.56102 -1.20472,-0.83988 -0.68831,-0.29528 -1.59217,-0.29528 h -1.76409 v 10.60653 q 0,0.22966 -0.15092,0.38714 -0.12795,0.16404 -0.45177,0.29527 -0.32152,0.0984 -0.86056,0.16404 -0.53772,0.0656 -1.37695,0.0656 -0.81758,0 -1.37696,-0.0656 -0.53772,-0.0656 -0.86055,-0.16404 -0.32152,-0.0984 -0.45177,-0.29527 -0.12795,-0.16404 -0.12795,-0.38714 V 75.73766 q 0,-0.94816 0.47309,-1.35498 0.49475,-0.42978 1.20471,-0.42978 h 7.20738 q 1.09711,0 1.80707,0.0328 0.70997,0.0328 1.291,0.0984 1.67814,0.22966 3.01211,0.81692 1.35531,0.58071 2.28049,1.52886 0.94685,0.92519 1.44159,2.21455 0.49475,1.26967 0.49475,2.92648 0,1.39762 -0.36581,2.55903 -0.34416,1.14172 -1.0328,2.04394 -0.68831,0.90223 -1.69946,1.57151 -1.01115,0.66601 -2.30214,1.07611 0.62401,0.29527 1.16173,0.73162 0.55938,0.42978 1.0328,1.05314 0.49475,0.60367 0.92519,1.39762 0.43011,0.77427 0.83923,1.76508 l 2.34512,5.48617 q 0.32152,0.81692 0.43011,1.20405 0.10827,0.36745 0.10827,0.58071 z m -7.29338,-18.88992 q 0,-1.37794 -0.62401,-2.32281 -0.62368,-0.94487 -2.04394,-1.33529 -0.43044,-0.0984 -0.98982,-0.16404 -0.53772,-0.0656 -1.50589,-0.0656 h -2.53869 v 7.8956 h 2.88317 q 1.20472,0 2.10825,-0.29527 0.90354,-0.29528 1.50589,-0.81693 0.60236,-0.53805 0.90354,-1.26967 0.30183,-0.73162 0.30183,-1.63384 z"
/>
<path
d="m 223.72292,87.55579 q 0,3.46388 -0.86056,6.19614 -0.86056,2.73291 -2.56034,4.64726 -1.69979,1.89303 -4.21686,2.90352 -2.49571,0.9908 -5.78738,0.9908 -3.24866,0 -5.6798,-0.83988 -2.40943,-0.85958 -4.02316,-2.60169 -1.6135,-1.74211 -2.43108,-4.43171 -0.79593,-2.69027 -0.79593,-6.36838 0,-3.37792 0.86056,-6.0672 0.86056,-2.70995 2.56034,-4.60396 1.69979,-1.89303 4.19527,-2.90352 2.51704,-1.01049 5.83043,-1.01049 3.1627,0 5.57222,0.83989 2.43108,0.83989 4.04468,2.582 1.63516,1.74211 2.45274,4.41039 0.83923,2.64761 0.83923,6.26044 z m -5.93801,0.29527 q 0,-2.19486 -0.34415,-3.98027 -0.34416,-1.80773 -1.18339,-3.0774 -0.81758,-1.28936 -2.19453,-1.97833 -1.37696,-0.70866 -3.44226,-0.70866 -2.08692,0 -3.4854,0.79724 -1.39828,0.77427 -2.25884,2.08659 -0.86056,1.31233 -1.22637,3.0774 -0.34415,1.74211 -0.34415,3.70043 0,2.28016 0.34415,4.10921 0.34416,1.80773 1.16174,3.09709 0.81758,1.29263 2.19453,1.97832 1.37696,0.66601 3.46388,0.66601 2.08692,0 3.4853,-0.77427 1.39861,-0.77427 2.25917,-2.10956 0.86055,-1.33529 1.20471,-3.09709 0.36614,-1.78476 0.36614,-3.78638 z"
/>
</g>
<g
class="sounder">
<path
class="inner"
id="circle7537"
d="m 88.550781,68.023438 a 1.4062634,1.4062634 0 0 0 -0.101562,2.800781 c 2.626503,0.360204 5.027306,1.670173 6.751953,3.683593 a 1.4062634,1.4062634 0 1 0 2.136719,-1.828124 c -2.171963,-2.535634 -5.200082,-4.186996 -8.507813,-4.640626 a 1.4062634,1.4062634 0 0 0 -0.279297,-0.01562 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.70588235;fill-rule:nonzero;stroke:none;stroke-width:2.81224561;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="middle"
id="circle7539"
d="m 89.199219,62.269531 a 1.4062608,1.4062608 0 0 0 -0.203125,2.804688 c 4.079113,0.499853 7.82794,2.493814 10.521484,5.597656 a 1.4062608,1.4062608 0 1 0 2.123042,-1.84375 C 98.491407,65.199198 94.107077,62.865664 89.337891,62.28125 a 1.4062608,1.4062608 0 0 0 -0.138672,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.39215686;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
<path
class="outer"
id="circle7541"
d="m 89.714844,56.46875 a 1.4062608,1.4062608 0 0 0 -0.179688,2.806641 c 5.544575,0.636624 10.650814,3.315944 14.324224,7.517578 a 1.4063016,1.4063016 0 1 0 2.11718,-1.851563 c -4.1335,-4.727896 -9.882048,-7.744574 -16.121091,-8.460937 a 1.4062608,1.4062608 0 0 0 -0.140625,-0.01172 z"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f1dd38;fill-opacity:0.19607843;fill-rule:nonzero;stroke:none;stroke-width:2.81224036;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
</g>
<g
class="r">
<path
d="m 95.755245,101.05796 q 0,0.22966 -0.08858,0.41338 -0.08858,0.16404 -0.408132,0.26247 -0.32152,0.0984 -0.946842,0.16404 -0.623682,0.0328 -1.699459,0.0328 -0.903863,0 -1.44126,-0.0328 -0.537724,-0.0328 -0.860884,-0.16404 -0.298554,-0.13123 -0.430114,-0.29528 -0.127952,-0.19684 -0.216534,-0.45603 l -2.495383,-6.28275 q -0.451768,-1.06626 -0.88221,-1.89302 -0.430442,-0.82677 -0.967839,-1.3681 -0.516727,-0.5643 -1.204713,-0.84645 -0.688642,-0.29527 -1.592176,-0.29527 h -1.76442 v 10.71742 q 0,0.22965 -0.150917,0.39041 -0.127951,0.16404 -0.451767,0.29528 -0.32152,0.0984 -0.860557,0.16404 -0.538052,0.0656 -1.376627,0.0656 -0.817578,0 -1.376956,-0.0656 -0.537725,-0.0656 -0.860556,-0.16404 -0.3248,-0.0984 -0.452096,-0.29528 -0.127951,-0.16404 -0.127951,-0.39041 V 75.47027 q 0,-0.95799 0.473421,-1.36809 0.495074,-0.43635 1.205041,-0.43635 h 7.207446 q 1.097102,0 1.807069,0.0328 0.710296,0.0328 1.290999,0.0984 1.678134,0.22966 3.012111,0.82676 1.355302,0.58727 2.280162,1.54527 0.946842,0.93503 1.441588,2.23751 0.494746,1.28279 0.494746,2.95601 0,1.41403 -0.366466,2.58527 -0.34547,1.15157 -1.032799,2.06691 -0.688314,0.91207 -1.699459,1.58792 -1.011146,0.67256 -2.301816,1.08594 0.623682,0.29528 1.161406,0.73819 0.559378,0.43306 1.032799,1.06626 0.494418,0.61023 0.925188,1.41403 0.430114,0.78083 0.838903,1.78148 l 2.345123,5.54358 q 0.3248,0.82676 0.430114,1.21718 0.108267,0.37073 0.108267,0.58727 z M 88.46158,81.97054 q 0,-1.39106 -0.623682,-2.34906 -0.62401,-0.958 -2.044273,-1.34841 -0.430114,-0.0984 -0.98982,-0.16404 -0.538052,-0.0656 -1.505891,-0.0656 h -2.53869 v 7.9786 h 2.883175 q 1.204713,0 2.108248,-0.29527 0.903535,-0.29527 1.505891,-0.82677 0.602357,-0.54461 0.903863,-1.28279 0.298554,-0.73818 0.298554,-1.65353 z"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10.58333302px;line-height:1.25;font-family:Calibri;-inkscape-font-specification:'Calibri Bold';letter-spacing:0px;word-spacing:0px;fill:#f1dd38;fill-opacity:1;stroke:none;stroke-width:1.1072911"
id="path3902" />
</g>
<g
transform="matrix(0.95843056,0,0,1.0433724,0,-87)"
stroke="#f1dd38" stroke-width="0.3" fill="#f1dd38" fill-rule="nonzero"
class="alert">
<path
d="m 135.66174,200.65343 q 0.1347,0.4041 0.16838,0.63983 0.0337,0.23573 -0.0898,0.35921 -0.12348,0.11225 -0.43779,0.1347 -0.3143,0.0337 -0.86434,0.0337 -0.57248,0 -0.89801,-0.0225 -0.31431,-0.0112 -0.48268,-0.0561 -0.16838,-0.0561 -0.23573,-0.14593 -0.0673,-0.0898 -0.11226,-0.23573 l -0.97659,-2.91855 h -5.45544 l -0.92046,2.83998 q -0.0449,0.15715 -0.12348,0.2694 -0.0674,0.10103 -0.23573,0.16838 -0.15715,0.0561 -0.46023,0.0786 -0.29186,0.0225 -0.77454,0.0225 -0.51636,0 -0.80821,-0.0337 -0.29186,-0.0337 -0.40411,-0.15715 -0.11225,-0.13471 -0.0786,-0.37043 0.0337,-0.23573 0.16837,-0.62861 l 4.47885,-12.88652 q 0.0673,-0.19083 0.15715,-0.30308 0.0898,-0.12348 0.28063,-0.1796 0.20206,-0.0673 0.55004,-0.0786 0.34798,-0.0224 0.92046,-0.0224 0.66229,0 1.05517,0.0224 0.39288,0.0112 0.60616,0.0786 0.22451,0.0561 0.31431,0.1796 0.10102,0.12348 0.16837,0.33676 z m -6.66776,-10.65271 h -0.0112 l -2.05421,6.17386 h 4.11965 z"
/>
<path
d="m 147.73757,200.51872 q 0,0.33676 -0.0337,0.57249 -0.0224,0.2245 -0.0786,0.38165 -0.0561,0.14593 -0.14593,0.21328 -0.0786,0.0674 -0.19082,0.0674 h -6.65654 q -0.37043,0 -0.62861,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -13.18959 q 0,-0.11225 0.0674,-0.20205 0.0786,-0.0898 0.24695,-0.14593 0.16838,-0.0561 0.44901,-0.0898 0.29185,-0.0337 0.71841,-0.0337 0.43778,0 0.71841,0.0337 0.28063,0.0337 0.44901,0.0898 0.16838,0.0561 0.23573,0.14593 0.0786,0.0898 0.0786,0.20205 v 11.68542 h 4.56865 q 0.11225,0 0.19082,0.0674 0.0898,0.0561 0.14593,0.20205 0.0561,0.13471 0.0786,0.37043 0.0337,0.22451 0.0337,0.56126 z"
/>
<path
d="m 160.18384,200.5973 q 0,0.32553 -0.0337,0.55003 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -7.29637 q -0.37044,0 -0.62862,-0.21327 -0.24695,-0.22451 -0.24695,-0.71842 v -12.66201 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62862,-0.22451 h 7.25147 q 0.10102,0 0.1796,0.0561 0.0786,0.0561 0.1347,0.20205 0.0561,0.1347 0.0786,0.35921 0.0337,0.21328 0.0337,0.55003 0,0.31431 -0.0337,0.53881 -0.0225,0.21328 -0.0786,0.34798 -0.0561,0.1347 -0.1347,0.20206 -0.0786,0.0561 -0.1796,0.0561 h -5.18604 v 3.54716 h 4.38905 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.12348 0.0786,0.34798 0.0337,0.21328 0.0337,0.52758 0,0.32553 -0.0337,0.53881 -0.0224,0.21328 -0.0786,0.34798 -0.0561,0.12348 -0.14593,0.17961 -0.0786,0.0561 -0.1796,0.0561 h -4.38905 v 4.0972 h 5.23094 q 0.10102,0 0.1796,0.0674 0.0898,0.0561 0.14593,0.19083 0.0561,0.1347 0.0786,0.3592 0.0337,0.21328 0.0337,0.53881 z"
/>
<path
d="m 175.64968,201.37184 q 0,0.12347 -0.0449,0.21328 -0.0449,0.0786 -0.21328,0.1347 -0.16838,0.0561 -0.49391,0.0786 -0.32553,0.0225 -0.88679,0.0225 -0.47146,0 -0.75209,-0.0225 -0.28063,-0.0225 -0.449,-0.0786 -0.15716,-0.0674 -0.22451,-0.15715 -0.0673,-0.10103 -0.11225,-0.23573 l -1.30212,-3.24408 q -0.23573,-0.55004 -0.46023,-0.97659 -0.22451,-0.42656 -0.50514,-0.70719 -0.2694,-0.29185 -0.62861,-0.43778 -0.3592,-0.14593 -0.83066,-0.14593 h -0.92047 v 5.53402 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.44901,0.0898 -0.28063,0.0337 -0.71841,0.0337 -0.42656,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16838,-0.0561 -0.23573,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -13.1896 q 0,-0.4939 0.24695,-0.70718 0.25818,-0.22451 0.62861,-0.22451 h 3.76044 q 0.57249,0 0.94292,0.0224 0.37043,0.0224 0.67351,0.0561 0.87556,0.12348 1.57152,0.42656 0.70719,0.30308 1.18987,0.79698 0.49391,0.48269 0.75209,1.1562 0.25818,0.66228 0.25818,1.52662 0,0.72964 -0.19083,1.3358 -0.1796,0.59494 -0.53881,1.06639 -0.3592,0.47146 -0.88679,0.81944 -0.52758,0.34798 -1.20109,0.56126 0.32553,0.15715 0.60616,0.38166 0.29185,0.2245 0.53881,0.55003 0.25818,0.31431 0.48268,0.72964 0.22451,0.40411 0.43778,0.92046 l 1.22355,2.86243 q 0.16838,0.42655 0.2245,0.62861 0.0561,0.19083 0.0561,0.30308 z m -3.80534,-9.85572 q 0,-0.71841 -0.32553,-1.21232 -0.32553,-0.4939 -1.06639,-0.69596 -0.22451,-0.0561 -0.51636,-0.0898 -0.28063,-0.0337 -0.78576,-0.0337 h -1.32458 v 4.11964 h 1.50418 q 0.62861,0 1.10007,-0.14593 0.47145,-0.15715 0.78576,-0.42656 0.31431,-0.28063 0.47146,-0.66228 0.15715,-0.38166 0.15715,-0.85312 z"
/>
<path
d="m 189.31949,188.44042 q 0,0.32553 -0.0337,0.56126 -0.0224,0.22451 -0.0786,0.37043 -0.0561,0.13471 -0.14593,0.20206 -0.0786,0.0674 -0.1796,0.0674 h -3.63696 v 11.70787 q 0,0.11225 -0.0786,0.20205 -0.0674,0.0898 -0.23573,0.14593 -0.16838,0.0561 -0.46023,0.0898 -0.28063,0.0337 -0.70719,0.0337 -0.42655,0 -0.71841,-0.0337 -0.28063,-0.0337 -0.44901,-0.0898 -0.16837,-0.0561 -0.24695,-0.14593 -0.0674,-0.0898 -0.0674,-0.20205 v -11.70787 h -3.63696 q -0.11225,0 -0.19083,-0.0674 -0.0786,-0.0674 -0.1347,-0.20206 -0.0561,-0.14592 -0.0898,-0.37043 -0.0224,-0.23573 -0.0224,-0.56126 0,-0.33675 0.0224,-0.57248 0.0337,-0.23573 0.0898,-0.37043 0.0561,-0.14593 0.1347,-0.20206 0.0786,-0.0673 0.19083,-0.0673 h 10.23737 q 0.10102,0 0.1796,0.0673 0.0898,0.0561 0.14593,0.20206 0.0561,0.1347 0.0786,0.37043 0.0337,0.23573 0.0337,0.57248 z"
/>
</g>
<g
stroke="#f8ed98" stroke-width="0.3" fill="#f8ed98" fill-rule="nonzero"
class="line">
<path
d="m 74.779297,106.37891 v 1.03906 H 224.04492 v -1.03906 z"
id="path53" />
<path
d="m 74.779297,124.72656 v 1.03906 H 224.04492 v -1.03906 z"
id="path53-8" />
</g>
</svg>
</div>
</body>
</html>

encodeURIComponent not returns svg

Hello Guys encodeURIComponent not returns my svg.
var svg ='<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720"><defs> <pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse"> <image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"/></pattern></defs><path d= M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)"/></path></svg>';
data = encodeURIComponent(svg);
below is output of returns data
%3Csvg%20id%3D%22vgroovFrame%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22576%22%20height%3D%22720%22%3E%3Cdefs%3E%20%3Cpattern%20id%3D%22matpattern%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22200%22%20height%3D%22200%22%20patternUnits%3D%22userSpaceOnUse%22%3E%20%3Cimage%20width%3D%22200%22%20height%3D%22200%22%20xlink%3Ahref%3D%22https%3A%2F%2Fcdn1.arttoframe.com%2Fproducts%2Fmats%2Fimages%2F200%2F61.jpg%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath%20d%3D%20M%2082.29%2C164.57%20C%2082.29%2C164.57%20164.57%2C164.57%20164.57%2C82.29%20L%20164.57%2C82.29%20411.43%2C82.29%20C%20411.43%2C82.29%20411.43%2C164.57%20493.71%2C164.57%20L%20493.71%2C164.57%20493.71%2C555.43%20C%20493.71%2C555.43%20411.43%2C555.43%20411.43%2C637.71%20L%20411.43%2C637.71%20164.57%2C637.71%20C%20164.57%2C637.71%20164.57%2C555.43%2082.29%2C555.43%20L%2082.29%2C555.43%2082.29%2C164.57%20L%2082.29%2C164.57%200.00%2C164.57%200.00%2C0.00%200.00%2C596.57%20L%200.00%2C596.57%2082.29%2C596.57%2082.29%2C596.57%2082.29%2C596.57%20C%2082.29%2C596.57%20123.43%2C596.57%20123.43%2C637.71%20C%20123.43%2C637.71%20123.43%2C678.86%2082.29%2C678.86%20C%2082.29%2C678.86%2041.14%2C678.86%2041.14%2C637.71%20C%2041.14%2C637.71%2041.14%2C596.57%2082.29%2C596.57%20L%2082.29%2C596.57%200.00%2C596.57%200.00%2C720.00%20452.57%2C720.00%20452.57%2C637.71%20C%20452.57%2C637.71%20452.57%2C596.57%20493.71%2C596.57%20C%20493.71%2C596.57%20534.86%2C596.57%20534.86%2C637.71%20C%20534.86%2C637.71%20534.86%2C678.86%20493.71%2C678.86%20C%20493.71%2C678.86%20452.57%2C678.86%20452.57%2C637.71%20L%20452.57%2C637.71%20452.57%2C720.00%20576.00%2C720.00%20576.00%2C123.43%20493.71%2C123.43%20C%20493.71%2C123.43%20452.57%2C123.43%20452.57%2C82.29%20C%20452.57%2C82.29%20452.57%2C41.14%20493.71%2C41.14%20C%20493.71%2C41.14%20534.86%2C41.14%20534.86%2C82.29%20C%20534.86%2C82.29%20534.86%2C123.43%20493.71%2C123.43%20L%20493.71%2C123.43%20576.00%2C123.43%20576.00%2C0.00%20123.43%2C0.00%20123.43%2C82.29%20C%20123.43%2C82.29%20123.43%2C123.43%2082.29%2C123.43%20C%2082.29%2C123.43%2041.14%2C123.43%2041.14%2C82.29%20C%2041.14%2C82.29%2041.14%2C41.14%2082.29%2C41.14%20C%2082.29%2C41.14%20123.43%2C41.14%20123.43%2C82.29%20L%20123.43%2C82.29%20123.43%2C0.00%200.00%2C0.00%200.00%2C164.57%20%22%20fill%3D%22%23ff0000%3B%22%20stroke%3D%22%23f000%22%20stroke-width%3D%221px%22%20style%3D%22fill%3Aurl(%23matpattern)%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E
this is complete code
var popupMatArr = self.getPopUpMatDesign(self.configuration.popupMatStringCode,self.configuration.popupMatStringTopCode,self.configuration.popupMatStringBottomCode, self.selectedColor2, self.selectedColor3, self.configuration.popupMat_appliedMat, parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].w), parseFloat(self.configuration.cuts[$("#removeimg").attr("data-val")].h));
var data1 = encodeURIComponent(popupMatArr.svg);
img = new Image();
img.src = "data:image/svg+xml;utf8," + data1;
img.onload = function() {
self.ctx.drawImage(img,
0, 0,
popupMatArr.WD,
popupMatArr.HT,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
((parseFloat(self.configuration.glass['frameWidth']) - vgroovConfigArr.dt/parseFloat(self.configuration.ppi)) * parseFloat(self.configuration.ppi) )* self.scale,
popupMatArr.WD * self.scale,
popupMatArr.HT * self.scale,
);
}
This is Svg image before encodeURIComponent
<svg id="vgroovFrame" xmlns="http://www.w3.org/2000/svg" width="576" height="720">
<defs>
<pattern id="matpattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
<image width="200" height="200" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
</pattern>
</defs>
<path d=" M 82.29,164.57 C 82.29,164.57 164.57,164.57 164.57,82.29 L 164.57,82.29 411.43,82.29 C 411.43,82.29 411.43,164.57 493.71,164.57 L 493.71,164.57 493.71,555.43 C 493.71,555.43 411.43,555.43 411.43,637.71 L 411.43,637.71 164.57,637.71 C 164.57,637.71 164.57,555.43 82.29,555.43 L 82.29,555.43 82.29,164.57 L 82.29,164.57 0.00,164.57 0.00,0.00 0.00,596.57 L 0.00,596.57 82.29,596.57 82.29,596.57 82.29,596.57 C 82.29,596.57 123.43,596.57 123.43,637.71 C 123.43,637.71 123.43,678.86 82.29,678.86 C 82.29,678.86 41.14,678.86 41.14,637.71 C 41.14,637.71 41.14,596.57 82.29,596.57 L 82.29,596.57 0.00,596.57 0.00,720.00 452.57,720.00 452.57,637.71 C 452.57,637.71 452.57,596.57 493.71,596.57 C 493.71,596.57 534.86,596.57 534.86,637.71 C 534.86,637.71 534.86,678.86 493.71,678.86 C 493.71,678.86 452.57,678.86 452.57,637.71 L 452.57,637.71 452.57,720.00 576.00,720.00 576.00,123.43 493.71,123.43 C 493.71,123.43 452.57,123.43 452.57,82.29 C 452.57,82.29 452.57,41.14 493.71,41.14 C 493.71,41.14 534.86,41.14 534.86,82.29 C 534.86,82.29 534.86,123.43 493.71,123.43 L 493.71,123.43 576.00,123.43 576.00,0.00 123.43,0.00 123.43,82.29 C 123.43,82.29 123.43,123.43 82.29,123.43 C 82.29,123.43 41.14,123.43 41.14,82.29 C 41.14,82.29 41.14,41.14 82.29,41.14 C 82.29,41.14 123.43,41.14 123.43,82.29 L 123.43,82.29 123.43,0.00 0.00,0.00 0.00,164.57 " fill="#ff0000;" stroke="#f000" stroke-width="1px" style="fill:url(#matpattern)">
</path>
</svg>

AnimeJS Progressive Fill of an SVG path

I have an SVG with different paths, and I want to animate the "fill" of these paths so it looks like it's being "hand drawn".
So far i Feel like I'm pretty close using the "strokeDashoffset" of anime.js, but I don't want the "borders" to be animated, I want the inside
Here's what I have :
JS :
var cssSelector = anime({
targets: '#cssSelector .lines path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: false
});
SVG/html
<div id="cssSelector">
<svg
width="100%"
height="auto"
viewBox="0 0 122.84119 21.053778">
<g
transform="translate(-44.718109,-94.290359)">
<g
fill="#FFF" fill-rule="evenodd" stroke="currentColor" stroke-width="0.1" class="lines" stroke-linecap="round"
id="text12">
<path
d="m 44.718109,95.475692 h 1.439333 v 19.755558 h -1.439333 z"
style=""
id="path14" />
<path
d="m 59.899459,114.29991 q -0.536222,0.508 -1.354666,0.79023 -0.790222,0.254 -1.665111,0.254 -1.919111,0 -2.963334,-1.04423 -1.044222,-1.07244 -1.044222,-2.96333 v -9.62378 h -2.709333 v -1.21355 h 2.709333 v -3.217336 h 1.411111 v 3.217336 h 4.684889 v 1.21355 h -4.684889 v 9.48267 q 0,1.43933 0.677334,2.20133 0.705555,0.73378 2.060222,0.73378 1.382889,0 2.286,-0.81844 z"
style=""
id="path16" />
<path
d="m 97.978291,95.475692 -6.688667,19.755558 h -1.524 L 83.641402,97.507692 77.488958,115.23125 h -1.524 L 69.24807,95.475692 h 1.523999 l 6.011334,17.779998 6.180666,-17.779998 h 1.382889 l 6.152444,17.808218 6.067778,-17.808218 z"
style=""
id="path18" />
<path
d="m 106.30297,115.34414 q -2.08845,0 -3.78178,-0.95956 -1.66511,-0.95956 -2.624668,-2.65289 -0.959556,-1.72155 -0.959556,-3.86644 0,-2.14489 0.959556,-3.83822 0.959558,-1.72156 2.624668,-2.68112 1.69333,-0.95955 3.78178,-0.95955 2.08844,0 3.75355,0.95955 1.69333,0.95956 2.65289,2.68112 0.95956,1.69333 0.95956,3.83822 0,2.14489 -0.95956,3.86644 -0.95956,1.69333 -2.65289,2.65289 -1.66511,0.95956 -3.75355,0.95956 z m 0,-1.27 q 1.69333,0 3.01977,-0.79023 1.35467,-0.79022 2.11667,-2.20133 0.79022,-1.41111 0.79022,-3.21733 0,-1.80622 -0.79022,-3.21734 -0.762,-1.41111 -2.11667,-2.20133 -1.32644,-0.79022 -3.01977,-0.79022 -1.69334,0 -3.048,0.79022 -1.32645,0.79022 -2.11667,2.20133 -0.762,1.41112 -0.762,3.21734 0,1.80622 0.762,3.21733 0.79022,1.41111 2.11667,2.20133 1.35466,0.79023 3.048,0.79023 z"
style=""
id="path20" />
<path
d="m 119.37382,103.71658 q 0.67733,-1.60867 2.11667,-2.45533 1.43933,-0.87489 3.49955,-0.87489 v 1.38289 l -0.33866,-0.0282 q -2.45534,0 -3.83823,1.55222 -1.38288,1.524 -1.38288,4.26155 v 7.67645 h -1.41112 v -14.732 h 1.35467 z"
style=""
id="path22" />
<path
d="m 134.12743,107.35725 -3.83822,3.49955 v 4.37445 h -1.41112 V 94.290359 h 1.41112 v 14.816661 l 9.42622,-8.60777 h 1.80622 l -6.35,5.95489 6.97089,8.77711 h -1.74978 z"
style=""
id="path24" />
<path
d="m 148.75404,115.34414 q -1.778,0 -3.38667,-0.53623 -1.60866,-0.53622 -2.51177,-1.35466 l 0.64911,-1.12889 q 0.90311,0.762 2.31422,1.27 1.43933,0.508 2.99155,0.508 2.22956,0 3.27378,-0.73378 1.07245,-0.73378 1.07245,-2.032 0,-0.93133 -0.59267,-1.46756 -0.56444,-0.53622 -1.41111,-0.79022 -0.84667,-0.254 -2.34245,-0.53622 -1.74977,-0.31044 -2.82222,-0.67733 -1.07244,-0.36689 -1.83444,-1.18534 -0.762,-0.81844 -0.762,-2.25777 0,-1.74978 1.43933,-2.87867 1.46756,-1.15711 4.14867,-1.15711 1.41111,0 2.794,0.39511 1.38289,0.39511 2.25778,1.04422 l -0.64912,1.12889 q -0.90311,-0.64911 -2.06022,-0.98778 -1.15711,-0.33866 -2.37066,-0.33866 -2.06023,0 -3.10445,0.762 -1.04422,0.762 -1.04422,2.00377 0,0.98778 0.59267,1.55223 0.59266,0.53622 1.43933,0.81844 0.87489,0.254 2.42711,0.56444 1.72156,0.31045 2.76578,0.67734 1.07244,0.33866 1.80622,1.12889 0.73378,0.79022 0.73378,2.17311 0,1.83444 -1.524,2.93511 -1.524,1.10067 -4.28978,1.10067 z"
style=""
id="path26" />
<path
d="m 165.55552,95.475692 h 1.63689 l -0.28222,14.082888 h -1.07245 z m 0.81845,19.868448 q -0.47978,0 -0.81845,-0.33867 -0.33866,-0.33867 -0.33866,-0.81845 0,-0.47977 0.33866,-0.81844 0.33867,-0.33867 0.81845,-0.33867 0.508,0 0.84666,0.33867 0.33867,0.33867 0.33867,0.81844 0,0.47978 -0.33867,0.81845 -0.33866,0.33867 -0.84666,0.33867 z"
style=""
id="path28" />
</g>
</g>
</svg>
</div>
And here's the result (after the animation)
My first idea was to draw the stroke inside of the element with a big "stroke-width", but appearently there's nothing to do so.
Thanks for your help and sorry for bad english :)

Apparently there is no way to do it with pure CSS. ended up following this tutorial and it worked Great
https://medium.com/#anatacreative/handwriting-animation-with-svg-638931410cfa

Problems converting Fireworks exported SVG to Raphaël

I'm trying to convert the following SVG into a Raphaël generated version with an animation:
<?xml version="1.0" standalone="no"?>
<!-- Generator: Adobe Fireworks 10, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="Untitled-Page%201" viewBox="0 0 100 111" style="background-color:#00ff00" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
x="0px" y="0px" width="100px" height="111px"
>
<defs>
<!-- Library -->
<symbol id="Symbol7" overflow="visible">
<g id="Layer%2012">
<rect opacity="0.102" visibility="hidden" x="-68" y="-68" width="136" height="136" fill="#00ff00"/>
<path d="M 1.964 8.4182 C 1.964 8.4182 -1.9607 7.3584 -4.8882 4.2425 C -7.8613 1.0781 -9.5322 -3.5466 -9.5322 -3.5466 C -9.5322 -3.5466 -22.138 4.0587 -28.0532 13.8565 C -33.8893 23.5231 -37.5239 30.9637 -37.2234 33.1765 C -36.9248 35.3741 -37.1771 36.8259 -31.7543 36.0133 C -26.3864 35.2091 -14.8159 27.574 -10.2729 23.8916 C -5.7305 20.2096 1.7584 11.2903 1.964 8.4182 Z" fill="#00ff00"/>
<path d="M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z" fill="#ffffff"/>
<path d="M -8.9652 -2.9558 C -8.9652 -2.9558 -6.085 -5.8247 -1.9229 -6.8021 C 2.3041 -7.7946 7.1447 -6.9294 7.1447 -6.9294 C 7.1447 -6.9294 6.8612 -21.6489 1.3337 -31.6706 C -4.1198 -41.558 -8.7462 -48.4261 -10.8128 -49.2722 C -12.8653 -50.1124 -13.9965 -51.0568 -16.0041 -45.9543 C -17.9916 -40.9034 -17.1647 -27.0654 -16.2471 -21.2899 C -15.3297 -15.5151 -11.3498 -4.5699 -8.9652 -2.9558 Z" fill="#00ff00"/>
<path d="M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z" fill="#ffffff"/>
<path d="M 6.2399 -7.148 C 6.2399 -7.148 7.2844 -3.2192 6.0497 0.874 C 4.7958 5.0309 1.6261 8.7904 1.6261 8.7904 C 1.6261 8.7904 14.5154 15.9046 25.9582 16.1285 C 37.2477 16.3494 45.5088 15.7768 47.2748 14.4101 C 49.0288 13.0527 50.4122 12.5453 46.9971 8.2553 C 43.6167 4.0087 31.2192 -2.1941 25.7587 -4.2872 C 20.2987 -6.3801 8.83 -8.4061 6.2399 -7.148 Z" fill="#00ff00"/>
<path d="M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z" fill="#ffffff"/>
</g>
</symbol>
<!-- End Library -->
</defs>
<g id="Layer%201">
<path id="Ellipse" d="M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z" fill="#ffffff"/>
<path d="M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z" fill="#ffffff"/>
<use id="Symbol%207" xlink:href="#Symbol7" transform="matrix(1, 0, 0, 1, 50, 50)"/>
</g>
</svg>
(see http://jsfiddle.net/bBXPA/)
So far I came up with the following:
var attrs = {
"fill": "#ffffff",
"stroke": "#ffffff"
};
var paper = Raphael("container", 100, 111);
var st = paper.set();
st.push(
paper.path("M -1.9046 8.9519 C -1.9046 8.9519 -4.8987 8.475 -6.9209 6.2908 C -8.9745 4.0727 -9.8701 0.5879 -9.8701 0.5879 C -9.8701 0.5879 -20.4872 7.7134 -26.0352 15.9551 C -31.5089 24.0864 -35.0469 30.2674 -35.0112 31.9801 C -34.9758 33.6811 -35.3063 34.8456 -30.9624 33.714 C -26.6625 32.5939 -16.8578 25.5391 -12.946 22.2308 C -9.0346 18.9229 -2.3273 11.229 -1.9046 8.9519 Z"),
paper.path("M -7.4931 -6.5729 C -7.4931 -6.5729 -5.5831 -8.9275 -2.6805 -9.5866 C 0.2674 -10.256 3.7331 -9.2893 3.7331 -9.2893 C 3.7331 -9.2893 2.8708 -22.0467 -1.4928 -30.9723 C -5.7979 -39.7782 -9.3818 -45.9327 -10.8828 -46.7582 C -12.3736 -47.578 -13.2169 -48.4465 -14.4088 -44.1188 C -15.5888 -39.8349 -14.3814 -27.8164 -13.4723 -22.7745 C -12.5632 -17.7332 -9.2538 -8.0776 -7.4931 -6.5729 Z"),
paper.path("M 8.6363 -4.0646 C 8.6363 -4.0646 9.7204 -1.2332 8.84 1.6102 C 7.9458 4.4977 5.3757 7.0158 5.3757 7.0158 C 5.3757 7.0158 16.8551 12.6477 26.7666 13.3315 C 36.5454 14.0062 43.6673 13.9797 45.1327 13.0925 C 46.5881 12.2113 47.7618 11.9153 44.6099 8.7192 C 41.4899 5.5554 30.4779 0.5917 25.6569 -1.1419 C 20.8365 -2.8753 10.8198 -4.837 8.6363 -4.0646 Z")
);
st.attr(attrs);
paper.path("M 43.522 49.8713 C 43.522 46.5576 46.2082 43.8713 49.522 43.8713 C 52.8357 43.8713 55.522 46.5576 55.522 49.8713 C 55.522 53.1851 52.8357 55.8713 49.522 55.8713 C 46.2082 55.8713 43.522 53.1851 43.522 49.8713 Z").attr(attrs);
paper.path("M 41.522 101.8713 L 44.522 58.8713 L 54.522 58.8713 L 57.522 101.8713 L 62.522 102.8713 C 62.522 102.8713 66.897 102.8713 68.522 105.8713 C 70.147 108.8713 69.522 110.8713 69.522 110.8713 L 29.522 110.8713 C 29.522 110.8713 30.022 106.6213 32.522 104.8713 C 35.022 103.1213 35.522 102.8713 35.522 102.8713 L 41.522 101.8713 Z").attr(attrs);
var animate = function () {
st.attr({
transform: "0,0,0"
}).animate({
transform: "r360,0,0"
}, 3000, animate);
};
animate();
(see http://jsfiddle.net/3PrcT/4/)
All looks good, except that the location of the rotating part isn't correct. I guess this is because of the matrix.
Is there a way to apply the matrix and keeping the anchor point correct? Or maybe there is a way to prevent Fireworks from using the matrix transformation?

Have you considered using svg.js with its svg.import.js plugin? You can simply import raw SVG into the library and animate all individual elements afterwards:
/* enable canvas */
var draw = SVG('canvas')
/* import your data */
var store = draw.svg(yourRawSVGdata)
/* animate element with id "Ellipse" */
store.Ellipse.animate().move(100,200)

By looking at the source code of the Fireworks SVG exporter, I noticed it only applies matrix transformations to symbols. So by removing all the symbols, it rendered nice paths I could work with.