Complex filled SVG animation - javascript

I need to animate the logo like so:
Here is its SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve" id="mylogo">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<g id="cap_arch_connector_vert">
<path class="st0" d="M333.7,195.4c-5.4,0-10.7,0.4-16,1v39.3c5.2-0.8,10.6-1.2,16-1.2h16v-39.1H333.7z"/>
</g>
<g id="cap_bottom_arch">
<path class="st0" d="M333.7,231c-56.4,0-103.2,41.8-111,96.1v0h32.5c7.4-36.5,39.8-64.1,78.5-64.1h65.2l10.4-32H333.7z"/>
</g>
<g id="arched_line_right">
<path class="st0" d="M641.9,570l-23,23c18.7,14,42,22.3,67.1,22.3c5.4,0,10.8-0.4,16-1.1v-32.5c-5.2,1.1-10.5,1.6-16,1.6
C669.7,583.3,654.5,578.4,641.9,570z"/>
</g>
<g id="right_leg_line_1">
<path class="st0" d="M702,646.4c-5.3,0.6-10.6,0.9-16,0.9c-79.5,0-144.1-64.7-144.1-144.1l0.3-272.2h-32l-0.3,272.2
c0,97.1,79,176.1,176.1,176.1c5.4,0,10.7-0.3,16-0.8V646.4z"/>
</g>
<g id="arch_under_circle">
<path class="st0" d="M203.3,615.3c24.8,0,48.2-8.2,67.1-22.3l-23-23c-12.8,8.4-28,13.3-44.1,13.3c-26.1,0-49.4-12.6-64-32H102
C120,589.1,158.7,615.3,203.3,615.3z"/>
</g>
<g id="circle">
<path class="st0" d="M203.3,551.3c-26.5,0-48-21.6-48-48s21.5-48,48-48s48,21.6,48,48S229.8,551.3,203.3,551.3z M203.3,487.2
c-8.8,0-16,7.2-16,16c0,8.8,7.2,16,16,16s16-7.2,16-16C219.3,494.4,212.1,487.2,203.3,487.2z"/>
</g>
<g id="line_to_circle">
<path class="st0" d="M27.9,487.2c-0.5,5.3-0.7,10.6-0.7,16c0,5.4,0.3,10.7,0.8,16h145.7v-32H27.9z"/>
</g>
<g id="leg_connector">
<path class="st0" d="M297,529l-13.5-13.5l-4.3,13.2c-2.3,6.7-5.4,12.9-9.1,18.6l12.4,12.4v0l34,34l0,0l7.6,7.6l22.4-22.9L297,529z"
/>
</g>
<g id="arch_connector">
<path class="st0" d="M277.8,600.3l-7.4-7.4l0,0l-6-6l-3.8-3.8l0,0L247.4,570c-9.8,6.4-20.9,10.8-32.8,12.5l26.3,26.3l38.4,38.4
l22.4-22.9L277.8,600.3z"/>
</g>
<g id="cap_mid-bottom_parallel_line">
<polygon class="st0" points="542.2,231 443,231 432.6,263 542.1,263 "/>
</g>
<g id="arch_connector_very_right">
<path class="st0" d="M686,583.3c-5.5,0-10.8-0.6-16-1.6v19.4v13.1v32.3v18.7v13.5c5.3,0.5,10.6,0.8,16,0.8s10.7-0.3,16-0.8v-13.5
v-18.7v-32.3v-13.1v-19.4C696.8,582.7,691.5,583.3,686,583.3z"/>
</g>
<g id="arch_connector_right">
<path class="st0" d="M674.7,582.5c-12-1.7-23.1-6.1-32.8-12.5l-13.1,13.1l-9,9l-24.4,24.4L584,626.6l25.9,20.7l49.4-49.4
L674.7,582.5z"/>
</g>
<g id="right_leg_connector">
<path class="st0" d="M619.2,547.3c-6.4-9.7-10.8-20.8-12.5-32.8l-26.3,26.3v0l-30.7,30.7l20.9,24.1l2.2-1.8l27.8-27.8L619.2,547.3z
"/>
</g>
<g id="cap_arch_connector_hor">
<path class="st0" d="M246.2,295.1h-48.4h-30.1h-3.5c-2.9,10.3-5,21-5.9,32h0.3l9.2,0v0h55h32.5c2.4-11.8,7.5-22.7,14.5-32H246.2z"
/>
</g>
<g id="cap_top_arch">
<path class="st0" d="M333.7,166.9c-91.7,0-167.3,70.5-175.4,160.2l32.2,0c7.4-66.7,60.5-119.8,127.2-127.2v0.1c5.3-0.6,10.6-1,16-1
h16v-25.2v-6.8H333.7z"/>
</g>
<g id="left_leg_line_1">
<path class="st0" d="M309.6,538.8L409.3,231h-33.7l-96.4,297.7c-2.3,6.7-5.4,12.9-9.1,18.6l23,23
C300.1,561,305.7,550.3,309.6,538.8z"/>
</g>
<g id="left_leg_line_2">
<path class="st0" d="M443,231L340,548.8c-19.8,58.9-74.7,98.5-136.8,98.5c-79.5,0-144.1-64.7-144.1-144.1c0-5.4,0.3-10.7,0.9-16
H27.9c-0.5,5.3-0.7,10.6-0.7,16c0,97.1,79,176.1,176.1,176.1c75.8,0,142.9-48.4,167.2-120.5L476.6,231H443z"/>
</g>
<g id="right_leg_line_2">
<path class="st0" d="M619.2,547.3c-8.4-12.6-13.3-27.8-13.3-44.1l0.3-272.3h-32l-0.3,272.3c0,25.1,8.3,48.4,22.3,67.1L619.2,547.3z
"/>
</g>
<g id="cap_top_parallel_line">
<polygon class="st0" points="728.8,199 718.4,166.9 684.8,166.9 381.7,166.9 381.7,199 695.2,199 "/>
</g>
<g id="cap_bottom_parallel_line">
<polygon class="st0" points="739.2,231 732.3,231 705.5,231 574.2,231 574.2,263 715.9,263 749.6,263 "/>
</g>
<g id="right_cap_corner">
<polygon class="st0" points="749.6,263 739.2,231 739.2,231 728.8,199 728.8,199 718.4,166.9 684.8,166.9 714.2,257.7 714.2,257.7
715.9,263 "/>
</g>
</svg>
I spend a lot of time looking for a solution but mostly I stumbled upon stroke SVG animations. Vivus.js looked like a good solution but it doesn't animate filled path, it works only with stroke. So does pretty much all examples I have found, like DrawSVG etc.
I broke down my SVG into simple elements so it would be easier to animate them. I suppose I have to use some SVG masks as I can't change the existing shape of the logo by applying stroke etc. The only animation that looks similar to mine is on Codepen. SVG code is pretty complicated there and I'm not sure whether the way it was animated there will solve my problem.
How can I animate the logo?


