You might notice the divs with green backgrounds in the code. These are placeholders. Something caused the vertical margins for the wave animations to be messed up (I suspect it to be the scaleY property). However,it's not messed up if there's a div above it and below it in the code.

If you don't want to add

<div></div> 

before and after the wave, you can adjust the margin of .holdholdthewave

Play around with adjusting the margin-top and margin-bottom with multiples of 26ish px

For color of the wave animation, you will have to change both the svg file and wave.css

Link for netifly: https://keen-turing-5071b7.netlify.app/