title: How do I create animated waves in a square box using css?
body: <p>I have been trying to figure out how to create some smooth animated waves in a 200x200 pixel box that come from the top. I haven't been able to get a good result. All my attempts result in a spiky wave effect.</p>
  
  <p>An example that I have trying to tweak is <a href="https://csspoints.com/css-wave-effect-responsive-design/" rel="nofollow noreferrer">here</a></p>
  
  <p>This one is at the bottom of the page. I am trying to put it in a box, make the base of the waves start at the top and makes the waves meet the bottom of the box. I could really use some help creating this effect.</p>