Continuous wave like animation from wave line svg

Question

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!!

Answer 1

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>

Answer 2

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>