As the comments have suggested it would be advisable to convert the graphic from shapes to to strokes and then use an animation library such as Anime JS or Greensock to perform the animation.
Conversion to strokes
For the conversion to strokes I used Illustrator, and then exported to SVG before optimizing the graphic with Jake Archibald's SVGOMG.
Animation example
I chose the Anime JS library for the animation - see the snippet below.
anime({
targets: 'path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: [0.550, 0.055, 0.100, 1.000],
duration: 1500,
delay: 1200,
direction:'forwards'
});
svg {
display: block;
width: 300px;
height: 300px;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.0/anime.min.js"></script>
<svg id="mylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><style>.st0{fill:none;stroke:#231f20;stroke-width:34;stroke-miterlimit:10}</style><path class="st0" d="M382 183.1h324l21 64H589.5v245.5s-2.5 22.5 10 48l-47 51.5s33 62.5 132 73v-61.5l-21.6-2.5-19.4-6.5-43.8 41.3"/><path class="st0" d="M552.5 592.1s-25.5-36-25.5-106v-237h-71.5l-105 315s-10.6 49-74.2 81.8C184 693.6 88 634.6 67.7 592.6c-23.3-32-26.7-88-26.7-88h130.3c-.2-7.4 2.1-14.9 7.1-21.2 11.1-13.7 31.3-15.9 45-4.8s15.9 31.3 4.8 45c-11.1 13.7-31.3 15.9-45 4.8-7.5-6.1-11.5-14.8-11.9-23.7"/><path d="M125.7 561.9s42.7 58.3 117.7 29l44.7 43" fill="none" stroke="#231f20" stroke-width="34" stroke-linecap="square" stroke-miterlimit="10"/><path class="st0" d="M335.7 589.2l-47.3-46 5.3-9.3L386 248.6l-50.5-1.3-3.2-.1c-62-2-90 64.7-90 64.7h-68c42-134 157.3-128 157.3-128l.7 61.9"/><path fill="#fff" d="M92.7 536.2h54v22.7h-54z"/></svg>
Any further questions related to the graphic itself would be better on graphic design StackExchange.

Related

why the path code change when I resave an SVG in illustrator

Hi so I don't have much experience in this so I'm little confused why the SVG xml code change after I resave it in illustrator ? are the path change to anther type ?
this how SVG paths looks in notepad++ in it original form
<svg width="82" height="79" viewBox="0 0 82 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M69.8096 42.6079C74.6204 40.529 82.5999 32.8914 80.7182 28.5365C78.8363 24.1817 67.8057 24.7589 62.9949 26.8378C58.1841 28.9167 55.8098 34.1321 57.6916 38.487C59.5734 42.8418 64.9988 44.6868 69.8096 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M18.262 77.0413C13.9762 77.0413 11.3323 72.3624 13.5434 68.6911L22.1862 54.3413H31.1007L23.3735 73.5855C22.5352 75.6732 20.5117 77.0413 18.262 77.0413Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="#8CCDE9"/>
<path d="M30.6561 77.0408C26.506 77.0408 23.6702 72.8464 25.2166 68.9952L31.1008 54.3408H40.0154L36.4032 72.333C35.8535 75.071 33.4486 77.0408 30.6561 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M42.8632 77.0408C39.0333 77.0408 36.1615 73.5353 36.9154 69.7803L40.0151 54.3408H48.9297V70.9744C48.9297 74.3249 46.2137 77.0408 42.8632 77.0408Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M36.7022 7.27252L36.7021 7.2725C35.541 6.44538 34.1189 6.13104 32.6829 6.39418C31.5026 6.61168 30.3708 5.82862 30.1544 4.65001L30.1543 4.64978C29.938 3.47011 30.7189 2.33811 31.8989 2.12176L31.8989 2.12175C34.4879 1.64722 37.0936 2.21797 39.2224 3.73449C41.3293 5.23543 42.7629 7.53373 43.1473 10.0543C43.3282 11.2401 42.5135 12.3474 41.3286 12.5286C41.2173 12.5458 41.1071 12.5538 40.9989 12.5538C39.9432 12.5538 39.0174 11.7851 38.8533 10.7093L36.7022 7.27252ZM36.7022 7.27252C37.8684 8.10321 38.6478 9.36211 38.8533 10.7092L36.7022 7.27252Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M67.0963 39.3012C67.0963 22.2743 55.4126 8.47119 41.0001 8.47119C26.5876 8.47119 14.9038 22.2743 14.9038 39.3012C14.9038 56.3281 26.5876 61.8259 41.0001 61.8259C55.4126 61.8259 67.0963 56.3281 67.0963 39.3012Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M34.1577 36.4794C36.7419 36.4794 38.8368 34.8111 38.8368 32.7531C38.8368 30.6952 36.7419 29.0269 34.1577 29.0269C31.5735 29.0269 29.4786 30.6952 29.4786 32.7531C29.4786 34.8111 31.5735 36.4794 34.1577 36.4794Z" fill="#FFA6BB"/>
<path d="M59.5204 36.4794C62.1045 36.4794 64.1994 34.8111 64.1994 32.7531C64.1994 30.6952 62.1045 29.0269 59.5204 29.0269C56.9362 29.0269 54.8413 30.6952 54.8413 32.7531C54.8413 34.8111 56.9362 36.4794 59.5204 36.4794Z" fill="#FFA6BB"/>
<path d="M46.1742 25.9936L43.1262 29.6736C42.6048 30.3031 42.6801 31.2334 43.2959 31.7709L45.8273 33.9801C46.4073 34.4862 47.2718 34.4862 47.8518 33.9801L50.3832 31.7709C50.999 31.2334 51.0743 30.3031 50.5529 29.6736L47.505 25.9936C47.1595 25.5764 46.5196 25.5764 46.1742 25.9936Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M39.1124 29.8698C38.4652 29.8698 37.9405 29.3452 37.9405 28.6979C37.9405 28.1159 37.4671 27.6426 36.8852 27.6426C36.3034 27.6426 35.8301 28.1159 35.8301 28.6979C35.8301 29.3452 35.3054 29.8698 34.6582 29.8698C34.011 29.8698 33.4863 29.3452 33.4863 28.6979C33.4863 26.8237 35.011 25.2988 36.8852 25.2988C38.7595 25.2988 40.2843 26.8237 40.2843 28.6979C40.2843 29.3451 39.7598 29.8698 39.1124 29.8698Z" fill="black"/>
<path d="M59.021 29.8698C58.3736 29.8698 57.8491 29.3452 57.8491 28.6979C57.8491 28.1159 57.3757 27.6426 56.7938 27.6426C56.2119 27.6426 55.7385 28.1159 55.7385 28.6979C55.7385 29.3452 55.2139 29.8698 54.5666 29.8698C53.9192 29.8698 53.3947 29.3452 53.3947 28.6979C53.3947 26.8237 54.9196 25.2988 56.7938 25.2988C58.668 25.2988 60.1928 26.8237 60.1928 28.6979C60.1928 29.3451 59.6683 29.8698 59.021 29.8698Z" fill="black"/>
<path d="M38.3904 66.1445C36.7035 66.1445 35.3362 64.7771 35.3362 63.0903V59.7134C35.3362 58.0265 36.7035 56.6592 38.3904 56.6592C40.0773 56.6592 41.4446 58.0265 41.4446 59.7134V63.0903C41.4446 64.7771 40.0773 66.1445 38.3904 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M54.2496 66.1445C55.9365 66.1445 57.3038 64.7771 57.3038 63.0903V59.7134C57.3038 58.0265 55.9365 56.6592 54.2496 56.6592C52.5627 56.6592 51.1954 58.0265 51.1954 59.7134V63.0903C51.1954 64.7771 52.5627 66.1445 54.2496 66.1445Z" fill="white" stroke="#222222" stroke-width="2"/>
<path d="M12.1904 42.6079C7.37966 40.529 -0.599872 32.8914 1.28185 28.5365C3.16372 24.1817 14.1943 24.7589 19.0051 26.8378C23.8159 28.9167 26.1903 34.1321 24.3084 38.487C22.4267 42.8418 17.0012 44.6868 12.1904 42.6079Z" fill="white" stroke="#222222" stroke-width="2"/>
</svg>
and this after I resave it in illustrator without changing any thing
<?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_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-308 411 82 79"
style="enable-background:new -308 411 82 79;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#222222;stroke-width:2;}
.st1{fill:#8CCDE9;}
.st2{fill:#FFA6BB;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds width="82" height="77.1" bottomLeftOrigin="true" x="0" y="1"></sliceSourceBounds>
</sfw>
</metadata>
<path class="st0" d="M-238.2,453.6c4.8-2.1,12.8-9.7,10.9-14.1c-1.9-4.4-12.9-3.8-17.7-1.7c-4.8,2.1-7.2,7.3-5.3,11.6
C-248.4,453.8-243,455.7-238.2,453.6z"/>
<path class="st0" d="M-289.7,488c-4.3,0-6.9-4.7-4.7-8.4l8.6-14.3h8.9l-7.7,19.2C-285.5,486.7-287.5,488-289.7,488z"/>
<path class="st1" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-277.3,488c-4.2,0-7-4.2-5.4-8l5.9-14.7h8.9l-3.6,18C-272.1,486.1-274.6,488-277.3,488z"/>
<path class="st0" d="M-265.1,488c-3.8,0-6.7-3.5-5.9-7.3l3.1-15.4h8.9V482C-259.1,485.3-261.8,488-265.1,488z"/>
<path class="st0" d="M-271.3,418.3L-271.3,418.3c-1.2-0.8-2.6-1.1-4-0.9c-1.2,0.2-2.3-0.6-2.5-1.7l0,0c-0.2-1.2,0.6-2.3,1.7-2.5l0,0
c2.6-0.5,5.2,0.1,7.3,1.6c2.1,1.5,3.5,3.8,3.9,6.3c0.2,1.2-0.6,2.3-1.8,2.5c-0.1,0-0.2,0-0.3,0c-1.1,0-2-0.8-2.1-1.8L-271.3,418.3z
M-271.3,418.3c1.2,0.8,1.9,2.1,2.2,3.4L-271.3,418.3z"/>
<path class="st0" d="M-240.9,450.3c0-17-11.7-30.8-26.1-30.8s-26.1,13.8-26.1,30.8c0,17,11.7,22.5,26.1,22.5
S-240.9,467.3-240.9,450.3z"/>
<path class="st2" d="M-273.8,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-278.5,445.8-276.4,447.5-273.8,447.5z"/>
<path class="st2" d="M-248.5,447.5c2.6,0,4.7-1.7,4.7-3.7c0-2.1-2.1-3.7-4.7-3.7c-2.6,0-4.7,1.7-4.7,3.7
C-253.2,445.8-251.1,447.5-248.5,447.5z"/>
<path class="st0" d="M-261.8,437l-3,3.7c-0.5,0.6-0.4,1.6,0.2,2.1l2.5,2.2c0.6,0.5,1.4,0.5,2,0l2.5-2.2c0.6-0.5,0.7-1.5,0.2-2.1
l-3-3.7C-260.8,436.6-261.5,436.6-261.8,437z"/>
<path d="M-268.9,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-267.7,440.3-268.2,440.9-268.9,440.9z"/>
<path d="M-249,440.9c-0.6,0-1.2-0.5-1.2-1.2c0-0.6-0.5-1.1-1.1-1.1c-0.6,0-1.1,0.5-1.1,1.1c0,0.6-0.5,1.2-1.2,1.2
c-0.6,0-1.2-0.5-1.2-1.2c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-247.8,440.3-248.3,440.9-249,440.9z"/>
<path class="st0" d="M-269.6,477.1c-1.7,0-3.1-1.4-3.1-3.1v-3.4c0-1.7,1.4-3.1,3.1-3.1c1.7,0,3.1,1.4,3.1,3.1v3.4
C-266.6,475.8-267.9,477.1-269.6,477.1z"/>
<path class="st0" d="M-253.8,477.1c1.7,0,3.1-1.4,3.1-3.1v-3.4c0-1.7-1.4-3.1-3.1-3.1c-1.7,0-3.1,1.4-3.1,3.1v3.4
C-256.8,475.8-255.4,477.1-253.8,477.1z"/>
<path class="st0" d="M-295.8,453.6c-4.8-2.1-12.8-9.7-10.9-14.1c1.9-4.4,12.9-3.8,17.7-1.7s7.2,7.3,5.3,11.6
C-285.6,453.8-291,455.7-295.8,453.6z"/>
</svg>
thank you

Did you perhaps move the image between importing and saving? The viewBox X and Y has changed, and the path coordinates have been adjusted to match.
Before: viewBox="0 0 82 79"
After: viewBox="-308 411 82 79"

well I finally get the answer first I open the svg code in windows and open it in mac same svg but the code was not the same so in my illustrator in mac i put in the styling :internal css and in the decimal : 5 after that I transformed the the path to absolute and that fixed the problem .

svg won't show up in firefox but loads in chrome?

I am loading an 404.svg at certain scenarios into a div dynamically.
The svg is getting loaded in chrome but it never does in Firefox for some reason and I haven't checked it in other browsers.
I got the svg from some free SVG providing websites and this is the inside code of svg (can't upload svg directly here stackoverflow limitation ) :
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 503.322 503.322" style="enable-background:new 0 0 503.322 503.322;" xml:space="preserve">
<g>
<rect x="182.194" y="408.711" style="fill:#95A5A5;" width="138.847" height="77.017"/>
<path style="fill:#3F5C6C;" d="M166.617,0.195H34.712C15.534,0.195,0,15.121,0,43.195v338.441c0,8.548,15.534,23.474,34.712,23.474
H468.61c19.178,0,34.712-14.926,34.712-23.474V43.195c0-28.073-15.534-42.999-34.712-42.999H166.617z"/>
<g>
<path style="fill:#BDC3C7;" d="M138.847,468.415h225.627c14.378,0,26.034,11.656,26.034,26.034v8.678H112.814v-8.678
C112.814,480.071,124.469,468.415,138.847,468.415z"/>
<path style="fill:#BDC3C7;" d="M503.322,365.364v27.509c-0.43,18.754-15.957,33.621-34.712,33.237H34.712
C15.957,426.495,0.43,411.627,0,392.873v-27.509H503.322z"/>
</g>
<path style="fill:#D25627;" d="M346.612,69.228h45.932c18.28,0.912,32.386,16.428,31.557,34.712v86.78
c0.829,18.284-13.276,33.8-31.556,34.712H108.538c-18.28-0.912-32.385-16.428-31.556-34.712v-86.78
c-0.829-18.284,13.276-33.8,31.556-34.712H346.612z"/>
<g>
<path style="fill:#ECF0F1;" d="M198.475,156.008h-8.678v-8.678c0-4.793-3.885-8.678-8.678-8.678c-4.793,0-8.678,3.885-8.678,8.678
v8.678h-19.754l27.288-47.763c2.366-4.16,0.917-9.449-3.238-11.823c-4.155-2.374-9.447-0.937-11.83,3.213l-34.712,60.746
c-1.537,2.685-1.527,5.986,0.026,8.662c1.553,2.676,4.414,4.323,7.508,4.321h34.712v17.356c0,4.793,3.885,8.678,8.678,8.678
c4.793,0,8.678-3.885,8.678-8.678v-17.356h8.678c4.793,0,8.678-3.885,8.678-8.678
C207.153,159.893,203.267,156.008,198.475,156.008z"/>
<path style="fill:#ECF0F1;" d="M363.356,156.008h-8.678v-8.678c0-4.793-3.885-8.678-8.678-8.678s-8.678,3.885-8.678,8.678v8.678
h-19.754l27.288-47.763c2.366-4.16,0.917-9.449-3.238-11.823c-4.155-2.374-9.447-0.937-11.83,3.213l-34.712,60.746
c-1.537,2.685-1.527,5.986,0.026,8.662c1.553,2.676,4.414,4.323,7.508,4.321h34.712v17.356c0,4.793,3.885,8.678,8.678,8.678
s8.678-3.885,8.678-8.678v-17.356h8.678c4.793,0,8.678-3.885,8.678-8.678C372.034,159.893,368.149,156.008,363.356,156.008z"/>
<path style="fill:#ECF0F1;" d="M259.22,95.262h-17.356c-14.372,0.016-26.018,11.662-26.034,26.034v52.068
c0.016,14.372,11.662,26.018,26.034,26.034h17.356c14.372-0.016,26.018-11.662,26.034-26.034v-52.068
C285.239,106.925,273.592,95.278,259.22,95.262z M267.898,173.364c-0.005,4.791-3.887,8.673-8.678,8.678h-17.356
c-4.791-0.005-8.673-3.887-8.678-8.678v-52.068c0.005-4.791,3.887-8.673,8.678-8.678h17.356c4.791,0.005,8.673,3.887,8.678,8.678
V173.364z"/>
</g>
<path style="fill:#D25627;" d="M137.763,268.822l-34.712,52.068h-8.678c-9.574-0.028-17.328-7.782-17.356-17.356v-17.356
c0.028-9.574,7.782-17.328,17.356-17.356H137.763z"/>
<g>
<path style="fill:#E57E25;" d="M424.136,286.178v17.356c-0.028,9.574-7.782,17.328-17.356,17.356h-43.39l34.712-52.068h8.678
C416.353,268.85,424.108,276.604,424.136,286.178z"/>
<polygon style="fill:#E57E25;" points="181.153,268.822 146.441,320.889 103.051,320.889 137.763,268.822 "/>
</g>
<polygon style="fill:#D25627;" points="224.542,268.822 189.831,320.889 146.441,320.889 181.153,268.822 "/>
<polygon style="fill:#E57E25;" points="267.932,268.822 233.22,320.889 189.831,320.889 224.542,268.822 "/>
<polygon style="fill:#D25627;" points="311.322,268.822 276.61,320.889 233.22,320.889 267.932,268.822 "/>
<polygon style="fill:#E57E25;" points="354.712,268.822 320,320.889 276.61,320.889 311.322,268.822 "/>
<polygon style="fill:#D25627;" points="398.102,268.822 363.39,320.889 320,320.889 354.712,268.822 "/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
and this is how I dynamically add the svg:
imgDiv.innerHTML = `<img class="image" id="cardImage" src="404.svg" alt="404" style="box-shadow: none"/>`;
how to load the SVG properly into all browsers ?

How to center an SVG element based on another element using js?

I made an SVG face and want to center each pupil in their respective eye.
I tried doing this by getting the center of the eye using getBoundingClientRect(). However when I set the position of the pupil this way it didn't work as expected (it did not center, and changes location based on size of page).
I'm guessing getBoundingClientRect() is related to a global position and the cx, cy attributes are local, but it's not clear to me what the attributes are local to or how I would fix it
Any ideas why this doesn't work and what approach might fix it?
Code
// Center the pupil in the eye. Side param is "left" or "right"
function center_pupil(side) {
let eye = document.querySelector(`#${side}-eye`).getBoundingClientRect()
let pupil = document.querySelector(`#${side}-pupil`)
let pupil_radius = pupil.getAttribute("r")
pupil.setAttribute("cx", eye.left + eye.width / 2 - pupil_radius)
pupil.setAttribute("cy", eye.top + eye.height / 2 - pupil_radius)
}
center_pupil("left")
center_pupil("right")
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 645.72 579.45">
<defs>
<clipPath id="clip-path" transform="translate(-114.91 -242.55)">
<path d="M544,377s9-21,54-25c0,0,114-7,150,25s-43,86-43,86-33.77,18.6-79.06,11.62C615.11,473,587.67,468.87,563,448c-10.53-8.91-25.76-21.79-27-42C535.2,393.05,540.49,382.61,544,377Z"
fill="none" />
</clipPath>
<clipPath id="clip-path-2" transform="translate(-114.91 -242.55)">
<path d="M117.5,397.5a38.69,38.69,0,0,1,8-11c6.89-6.57,14.55-8.78,19-10,32.47-8.93,45-10,45-10,34.68-2.95,53.54-4.56,81-1,33.83,4.38,50.79,6.54,61,21,13.58,19.24,5,45.13,4,48-6.94,20.08-23.19,30.46-35,38a106,106,0,0,1-29.07,12.82,108,108,0,0,1-39.93,3.18c-4.63.72-54.1,7.55-88.32-28.91C120.39,435.31,117.91,406.25,117.5,397.5Z"
fill="none" />
</clipPath>
</defs>
<title>face</title>
<g id="eyes">
<g id="right-eye">
<path d="M540.89,375.37A28.23,28.23,0,0,1,548.4,367a24,24,0,0,1,2.19-1.6c.76-.5,1.5-1,2.26-1.48,1.56-.86,3.07-1.81,4.67-2.55s3.14-1.57,4.76-2.23c.8-.34,1.6-.69,2.39-1.06l2.42-.94c.81-.31,1.61-.65,2.42-1s1.64-.56,2.46-.85l2.46-.81a25.18,25.18,0,0,1,2.49-.73c1.68-.43,3.34-.91,5-1.36s3.38-.71,5.07-1.07l2.54-.55,2.56-.41,5.14-.82c1.81-.26,3.45-.36,5.17-.53l5.12-.43q5.12-.4,10.23-.65a289.41,289.41,0,0,1,41,.71c6.82.65,13.62,1.57,20.39,2.63s13.51,2.37,20.23,3.71,13.41,2.9,20.15,4.54c1.69.38,3.36.86,5,1.36l2.51.73c.83.26,1.65.58,2.48.87l2.47.9c.82.3,1.61.71,2.42,1.05a49,49,0,0,1,4.78,2.33,52.84,52.84,0,0,1,4.63,2.72l2.26,1.48c.75.49,1.44,1.12,2.16,1.68l2.12,1.72c.67.65,1.37,1.27,2,2a30,30,0,0,1,3.57,4.42c.57.78,1,1.65,1.5,2.47s.88,1.73,1.21,2.64a25.41,25.41,0,0,1,1.57,5.59,29.78,29.78,0,0,1-.37,11.31c-4.58,14.09-13,25.18-22.33,35.35a178.89,178.89,0,0,1-14.84,14.31q-3.88,3.39-8,6.53c-2.72,2.11-5.44,4.15-8.32,6.15l-.11.08-.1.05c-2.33,1.23-4.54,2.18-6.86,3.13s-4.62,1.77-7,2.58c-4.68,1.57-9.43,2.87-14.23,4a151.83,151.83,0,0,1-29.28,3.67c-2.46,0-4.93.12-7.39.07l-7.41-.31-7.38-.71c-2.46-.23-4.85-.58-7.3-.93a131.55,131.55,0,0,1-28.88-7.35,114.07,114.07,0,0,1-13.69-6.28c-2.25-1.13-4.38-2.49-6.55-3.78-1.08-.65-2.09-1.41-3.14-2.11s-2.12-1.4-3.1-2.19a143.74,143.74,0,0,1-11.34-9.74,83.58,83.58,0,0,1-10.05-11.51A57.13,57.13,0,0,1,535.46,420a53.51,53.51,0,0,1-2.89-15.38,48.4,48.4,0,0,1,2-15.44,50,50,0,0,1,2.7-7.28c.54-1.17,1.12-2.32,1.76-3.44.31-.56.64-1.11,1-1.65S540.59,375.83,540.89,375.37Zm6.22,3.26c-.75,1.3-1.25,2.21-1.77,3.23s-1,2-1.52,3a56.3,56.3,0,0,0-2.49,6.29,41.51,41.51,0,0,0-2,13.2,34.3,34.3,0,0,0,2.84,12.95,45.72,45.72,0,0,0,7.15,11.32,91.37,91.37,0,0,0,9.77,9.7c3.46,3.07,7.29,6.18,10.83,9a112.56,112.56,0,0,0,23.73,14.54,121.21,121.21,0,0,0,13.15,5,135,135,0,0,0,13.72,3.63c2.31.47,4.7,1,7,1.32s4.69.73,7,1l7.1.56c2.37.13,4.75.12,7.13.18a128.42,128.42,0,0,0,28.29-3.39,135,135,0,0,0,13.69-4c2.23-.81,4.46-1.64,6.63-2.57s4.39-1.91,6.33-3l-.21.13c5.43-3.8,10.71-8.06,15.86-12.34s10.1-8.85,14.78-13.63a103.24,103.24,0,0,0,12.64-15.43,47.41,47.41,0,0,0,4.69-8.65,40.34,40.34,0,0,0,2.28-9.25,33.29,33.29,0,0,0,.35-4.54,22.19,22.19,0,0,0-.46-4.4,20.11,20.11,0,0,0-1.34-4.15c-.25-.67-.64-1.3-1-1.95s-.74-1.27-1.2-1.86a29.21,29.21,0,0,0-6.38-6.48c-.62-.47-1.2-1-1.86-1.44l-2-1.34a46,46,0,0,0-4.12-2.49c-11.39-6-24.05-11.23-37.37-13.24-13.25-2.37-26.77-3-40.22-3.48s-26.92-1-40.43-1.38l-10.13-.24-5.07-.07c-1.66,0-3.42,0-5,0a108.23,108.23,0,0,0-19.78,2.72,24.43,24.43,0,0,0-2.41.65l-2.39.72a43.68,43.68,0,0,0-4.71,1.63c-.77.32-1.55.6-2.3.94s-1.48.75-2.21,1.14-1.47.74-2.17,1.18l-2.06,1.35-1,.68c-.33.24-.64.51-1,.76l-1.9,1.53c-.6.54-1.18,1.11-1.76,1.65a20.72,20.72,0,0,0-1.67,1.71c-.54.58-1.07,1.17-1.54,1.78a21.79,21.79,0,0,0-1.41,1.83l-.66.93-.59.93c-.21.31-.34.62-.52.93-.09.15-.15.29-.22.43Z"
transform="translate(-114.91 -242.55)" />
</g>
<path d="M505,327" transform="translate(-114.91 -242.55)" />
<g id="left-eye">
<path d="M114.91,397a8.77,8.77,0,0,1,.41-1.29c.07-.21.14-.43.22-.65.15-.43.33-.85.52-1.27a23.67,23.67,0,0,1,1.3-2.43,33.63,33.63,0,0,1,3.35-4.38,39.68,39.68,0,0,1,8.37-7.14,45.38,45.38,0,0,1,9.88-4.59c3.45-1.11,6.75-1.8,10-2.64,6.64-1.59,13.29-3.11,20-4.49,3.35-.68,6.71-1.32,10.08-1.9,1.69-.29,3.38-.58,5.08-.84l2.56-.36,1.29-.16.66-.08.33,0,.17,0,.34,0h-.15l10-.79c3.36-.27,6.71-.48,10.05-1s6.66-1.26,10-1.68,6.74-.55,10.13-.72c6.78-.27,13.6-.4,20.41-.06s13.6.93,20.33,1.86,13.33,1.84,20,2.91a156,156,0,0,1,20.08,4.29c.83.26,1.66.55,2.49.83s1.65.56,2.47.91l2.45,1,2.4,1.19a37.88,37.88,0,0,1,8.79,6.29,39.43,39.43,0,0,1,6.43,8.62,19,19,0,0,1,1.21,2.38l1.11,2.43.86,2.52a18.46,18.46,0,0,1,.77,2.53,57.7,57.7,0,0,1,1.39,20.78,77.82,77.82,0,0,1-1.71,10.2c-.41,1.68-.84,3.35-1.38,5s-1.2,3.27-1.82,4.9a80.14,80.14,0,0,1-10.73,18l-.83,1-.87,1c-.6.64-1.17,1.32-1.79,1.94-1.24,1.23-2.49,2.46-3.82,3.59a93.34,93.34,0,0,1-8.31,6.24c-1.42.95-2.85,1.9-4.28,2.81s-2.82,1.81-4.32,2.74q-4.45,2.71-9.14,5a111.57,111.57,0,0,1-19.45,7.27,109.85,109.85,0,0,1-41.18,3l.81,0a96.63,96.63,0,0,1-10.64.84c-3.53.09-7.06,0-10.58-.18a118,118,0,0,1-20.88-3.16A104.42,104.42,0,0,1,170,482a97.9,97.9,0,0,1-18-11.15,94.11,94.11,0,0,1-26.21-32.74,104.55,104.55,0,0,1-7.36-19.73q-1.36-5.09-2.24-10.3c-.28-1.74-.57-3.48-.77-5.23-.12-.87-.2-1.75-.29-2.63l-.07-.66-.07-.86C114.94,398.15,114.92,397.55,114.91,397Zm5.18,1.08a7,7,0,0,1,.08.79l0,1.06c.05.83.09,1.67.17,2.5.11,1.68.31,3.34.51,5,.46,3.33,1.1,6.63,1.88,9.91.39,1.63.86,3.25,1.32,4.86s1,3.21,1.62,4.78c1.17,3.15,2.48,6.25,4,9.27a87.88,87.88,0,0,0,42.45,41.16,99.57,99.57,0,0,0,19,6.34,112.17,112.17,0,0,0,19.92,2.62c3.35.14,6.71.15,10.05,0a89,89,0,0,0,9.9-.94l.38-.06.43,0a105.31,105.31,0,0,0,19.53.1A110.47,110.47,0,0,0,270.55,482a104.55,104.55,0,0,0,18.21-6.92,96.58,96.58,0,0,0,8.52-4.71c1.36-.84,2.79-1.77,4.18-2.67s2.76-1.83,4.12-2.75c2.72-1.85,5.3-3.82,7.85-5.8s5-4,7.4-6.21a51.27,51.27,0,0,0,6.53-7.12,42.86,42.86,0,0,0,4.84-8.38,61.67,61.67,0,0,0,4.57-18.91,52.32,52.32,0,0,0-1.7-19.18,18.18,18.18,0,0,0-.76-2.26l-.84-2.22-1.06-2.12a16.05,16.05,0,0,0-1.13-2.08,35,35,0,0,0-5.82-7.29,34.22,34.22,0,0,0-7.68-5.19l-2.14-1-2.23-.86c-.73-.3-1.5-.55-2.27-.78s-1.53-.49-2.31-.71a160.49,160.49,0,0,0-19.39-3.74c-6.59-.93-13.26-1.73-19.92-2.52a264.5,264.5,0,0,0-39.7-1.74c-3.33.07-6.65.33-10,.27s-6.72-.28-10.08-.29a96.26,96.26,0,0,0-10.05.57l-10,.9h-.16l-2.26.33-2.48.41c-1.65.29-3.3.61-4.95.95-3.3.7-6.59,1.48-9.87,2.28-6.56,1.62-13.08,3.42-19.58,5.32-3.23,1-6.56,1.86-9.53,3a39,39,0,0,0-8.42,4.28,34.43,34.43,0,0,0-6.92,6.22,46.51,46.51,0,0,0-2.8,3.73l-1.37,1.92-.7,1-.37.48A.39.39,0,0,0,120.09,398Z"
transform="translate(-114.91 -242.55)" />
</g>
</g>
<g clip-path="url(#clip-path)">
<circle id="right-pupil" cx="532.09" cy="125.45" r="31" />
</g>
<g clip-path="url(#clip-path-2)">
<circle id="left-pupil" cx="116.59" cy="139.95" r="31" />
</g>
<g id="Layer_4" data-name="Layer 4">
<path d="M505,264s120-29,194-10" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M154,280s116-27,179,0" transform="translate(-114.91 -242.55)" fill="none" stroke="#000"
stroke-miterlimit="10" stroke-width="10" />
<path d="M390,401c9.15,143.49,6.63,190.63,2,205,0,0-6.53,20.28-2,41a35.35,35.35,0,0,0,4,10s1.3,2.14,8,10"
transform="translate(-114.91 -242.55)" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<line x1="321.09" y1="415.45" x2="329.09" y2="424.45" fill="none" stroke="#000" stroke-miterlimit="10"
stroke-width="10" />
<path d="M363,774l146-4s-1,47-73,47S363,774,363,774Z" transform="translate(-114.91 -242.55)" fill="none"
stroke="#000" stroke-miterlimit="10" stroke-width="10" />
</g>
</svg>
What I'm currently seeing
Note: pupil location changes based on screen size

SVG Glow Effect in CSS / JS / Jquery

I have a question regarding SVG Glow effect. I would like to set glow to group "suteki_201_" similar to the RED effect in this link: https://codepen.io/FelixRilling/pen/qzfoc (I would like his eyes to neon glow - blink animation in different color) i tried using different styles but no success... could you please help?
My code for SVG image is:
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_">
<g id="suteki_276_" class="dane8">
<path id="suteki_65_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>
Thank you for your time!!!

Here is my solution, Its not perfect, but you can play with the colors,opacity and timings.
To get the blur efects, I added Gaussian blur to svg
More info on Gauusian Blur effect here here
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
Then, to apply the blur to any path / g add filter="url(#f1)".
Notice the id: ( f1 )
I had to apply the filter to suteki_65_ to make the outer circle glow and also had to duplicate the circle in order to retain the shape of the eye, as the filter effect blurs the shape.
And finally I applied CSS animation, to suteki_65_ in order to make it blink
by changing the opacity.
#keyframes blink {
0% {
opacity: 1;
fill:red;
}
25% {
opacity: 0.5;
fill:pink;
}
50% {
opacity: 1;
fill:orange;
}
75% {
opacity: 0.5;
fill:blue;
}
100% {
opacity:1;
fill:yellow;
}
}
#suteki_65_ {
animation: blink 1500ms infinite;
}
#suteki_65a_ {
opacity: 0.3;
}
<svg version="1.1" id="Marko" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<defs>
<filter id="f1">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<style type="text/css">
.dane0{fill:#D3D3D3;}
.dane1{fill:#B0B0B0;}
.dane2{fill:#303347;}
.dane3{opacity:0.54;fill:#4A4D67;}
.dane4{opacity:0.54;fill:#5F6380;}
.dane5{opacity:0.37;fill:#010101;}
.dane6{opacity:0.67;fill:#4A4D67;}
.dane7{fill:#010101;}
.dane8{opacity:0.72;}
.dane9{fill:#77CFE2;}
.dane10{fill:#9BD9E2;}
.dane11{fill:#FBF5A9;}
.dane12{fill:#C6C473;}
.dane13{fill:#A3A061;}
.dane14{opacity:0.67;}
.dane15{fill:#242733;}
.dane16{opacity:0.25;fill:#17191F;}
</style>
<g id="suteki_202_">
<path id="suteki_73_" class="dane0" d="M176.5,174.3c-2.7-0.1-3.3,4.8-3.3,4.8c4,9.4,12.2,16.7,12.2,16.7c-3.9-15.1-1.6-17.3-1.6-17.3
S179.2,174.4,176.5,174.3z"/>
<path id="suteki_72_" class="dane1" d="M175.8,179.7c2.4,5.7,6.4,10.7,9.2,13.6c0.2,0.7,0.4,1.5,0.6,2.3c0,0-8.2-7.3-12.2-16.7
c0,0,0.6-4.8,3.3-4.8c0.7,0,1.6,0.3,2.4,0.8C176.4,174.9,175.8,179.7,175.8,179.7z"/>
<g id="suteki_283_">
<path id="suteki_71_" class="dane2" d="M184.3,207.6c0,0-27.3-29.9-16.4-28.8c55.5,7.9,104.7,50.7,104.7,50.7s21.9,18.8,25.8,65.7
c0,0-13.3,38.9-54.7,46.1c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6
c0,0,35.4,8.4,66.1-6.2c31.9-15.2,36.7-29.2,23-65.6c-44.6-27.2-121.9-61.5-121.9-61.5c-71.9-16.4-184.5-11.7-184.5-11.7
S129.6,184.2,184.3,207.6z"/>
</g>
<path id="suteki_70_" class="dane3" d="M350.8,226.7c0,0-6.3,11.2-16.2,8.6c-9.9-2.6-30.8-30.7-30.8-30.7s22.2,21.6,31.5,23.7
C344.5,230.6,350.8,226.7,350.8,226.7z"/>
<path id="suteki_69_" class="dane4" d="M340,239.8c0,0-6.9,8.6-22.1-1.7c-11.1-7.5-13.5-22.3-27-43.2c17.3,18.7,20.4,30.1,30.6,37.1
C335.4,241.6,340,239.8,340,239.8z"/>
<path id="suteki_68_" class="dane5" d="M362.1,227.6C349.9,239,326,252.3,326,252.3s2.7,16-0.5,22c-3.3,6-8.5,3.1-8.5,3.1
s-4.9-25.6-32.8-54.7c-86-75.6-118-43.7-118-43.7c55.1,4.4,106.6,50.4,106.6,50.4s21.9,18.8,25.8,65.7c0,0-13.3,38.9-54.7,46.1
c0,0-23.2-3.4-37-16.4c0,0,13.9,19.5,44.4,37.1c0,0,15.2,5.9,56.7-30.5l2.3-16.8c0,0,7.4-15.6,36.7-24.6c0,0,32.8,7,64.1-6.3
c0,0,6.3-2.3,19.2-10.5C411.1,257.1,362.1,227.6,362.1,227.6z"/>
<path id="suteki_67_" class="dane6" d="M165.3,162.3c54.2-4.7,122.7,27.2,122.7,27.2l62.5,11.8c0,0,1.1,10.7,5.7,22.4l74.1,49.6
c14.3-10.9,15.8-26.6,5.7-55c0,0-29.6-20-121.9-61.5c-68.6-16.3-184.5-11.7-184.5-11.7s0,39.1,54.7,62.5
C184.3,207.6,135.6,168.3,165.3,162.3z"/>
<path id="suteki_66_" class="dane7" d="M356.2,223.7l-22.2,0.2l-46-34.4l10.2,1.9c0,0-0.4-1.7,2.6-5c0,0-1.6,3.9-0.1,5.4l5,0.9
c0,0-0.3-5.1,3.3-6.8c0,0-2.8,3.1-0.2,7.4l41.8,7.7L356.2,223.7z"/>
<g id="suteki_201_" >
<g id="suteki_276_" class="dane8">
<path id="suteki_65a_" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
<path id="suteki_65_" filter="url(#f1)" class="dane9" d="M330,211.5c5.5,0,10-4.5,10-10c0-0.9-0.2-1.7-0.4-2.6l-17.7-3.2c-1.2,1.7-1.9,3.6-1.9,5.8
C320,207,324.5,211.5,330,211.5z"/>
</g>
<g id="suteki_274_" class="dane8">
<path id="suteki_64_" class="dane9" d="M329,207.9c3.5,0,6.3-2.8,6.3-6.3c0-0.6-0.1-1.1-0.2-1.6l-11.2-2.1c-0.8,1-1.2,2.3-1.2,3.7
C322.6,205.1,325.5,207.9,329,207.9z"/>
</g>
<g id="suteki_272_" class="dane8">
<path id="suteki_63_" class="dane10" d="M334,204.7c2,0,3.6-1.6,3.6-3.6c0-0.3-0.1-0.6-0.1-0.9l-6.4-1.2c-0.4,0.6-0.7,1.3-0.7,2.1
C330.4,203.1,332,204.7,334,204.7z"/>
</g>
</g>
<path id="suteki_62_" class="dane0" d="M190.3,174c-3.9-0.1-4.8,6.9-4.8,6.9c5.8,13.6,17.7,24.2,17.7,24.2
c-5.6-21.8-2.4-25.1-2.4-25.1S194.2,174.1,190.3,174z"/>
<path id="suteki_61_" class="dane1" d="M189.3,181.8c3.5,8.3,9.3,15.4,13.3,19.8c0.2,1.1,0.5,2.1,0.8,3.3c0,0-11.9-10.6-17.7-24.2
c0,0,0.8-7,4.8-6.9c1,0,2.3,0.5,3.5,1.1C190.1,174.9,189.3,181.8,189.3,181.8z"/>
<path id="suteki_60_" class="dane11" d="M434.8,269.4c0,0-53.7-41.9-72.8-50.3c0,0-1.9-16-5.8-24c0,0-11.9-12.2-69.2-10.5
c0,0-82.3-34-131.3-23.3l3.3-2c51.3-8.3,128.8,21.7,128.8,21.7c37.1-2.1,72.2,8.4,72.2,8.4c5.2,8.8,7.2,26.4,7.2,26.4
c25.4,12.8,71,49.8,71,49.8S436.7,267.6,434.8,269.4z"/>
<g id="suteki_266_">
<path id="suteki_59_" class="dane12" d="M364.8,217c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c2-2.1,3.4-3.8,3.4-3.8S390.2,229.7,364.8,217z"/>
<path id="suteki_58_" class="dane13" d="M157.2,160.5l-1.5,0.9c14.5-2.6,25.6-2.6,41.9-0.2l2.5-1.1
C184.2,157.7,168.1,158,157.2,160.5z"/>
</g>
<g id="suteki_263_" class="dane14">
<path id="suteki_57_" class="dane15" d="M363.9,217.8c0,0-1.2-17-6.4-25.8c0,0-29-11.4-71-8.1c0,0-46.3-16.9-87.3-23l-2.5,1.1
c41,5.9,89.4,23.5,89.4,23.5c57.3-1.8,69.2,10.5,69.2,10.5c3.9,7.9,5.8,24,5.8,24c19.1,8.5,72.8,50.3,72.8,50.3
c1.9-1.4,3.7-3.6,3.7-3.6S389.3,230.5,363.9,217.8z"/>
<path id="suteki_56_" class="dane15" d="M155.7,161.4l-1.4,0.7c15-2.2,26.1-2.5,42.3-0.2l2.5-1.1
C183.3,158.5,166.6,158.9,155.7,161.4z"/>
</g>
<path id="suteki_55_" class="dane16" d="M436.2,218.6c11.6,39.4-17.1,70.5-93,56.6c-43.3,21-56.6,74.4-56.6,74.4l21.7-17.1l1.9-17.8
c0,0,7.4-15.6,36.7-24.6c0,0,33.3,7.7,64.6-5.6C417.2,280.4,460.8,270.4,436.2,218.6z"/>
<path id="suteki_54_" class="dane5" d="M350.6,201c-2.8-0.5-62.6-11.5-62.6-11.5c-37.3-15.4-69.2-25-99.9-27.2
c-55.8-5.4-27.8,23.7-5.3,44.3l1.5,1c0,0-54.7-46.5-7.6-44.2c55-0.5,111.3,29.1,111.3,29.1l58.9,11.7c0,0,2.6,7,3.6,19.4l75.7,52.2
c1.8-1.2,2.7-1.7,4.2-2.7l-74.1-49.6C353.2,211.6,350.6,201,350.6,201z"/>
<path id="suteki_53_" class="dane7" d="M430.9,273.3c0,0-23.3,22.1-72.6,18.3c0,0,51.7-6.3,62.4-24.7L430.9,273.3z"/>
<g id="suteki_252_">
<path id="suteki_51_" class="dane0" d="M270.2,365.1c-2.5,1.2-4.9-3-4.9-3c-0.1-10.2,4.5-20.2,4.5-20.2c2.5,15.4,5.4,16.5,5.4,16.5
S272.7,363.9,270.2,365.1z"/>
<path id="suteki_50_" class="dane0" d="M308.3,339.8c-2.6,3.1-8.6-1-8.6-1c-6.5-13.8-6.5-30.2-6.5-30.2c13,19.3,17.7,19,17.7,19
S310.9,336.7,308.3,339.8z"/>
<path id="suteki_49_" class="dane0" d="M291.4,358.6c-2.9,2.8-8.4-1.9-8.4-1.9c-5-14.4-3.3-30.7-3.3-30.7
c11,20.5,15.6,20.8,15.6,20.8S294.3,355.7,291.4,358.6z"/>
<path id="suteki_48_" class="dane1" d="M301.9,335.5c-3.9-8.2-5.4-17.4-6.1-23.5c-0.8-1.1-1.6-2.2-2.4-3.4c0,0,0,16.4,6.5,30.2
c0,0,6,4.2,8.6,1c0.6-0.7,1-1.7,1.4-2.9C307.1,339.1,301.9,335.5,301.9,335.5z"/>
<path id="suteki_47_" class="dane1" d="M267.4,360.5c-0.1-6.2,1.6-12.3,3-16.2c-0.1-0.7-0.3-1.5-0.4-2.3c0,0-4.6,10-4.5,20.2
c0,0,2.5,4.2,4.9,3c0.7-0.3,1.3-0.9,1.9-1.7C269.9,364.6,267.4,360.5,267.4,360.5z"/>
<path id="suteki_46_" class="dane1" d="M284.9,353.3c-3.1-8.8-3.6-18.3-3.6-24.3c-0.5-1-1.1-2-1.7-3.1c0,0-1.7,16.3,3.3,30.7
c0,0,5.5,4.8,8.4,1.9c0.8-0.8,1.4-2,1.9-3.3C290.4,358,284.9,353.3,284.9,353.3z"/>
</g>
</g>
</svg>

SVG Element, HTML and JavaScript

I'm Creating a SVG elements but I want to make it clickable and change the color of it on click
Here's the code of the elements
<svg version="1.1" x="0px" y="0px" width="960px"
height="560px" viewBox="0 0 960 560" style="disable-background:new 0 0 960 560;" xml:space="preserve">
<g id="Layer_1">
<rect x="95.675" y="35.61" class="st0" width="774.026" height="494.805"/>
</g>
<g id="Layer_2">
<circle class="st1" cx="254.766" cy="144.67" r="68.182"/>
<circle class="st1" cx="474.571" cy="144.67" r="68.182"/>
<circle class="st1" cx="685.766" cy="144.67" r="68.182"/>
<ellipse class="st1" cx="474.571" cy="318.727" rx="167.695" ry="76.623"/>
<circle class="st1" cx="324.748" cy="463.532" r="47.403"/>
<circle class="st1" cx="477.565" cy="463.532" r="47.403"/>
<circle class="st1" cx="624.395" cy="463.532" r="47.403"/>
</g>
</svg>

As an example: changing an element's color on click:
$('#Layer_1').click( function() {
$('#Layer_1').css({ fill: "blue" });
});
You can build you idea from this.
Here is a working example: https://jsfiddle.net/ddan/bcLzp929/1/

Categories

Resources