Develop Reference

Javascript interfering with 2nd SVG line animation

Link to example: http://bss.com/RK/full3.html -- I want the word MEDIA to STAY on top of the background image after it writes in. Can anyone help me with that? Can I use a div within another div that is using javascript that is interfering with what I want to happen with the interior div.
I am sure this is an easy question for SOers. I've gotten very far but now just spinning my wheels and just can't figure this last bit. I saw this post CSS Animation property stays after animating because I used some from it and it is very close to working for me, however, I have this #box div inside another div that has js applied to it saying
$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});
and the fadeOut and remove interferes with the second div. I have this (.center-div) div with an svg that fades in then out completely. There is a background image that stays after the fade.
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-
linejoin:round;stroke-miterlimit:10;stroke-dasharray:2000;stroke-dashoffset:
2000;animation-delay:4.5s;animation-timing-function: ease-in forwards;
} /*media word */
I think I need another div for the .st1 content (word media) to fade in and then STAY but can't get that to work. I want the word MEDIA to stay after it comes in. But another div just renders below the center-div.
Have used z-index to no avail. I've tried making a class instead of id, I've tried nesting them as mentioned -- what can I do to get this "media" svg line animation element to come in and STAY, when the enveloping div has javascript to fade out and remove? Thank you. I hope someone can help me as I really need to move on to other things.

