title: Create a simple wave with SVG issue
body: <p>I am trying to create a simple wave with SVG to put on my website. This is what I've come up with so far:</p>
  
  <pre><code>&lt;svg height="100" width="500"&gt;
    &lt;path d="M 0 50 
             Q 125 0, 250 50, 375 100, 500 50
             L 500 100
             L 0 100
             L 0 50
             Z" stroke="blue" stroke-width="1" fill="red" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/a5q41t26/" rel="nofollow noreferrer">https://jsfiddle.net/a5q41t26/</a></p>
  
  <p>The problem is that I can't align the bottom of the path with the bottom of the lower wave to avoid the gap.</p>
  
  <p><a href="https://i.stack.imgur.com/Pp90B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pp90B.png" alt="enter image description here"></a></p>
  
  <p>Any help would be appreciated.</p>