JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function anim(){
	document.querySelectorAll('svg circle').forEach((c,i)=>c.setAttribute('cy',50+Math.sin(performance.now()/1000+i)*25))
}
setInterval(anim,20)