Firstly, you are doing a .remove() of the <div> that contains the SVG. So you obviously can't do that.
What you need to do instead is just fade out the elements of the SVG that you want to hide.
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
Since you want to fade out the black background also. You'll need to remove the background color of that <div>, and instead add a black rectangle to the SVG. Then you can fade that out also.
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
Updated example:
<div class="wrapper">
<div class="center-div">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="893px"
height="332.7px" viewBox="0 0 893 332.7" style="enable-background:new 0 0 893 332.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#fcfafa;stroke:none;stroke-miterlimit:10;stroke-width:1; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;
} /*WHITE TINY LEAVES */
.st1{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:4.5s;
animation-timing-function: ease-in forwards;
} /*media word */
.st2{fill:none;stroke:#FCFAFA;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10; stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:5.6s;
animation-timing-function: ease-in forwards;; } /* dot white*/
.st3{fill:none;stroke:#89CB6A;stroke-width:4;stroke-miterlimit:10;} /* the green line */
/* .st4{fill:none;stroke:#89CB6A;stroke-width:8;stroke-miterlimit:10;} cant see difference-tiny amount of leaves I guess */
.st5{fill:none;stroke:#89CB6A;stroke-width:2;stroke-miterlimit:10;stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation-delay:2.5s; /* PERFECT! */
animation-timing-function: ease-in;} /* reg leaves */
]]>
</style>
<style type="text/css">
svg {
height: 100%;
width: 100%;
margin:auto;
}
path {
stroke-dasharray: 2100;
animation: draw 3.4s linear forwards;
/*transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); */
}
.path2 {
animation-delay: 2s; /*number not mattering here right now
animation: draw 3.4s linear ;*/
}
#keyframes draw {
from {
stroke-dashoffset: 2200;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes msvg {
0% { stroke-dashoffset: 1500; }
12% { stroke-dashoffset: 1500; }
44% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: 0;
}
}
.wrapper {
position: relative;
background-image: url(https://filedn.com/lPKPli3Xz1KVxCemkqFzHfL/bss/treebanner_893x332.jpg);
background-size: contain;
margin: 0 auto;
max-width: 100%;
width: 1300px;
height: 483px;
z-index: 25;
background-repeat: no-repeat;
/* object-fit: cover; nothing */
}
.center-div /*fades out green line and tree see js*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:13;
background-position: left top;
}
.media-div /*bring in word and stay*/
{
position: relative;
margin: 0 auto;
max-width: 100%;
height: auto;
z-index:1;
background-position: left top;
}
#keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
#line, #tree_2, #leaves, #background {
animation: fadeout 1s linear forwards;
animation-delay: 5.5s;
}
</style>
<g id="background">
<rect width="100%" height="100%" fill="black"/>
</g>
<g id="MEDIA">
<path class="st1" d="M234.7,201.1l-2.4,10.4c0.3,0.4,14.3-19.9,15.6-0.7c0.5,0.1,8.4-15,12.2-2.9c1.9,2.9,4.1,3.4,5.6,3.7
c7.8,1.7,15.8-6.6,17.3-8.1c0,0,8.1-9.5,11-5.5c2.2,3-4,6.8-10.8,5.9c-0.7,2.5-1.2,6.1,6.8,7.8c11.9,2.5,25-5,29.2-8.6
c3.7-3.1,7.1-5.6,9.3,0c-2.3-8.9-12.4,1.5-9.2,8c0.8,1.6,2.6,1.6,5.1-0.2c3.5-2.4,24.1-35.8,17.2-36.3c-7.3,0.5-9.7,22.1-9.7,22.8
c0,0.7-0.1,15.3,11.1,14.6c11.9-0.8,18.3-6.7,20.5-12.2c-3,7-2.6,11.4,7.3,12.5c11.4,0.2,20.1-14.5,27.3-14.7
c-0.2-0.8-13.9,5.6-11,13.7c0.2,0.4,0.5,0.9,1.2,1.1c2.2,0.7,6.7-4.4,8.8-11.2c-0.8-0.2,4.5,22.4,29.2,1.2"/>
<path class="st2" d="M364.2,188.6c0,0,4.1-1,4.2-2.1"/>
</g>
<g id="line">
<path class="st3" d="M750.9,194.2c0.9,0.9,47.6-162.4,47.6-162.4l-34.8,0.6H55.2c0,0-13.9,0-13.7,13.7c0.1,8.7,0,248.6,0,248.6
s-1.2,9.9,7.5,11.2s659.2,0.4,659.2,0.4s1.5,1.3,9.9-21.1c6.2-16.5,23.8-57.6,23.8-57.6l4.5-12.6c0,0,1.8-6.2,1.1-7"/>
<path class="st4" d="M739.8,232.8"/>
</g>
<g id="tree_2">
<path class="st5" d="M737.5,127.7c-0.6,0.3-1.5,2.9-2.1,3.2l-15.6-2.8l-3.3,4.6l0.4,5.8c0,0-2.1,3.7-8.7,7
c-7.8,3.9-13.6-0.4-14.2-0.1c-0.6-1.2-1.3,2.1-3.2,2.5c-1.9,0.5-1.7-3.5-1.3-4.1c0.3-0.6,2.5-2.2,3.7-4.5c1.1-2.3-1.9-3.6-3.2-2.5
c-0.4,0.3-1.7,1.1-1.8,2c-0.3,2.6-4.2,4.4-5.6,3c-2.1-2.1-5.9,2.8-8.1,3.3c-3.7-1.8-1.2-4.3-1.2-4.3l6.4-2.4l2.7-2l-1.9-2.8
c0,0-0.2-7,6.1-7.8c2.7-0.3-1.1,6.2-0.7,6.9c0.4,0.8,4.6-0.4,4.6-0.4s2.9,1.7,2.9-2.5c0-4.1,2.9,0,2.9,0l2.1,6.2
c0,0,7.7-10,8.3-9.1c0,0,0.4,5.8-1.7,9.9c-2.1,4.1,9.5,0,6.6-5.4c-2.9-5.4-1.7-3.7,0.4-4.6c2.1-0.8,5.8-1.2,10.4-7
c4.6-5.8,4.1-5,8.3-1.7s-9.1,7.5-9.1,7.5s6.6-1.2,12.4-3.3c5.8-2.1,3.1-7.2,2.2-8.5c-0.9-1.3-6-1.8-6-1.8s1.7-5.5,1.2-6.6
c-0.4-1.1-2.5,2.5-2.5,2.5l-3.7-3.3l-2.5,3.7c0,0-3.7,0.8-6.2,9.9c-2.5,9.1,2.1,4.6-1.2,3.7c-3.3-0.8-4.4-8-1.7-12.8
c2.4-4.2,8.3-4,8.3-4l-4.3-2.5c0,0-3.2,2.7-4.7,0.4c-1.9,4.2,1.2,8.1-7.1,1.1c-2.4,0.9,2,7-0.5,7c-2.5,0-4.1-2.1-4.1-2.1l-5.4,5
c0,0-1.2-6.7-5.3-2c-1.8,2.2,2.8-9.1-0.1-9.4c-2.9-0.3-4.1,8.5-5.4,6s-4.9-4.6-6.6,0.4c-0.8,2.2-2.2,6.5-4.3,7.4
c-0.3,1.1-0.3,2.3,0.1,3.7c0.1,1.1,3.1,3,1.8,7.1c-0.7,2.1-7.2-4.4-6.2-8.5c0.2-0.7,9.8-11.1,4.8-16c-2-1.9-3.7-0.4-5,1.1
c-1.2,1.6,2.2,9.2,0.7,9.1s-3.8-6-4.6-6.4c-0.7-0.4-1.3,4.5-5.1,4.5c-3.7,0,2.7-9.5-3.9-5.4c-6.6,4.1-1.7,9.9-1.7,9.9l-5,0.4
c0,0,4.1,4.1,1.2,4.6s-5.8-9.1-5.8-9.1s3.1,12.9,1.2,11.2c-9.7-8.8-2.7,3-6,4.6c-3.3,1.7-2.9-5.3-7.6-4.4c-1.2,0.2-3.8,2.7-0.9,4.8
c2.9,2.1-6.2,6.2-10.4,6.6s-0.2,6.5-4.6,8.7c-3.1,1.6-7.8-2.5-7.8-2.5l3.7,9.5l-5.8,2.5l0.8,4.6c0,0-1.9,3.3-0.4,3.7
c1.5,0.4,4.6-2.5,4.6-2.5s4.6,2.9,5.8,0c1.2-2.9,7.9-0.4,12.8-1.7c5-1.2,1.2,5.8,1.2,5.8s-7.5-3.3-6.6,4.1s5.4,4.6,5.4,2.9
c0-1.7,0-4.6,5-4.1c5,0.4,2.5,2.9,6.6,2.1c4.1-0.8,3.1-4.4,6.6-8.7c3.1-3.8,13.3,4.4,11.6,8.4"/>
<line class="st5" x1="611.9" y1="166.5" x2="612.1" y2="166.2"/>
<path class="st5" d="M748.8,207.6c-2-1.5-6.9,2.2-6.9,2.2s-6.9,1.5-8.9,2.1c-1.5,0.5-6.9,1.3-8.2,1.6c-0.8-0.6-4.9,0.3-6.7-0.4
c-1.9-0.8-5.8,0-7.9-3.3c-2.1-3.3-4.7-0.1-4.7-0.1l2.7-3.2l-2.5-6.6l-6.2-1.7l-6.6-5c0,0-9.5,1.7-8.3,2.9s-3.7,3.7,0.4,5
c4.1,1.2-9.5,6.2-9.1,0c0.4-6.2,0.4-10.4-5-6.2s-6.6,5-8.7,9.1c-0.9,1.7-5.2-2.3-5.2-2.3s-4.7,7.2-8,5.2c-3.3-2.1-1.3-5.5,0.6-7.7
c0.7,1.6,0.7,1.7,1.9,3.5c3.3,3.3,2.9,2.5,4.6-0.4c1.7-2.9,2.1-8.7,2.1-8.7l-3.3-2.1c0,0-7,5-12,5.4c-5,0.4-4-2.9-0.3-3.4
c4.4-0.6-3-8.6-7.1-6.9c-4.1,1.7-1.2-5.4,3.3-5c4.6,0.4,6.6,3.3,6.6,3.3l2.9-3.3v2.5l4.6-2.9l0.4,3.7c0,0-1.7,4.6,3.7,3.7
s5.8-2.5,5.8-2.5s-2.9-3.3-5.4-1.2c-2.5,2.1,2.9-6.2,6.6-3.3c3.7,2.9,6.2,5,8.3,2.5c2.1-2.5,0.8-8.3,4.1-7.5
c3.3,0.8-9.9-2.1-9.9-2.1l3.3-2.5c0,0-2.5-6.2-5.8-4.6c-3.3,1.7-8.3-1.2-8.3-1.2l-0.8,4.1c0,0-9.1,2.6-11.2,2.7
c-9.9,0.3-12.7,9.4-16.5,8.5c-5-1.2-5.1-2.6-3.8-5c1.5-3-5.7-2.7-2.9-4.6c5.4-3.5-4.6-10.1-4.6-3.3c0,2.1-2.1,7-2.9,7.5
c-0.8,0.4-2.5-3.7-2.5-3.7s-3.3,2.1-3.1-1.6c0.2-2.1,2.8-5.3,4.1-4"/>
<path class="st5" d="M612.1,166.2c-0.2,0-0.4,0-0.5,0"/>
<path class="st5" d="M682.7,117.6c0,0-3,0.8-3.9,5.1c-0.3,1.3-1.2,2.7-1.2,2.7S685.9,124.8,682.7,117.6z"/>
<path class="st5" d="M626.8,181.2c0,0-2.9,1.1-1.9,3.9c1,2.8-0.4,2-0.4,2s5.8-1.2,2.6-5.5"/>
<path class="st5" d="M684,161.2c0,0,2.1,2,4.4,0.1c0.8-0.3,2-0.4,2-0.4s-3.5-4.7-6.1,0L684,161.2z"/>
<path class="st5" d="M633.5,149.5c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.7,3.6,5L633.5,149.5z"/>
<path class="st5" d="M618.3,158.8c0,0,0.4-3.1-2.5-3.6c-2.9-0.5-1.5-1.3-1.5-1.3s-1.8,5.6,3.6,5"/>
<path class="st5" d="M639.7,128.4"/>
<path class="st5" d="M646.9,122.7"/>
<path class="st5" d="M659.5,98.5"/>
<path class="st0" d="M714.3,112.8c0,0-0.5,2,1.4,2.5c1.9,0.5,0.9,1,0.9,1s1.5-3.6-2.1-3.5L714.3,112.8z"/>
<path class="st5" d="M691.4,148c0,0-2.6,7.9,0.7,12l0.7-0.9c0,0,4.4-7.7,5.4-6.6s-1,7.5-0.5,8.1c0.5,0.6,4.6-6,4.6-0.6
c0,0.7,1.7,2.4-0.6,2.8c-2.3,0.5,1.2,2.8-0.2,3.4c-1.5,0.6-1.6-1.2-5.4,0.4c-3.8,1.7-4.8,5.5-4.8,5.5l6.7-1.3c0,0,0.3,0.5-1.2,0.7
c-4.7,0.5-10.9,13.3-10.9,13.3s0.8-0.2,4,0.4c7.2,1.4,10.3,6.4,13.2,6.4c2.9,0,8.5,4.7,13.1,13.5c2.7,3.7,5.2,0.1,5.2-0.7
c0-0.8-0.3-2.7-0.3-2.7s-0.1-18.4,3.9-21.1c-3,4.2-4.6,19.1-2.5,19.9c2.1,0.8,5.4,0,5.4,0l1.2,1.7c0,0,1.7,2.3,6.6-0.4
s7.1-4.9,12.1-6.1c1.2-0.3,2.2-0.3,3-0.1"/>
<path class="st0" d="M703.3,147.5c0,0,2.7,3.7,6.2,3.9c3.5,0.2,2.9-2.1,4.8-1.4"/>
<path class="st0" d="M693.9,164.6c0,0,0.3-2.1-1.8-2.7c-0.5-0.4-1.1-1-1.1-1s-1.3,4.2,2.7,3.7L693.9,164.6z"/>
<line class="st5" x1="750.2" y1="192.6" x2="749.3" y2="195.1"/>
</g>
<g id="leaves">
<path class="st5" d="M661.6,156c0,0,5.7,2.3,1.4,5.7c-3.3-3-1.9-5.7-1.9-5.7l1.6-2.7c0,0-0.9-4.9-7.7-3.7c2.7,7,7.2,2.6,7.2,2.6"/>
<path class="st0" d="M727.3,129.8c-0.2,2.2,1.8-1.3,2.2,4c0.1,2-1.5,2.9-1.5,2.9c4.1,1.2,4-2.2,3.7-3.1c-0.3-0.8-2.6-2.1-2.6-2.1"
/>
<path class="st0" d="M702.6,116.5c0,0-1.7-4.3,1.9-6.8C706.7,113.1,702.6,116.5,702.6,116.5c-0.1-0.1-1.6,3.3-3.8,3.2
c-2.2-0.1-3.8,3.4-3.8,3.4s3.3,2.4,4.1-3.3c4.9-1.4,4.9,1.5,4.9,2.6c0,0-0.4,4.4,4.4,4.2c0.6-2.8-4.4-4.2-4.4-4.2s5.8,1.9,7.9-2.9"
/>
<path class="st5" d="M641.2,147.2c0,0-0.5,1.2,3.8,3.5c4.4,2.3,3.3-1.7,3.3-1.7s-1.5-5,3.7-6.2c1.7,7.7-2.8,7.6-2.8,7.6"/>
<path class="st5" d="M628.9,139.9c0,0-7.7,0.2-7.3-4.4c0,0,6.2-3.3,8.3,4.6"/>
<path class="st5" d="M670.8,129.6c0,0-7-0.4-4.8-6.2c2.5,0.2,4.3,4.8,3.7,5.8"/>
<path class="st5" d="M662.4,130.7c-1.6-0.6-2.5-0.4-2.5-0.4s-2.7-2.7-6.8,0.7c-2.1,1.3-2.2,0-2.2,0c2.7,2.7,3.4,2.7,6,2.1
s2.6-2.7,2.6-2.7l-2.8-2.4c0,0-2.8-3.3,1.5-5.7c2.6-1.3,0.6-2.8,0.6-2.8s4,2.7,3.2,4.8c-0.8,2.1-6.1,1.9-6.1,1.9"/>
<path class="st5" d="M626.2,146.1c0,0-0.4,3.5-7.9,3.7c4.1-5,0.4-3.1,7.2-5.8C626.2,145.5,626.2,146.1,626.2,146.1z"/>
<path class="st0" d="M654.6,108.5c0,0-5.1-3.9-7.2,1.8c3.6,1.5,3.9,0.8,6.4-1.1"/>
<path class="st5" d="M644.1,154.9c0,0,2.8-0.7,5.2,4.8c-5-1.6-2.5,0.6-6.6-3.7C643.6,155.1,644.1,154.9,644.1,154.9z"/>
<path class="st0" d="M681.5,193.9c0,0,1.4,2.4-2,4.6c-2.9-3.4,1.2-5.5,0.6-5c4.1-0.1,3.5-2,2.9-4.9c-1.1-4.8-3-1.4-3-1.4
s-3.2,4.2-7.5,1.1c4.8-6.2,7.2-1.1,7.2-1.1"/>
<path class="st0" d="M643.7,164.3c0,0,0.7-5.3-3.5-6.4c-4.2-1.1-2-2.2-2-2.2s-2.5,8.1,5.4,8"/>
<path class="st5" d="M685.8,178.1c0,0,3.8-2.7,1.3-6.3c-2.5-3.6-1.5-3-1.5-3s-5.5,4.7,0.6,9.7"/>
<path class="st0" d="M667.2,118.8c0,0,1.8-4.3-2.1-6.3c-3.9-2-1.5-2.6-1.5-2.6s-4.3,7.4,3.5,9L667.2,118.8z"/>
<path class="st0" d="M674.7,139c0,0,0.6-1.6-1.2-3.7c-2.2-2.5-2.9-2.2-2.9-2.2S668.4,139.6,674.7,139"/>
<path class="st0" d="M650.2,167.9"/>
<path class="st0" d="M653.6,174.3"/>
<path class="st0" d="M644.2,179.8c0,0,0.5-3.7-2.3-4.5c-2.8-0.8-1.3-1.5-1.3-1.5s-1.7,5.7,3.6,5.6"/>
<path class="st0" d="M674.1,164.5c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M633.9,172.1c0,0,3.7,0.5,4.5-2.2c0.8-2.8,1.5-1.3,1.5-1.3s-5.7-1.8-5.6,3.5"/>
<path class="st0" d="M683.7,189.5c1.1,0.8,4.7,1.4,4.7,1.4s-0.9-5.1-5.2-2"/>
<path class="st0" d="M610.1,163.2c0,0,0.6,3.9,3.8,3.8c3.2-0.1,1.9,1.1,1.9,1.1s0.1-6.3-5.5-4.5"/>
<path class="st5" d="M632.6,123.3c0,0-6.1-5.2,0.1-9.2c2.3,1.9,1.4,8.2,0.1,9.4L632.6,123.3z"/>
<path class="st0" d="M668.4,105.3c0,0-6.6-1.3-3.7-6.8c2.5,0.5,4.4,5.4,4,6.8L668.4,105.3z"/>
<path class="st0" d="M720.8,172.6c0,0,0.2,2.6,2.4,4.5c1.3,1.1,1.4,1.5,1.4,1.5s1.6-5.7-3.6-5.5"/>
<path class="st0" d="M680.5,100.9c0,0-0.8,3.1,2.1,3.9c2.9,0.8,1.4,1.5,1.4,1.5s1.8-5.7-3.7-5.6L680.5,100.9z"/>
<path class="st5" d="M679,110.5c0,0,6.7-0.1,5.1,5.9c-2.5,0.1-5.5-4.3-5.3-5.8L679,110.5z"/>
<path class="st0" d="M656.5,120.2c0,0,6.4-0.8,3.9-6.3c-3.6,1.5-3.4,2.1-3.8,5.3L656.5,120.2z"/>
<path class="st0" d="M711.6,118.1c0,0-1.8-1.9-4.6-2c-1.7-0.1-2-0.3-2-0.3s2.3,5.4,6.3,2"/>
<path class="st0" d="M724.9,111.7c0,0-2.5-0.5-4.9,1.1c-1.4,0.9-1.8,0.9-1.8,0.9s5.1,3.1,6.3-2"/>
<g>
<path class="st5" d="M693.1,123.3c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L693.1,123.3z"/>
</g>
<g>
<path class="st0" d="M721.1,143.1c0,0-7.6,1.8-4.5-5.9c2.9-1.2,4.2,3.6,4.4,4.7L721.1,143.1z"/>
</g>
<g>
<path class="st0" d="M686.5,138.1c0,0-5.5,1.3-3.2-4.2c2.1-0.9,3,2.6,3.1,3.3L686.5,138.1z"/>
</g>
<path class="st0" d="M705.5,154.4c0.9-1,0.5-2.3,0.3-2.7c-1-2.1-1.6-2.1-1.6-2.1s-2.8,4.1,1.7,4.9"/>
<path class="st0" d="M672.3,162.7c0,0,0.1-2.6-1.8-4.7c-1.1-1.2-1.2-1.6-1.2-1.6s-2.2,5.5,3,5.9"/>
<path class="st0" d="M620,147.8c0,0-2.2-4.7-5.8-1.4c2,2.4,2.5,2,5,1.6"/>
<path class="st0" d="M637.1,112.9c0,0,0.1,4.2,3.8,5.2c2.5,0.7,2,1.7,2,1.7s1.3-7.4-5.6-6.4"/>
<path class="st0" d="M646.9,200.1c0,0-2.5-0.3-4.8,1.4c-1.3,1-1.7,1-1.7,1s5.3,2.7,6.2-2.4"/>
<path class="st5" d="M640.5,143c0,0,2.7,5.4-2.2,8.8c-2.9-4,2-8.3,2-8.3s1.6-4.1,4.3-4.2c2.7,0,4.4-4.3,4.4-4.3s-3.3-2.5-4.9,2.8
c-6.6,4-6.1-1.1-6.1-1.1s-0.7-7.5-6.4-6.9c0.3,4.3,0.1,3.7,5.4,6.3c5.3,2.5-4.5-3-8.1,4.5c2.7,4.6,5.8-2.3,5.8-2.3"/>
<path class="st0" d="M618.8,137.3c0,0-5,2.8-5-2.3c0-1.5,0-1.2,0.5-2.9C615,133.2,616.7,136,618.8,137.3z"/>
<path class="st5" d="M706.5,147c0,0,3.7-1.3,1.2-5.6c-2.5-4.2-3.7-0.3-3.7-0.3s-1.4,5-6.4,3.3c2.6-7.4,6.3-4,6.3-4"/>
<path class="st5" d="M715.1,158.3"/>
<path class="st5" d="M682.7,164.5c0,0,0.1,6.8-5.9,5.1c-0.2-4.8,4-4.3,5.5-4.1"/>
<path class="st5" d="M665.4,143.9c0,0-0.7,2.9-8.6,2.1c-1.5-0.2-3.8-7.6,7.2-3c3.2,1.5,3.6-1.4,2.3-1c-1.2,0.4-8.2-6.8-4.4-9
c3.8-2.3,3.5-1.7,5.4-1.6c-2.5,4.8-4.7,7.6-4.7,7.6"/>
<path class="st0" d="M647.3,133.4c-0.3-1.2-1.6-0.8-1.6-0.8s-0.4-2.6-3.9-1.2c-0.4,0.1-2.3-0.3-2.3-0.3c0.4,1.1,1.7,2.6,3.6,2.7
c1.9,0.1,2.3-1.3,2.3-1.3l-1.4-2.2c0,0-1.8-2.9,1.6-3.6c1-0.1,2.3-0.9,2.3-0.9s1.4,1.9,0.5,3.1c-1,1.2-4.5-0.1-4.5-0.1"/>
<path class="st5" d="M662.5,190.7c0,0-2.5,7,4.5,7.3c0.5-6.4-3-6.1-4.6-6.5"/>
<path class="st0" d="M665.2,189.5c0,0-1.9,0.9-4.3-2.7c3.7,0.5,1.7-0.8,5.1,1.8C665.5,189.3,665.2,189.5,665.2,189.5z"/>
<path class="st5" d="M677.9,144.3c1.1,1.4,1.9,1.6,1.9,1.6s3.2,4.3,8,4.1c-0.6-2.5-1.5-4.1-4-4.9c-2.5-0.8-3.6,1-3.6,1l1.1,3.5
c0.6,4.6-5.9,5.3-5.9,5.3s-1.6-2.9,0.2-4.2c1.8-1.4,5.4,0.9,5.4,0.9"/>
<path class="st5" d="M676.5,183.1c0,0,4-5.5,6.9-0.8c-2.5,3.7-5.7-0.3-6.2-0.3"/>
<path class="st5" d="M661.4,179.2c0,0-3.7,0.3-3.3-7.1c3.5,1.9,5,2.6,5.4,6.7C662,179.3,661.4,179.2,661.4,179.2z"/>
<path class="st5" d="M665,150.9c-0.2,0.1,3.8-5.1,6.8-0.4C668.3,155.6,665,150.9,665,150.9C665.5,150.5,665.1,150.8,665,150.9z"/>
<path class="st0" d="M715.8,146.5c0.3,0.2,1.6,3.2-2.2,3.6C712.1,146.7,715.5,146.3,715.8,146.5z"/>
<path class="st0" d="M662.1,207.4c0,0,5.2-3.4,5.5,2.1c-4.4,1-5.7-1.7-5.7-1.7l-1.3-2.8c0,0-4.5-2-7.4,4.3c7.3,1.8,6.3-4.5,6.3-4.5
"/>
<path class="st5" d="M648.1,175.7c0,0,4-5.5,6.9-0.8c-2.7,6.5-3.6,0-6.1,0.7"/>
<path class="st0" d="M631.2,155.3c0,0-4.4,2-6.4-5.2c3.9,0.7,6.9,1.7,5.3,5.4"/>
<path class="st0" d="M674.4,161.7c0,0-0.6-4.9,6.9-4.5c-1.9,3.5-3.7,6-6.8,3.4"/>
<path class="st0" d="M646.3,171.9c0,0-1.9-4.5,5.3-6.3c-0.8,3.9-1.9,6.9-5.5,5.2"/>
<path class="st0" d="M648.3,195.4c0,0-4.7-1.2-1.7-8c2.6,3,4.3,5.7,0.7,7.6"/>
<path class="st0" d="M636.4,176.6c0,0-2.8,4-8.1-1.2c3.7-1.4,6.8-2,7.4,1.9"/>
<path class="st0" d="M626.7,133c-1.1-0.6-0.4-1.7-0.4-1.7s-2.4-1.1-0.1-4c0.2-0.4,0.3-2.3,0.3-2.3c1,0.7,2,2.3,1.7,4.2
c-0.4,1.8-1.8,1.9-1.8,1.9l-1.8-1.9c0,0-2.3-2.5-3.9,0.6c-0.3,1-1.5,2-1.5,2s1.4,1.9,2.9,1.3c1.5-0.6,1.1-4.4,1.1-4.4"/>
<path class="st0" d="M625.3,163.8c-1.1,0.5-1.6-0.8-1.6-0.8s-2.3,1.3-3.3-2.3c-0.2-0.4-1.7-1.6-1.7-1.6c1.1-0.4,3.1-0.2,4.3,1.1
c1.3,1.4,0.4,2.6,0.4,2.6l-2.6,0.3c0,0-3.4,0.4-1.8,3.5c0.6,0.8,0.7,2.4,0.7,2.4s2.4,0,2.7-1.6c0.4-1.5-2.9-3.5-2.9-3.5"/>
<path class="st0" d="M639.4,192.1c0,0-1.6,4-7.2,0.5c2.9-1.9,5.5-3,6.7,0.3"/>
<path class="st5" d="M697.3,107.4c0,0-3.4-1.5,0.7-7.8c2.1,3.3,3.1,4.7,1.4,8.5C697.8,107.8,697.3,107.4,697.3,107.4z"/>
<path class="st0" d="M738.1,110.1c0,0-1.5-5.6,2.5-4.8c-0.5,3.4-2.6,4.4-2.6,4.4s0-0.2-1.6,2c-2.2,3.1-0.2,2.4,2.2,2.9
c0.7-0.4,1.6-2.6,4.5,0.8c-3.1,2.2-4.3-0.6-4.5-0.8"/>
<polyline class="st5" points="720.4,128.7 722,133.2 724.2,133.2 "/>
<path class="st0" d="M668,189.7c0,0-1.5-1.4,1-4.9c0.8,3.7,1.3,1.3,0.1,5.4C668.3,189.9,668,189.7,668,189.7z"/>
<path class="st0" d="M696.9,170.2c1.3,0.9,2.1,0.8,2.1,0.8s3.9,2.7,7.9,1.1c-1.2-1.9-2.4-3-4.8-3c-2.3,0-2.8,1.9-2.8,1.9l2,2.6
c1.8,3.7-3.4,6.2-3.4,6.2s-2.2-1.9-1.1-3.6c1.1-1.7,4.8-0.8,4.8-0.8"/>
<path class="st0" d="M703.5,165.9c-0.1,0.1,2.1-5,5.4-1.8C707.2,169.1,703.5,165.9,703.5,165.9
C703.9,165.5,703.6,165.8,703.5,165.9z"/>
<path class="st0" d="M632.5,199.6c0,0.2-1.1-5.3,3.5-4.5C637.4,200.2,632.5,199.6,632.5,199.6C632.6,199.1,632.5,199.6,632.5,199.6
z"/>
</g>
</svg>
</div>
</div>

Fade color in path tag

In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).

Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>

How to animate stroke in svg image on hover

I'm trying to make a single stroke in my svg drawing to be highlighted on hover.
Is it possible to be done with css or do I need to use javascript?
Here's my html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g>/g></svg>
As you can see I tried 'animate' but it doesn't work.
I also tried css like here:
g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }
This makes the whole image to change color instead of a single line.
Here's live example:
http://www.ewelinawoloszyn.com/index11.html
Any suggestions are more than welcome. Many thanks in advance for your help.

You need to set the :hover state on the actual path element.
Also note that your SVG has a malformed closing <g> at the end.
svg {
margin-top: -200px;
/* demo positioning */
}
#Warstwa_1 path {
stroke-width: 2px;
/* for demo pusposes only */
transition: stroke .4s;
}
#Warstwa_1 path:hover {
stroke: red;
}
<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 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
<g>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933"> <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
<animate dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
<path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
</g></g></svg>

I had to add closing tag for .hi class and added
g#Warstwa_1_kopia {
display:block;
}
Then Paulie_D CSS worked.

for animation, you can use this code(CSS-animation) and modify according to your requirement
svg:hover path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
stroke: blue;
}
}
here I apply hover effect on svg(tag).
and for more details about CSS-animation check the link.

Continuous wave like animation from wave line svg

Hello I have an svg that is a wavy line built with adobe illustrator and I'm trying to add a continuous wave like animation to it.
I've tried vivus.js and was able to get the draw animation working but not coninuously.
Does anyone have an idea on how to start something like this? I don't expect someone to do the problem for me but instead point me to the right direction, although im not opposed if someone has a quick answer.
Any answer will work wether its pure css, js or both.
Here is the svg
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
and the jsfiddle link
here
Thanks!!

I hope this will help you. Play a little bit with the values or add the SVG wave as background, repeat it and change the background-position.
#keyframes wave {
0% {
left: -80px;
}
100% {
left: 0;
}
}
.container {
width: 100px;
overflow: hidden;
}
.container svg {
position: relative;
left: -50px;
width: 200px;
animation: wave 2s linear infinite;
}
<div class="container">
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456.7 39.9" style="enable-background:new 0 0 456.7 39.9;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<path class="st69" d="M4.2,33.2c0.1-0.1,7-6.9,15.9-13.8C27.7,13.7,38.7,6,47.5,6c7.5,0,14,6.6,20.3,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.6,14.6c9.9,0,17.7-7.8,24.5-14.6l0.5-0.5C124,12.5,130.5,6,137.9,6c7.5,0,13.9,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.6,14.6,24.5,14.6c10,0,17.8-7.8,24.6-14.6l0.5-0.5C214.4,12.5,220.9,6,228.4,6c7.5,0,14,6.5,20.2,12.9l0.4,0.4
c6.8,6.9,14.5,14.6,24.5,14.6c9.9,0,17.7-7.8,24.5-14.6l0.3-0.3c6.3-6.4,12.9-13,20.5-13c7.5,0,14.1,6.6,20.4,13l0.3,0.3
c6.8,6.9,14.6,14.6,24.5,14.6c9.9,0,17.6-7.8,24.5-14.6l0.2-0.2C395.1,12.6,401.6,6,409.2,6c8.7,0,19.8,7.7,27.3,13.4
c8.9,6.8,15.9,13.7,16,13.8"/>
</svg>
</div>

Aside from css tricks, you could use Math.sin with interval, apply this to Bezier Curve (loop & join into attribute string) and it's done.
function anim(){
document.querySelectorAll('svg circle').forEach((c,i)=>c.setAttribute('cy',50+Math.sin(performance.now()/1000+i)*25))
}
setInterval(anim,20)
<svg id="wave" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 456 100" style="enable-background:new 0 0 456 100;" xml:space="preserve">
<style type="text/css">
.st69{fill:none;stroke:#000000;stroke-width:12;stroke-miterlimit:10;}
</style>
<circle cx="50" cy="50" r="4" fill="red" />
<circle cx="100" cy="50" r="4" fill="red" />
<circle cx="150" cy="50" r="4" fill="red" />
<circle cx="200" cy="50" r="4" fill="red" />
<circle cx="250" cy="50" r="4" fill="red" />
<circle cx="300" cy="50" r="4" fill="red" />
<circle cx="350" cy="50" r="4" fill="red" />
<circle cx="400" cy="50" r="4" fill="red" />
</svg>

Google Visualization Pie Chart - changing text coordinates

I have made a simple donut chart (based on the Google Visualization example at https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut).
As it only shows one slice (the other is transparent/invisible), I'd like to move the <text> element to the centre of the chart, i.e., within the hole. I know that it simply involves updating the 'x' and 'y' coordinate attributes but I'm having trouble accessing them in the DOM, particularly as there are no IDs/classes to hang onto.
So, how can I target the <text> element of the penultimate <g> element in this code? I'd like to change x="239.45622566746957" y="285.69328724429994" to x="200" y="200"
Javascript preferred but jQuery also fine...
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>

Use a selector like this:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
This will not work in IE8, as older versions of IE do not support SVG. If you need to support IE8, you will need a selector for the equivalent VML structure.