Создайте простую волну с проблемой SVG

Question

Я пытаюсь создать простую волну с SVG для размещения на моем сайте. Это то, что я придумал до сих пор:

<svg height="100" width="500"> 
    <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" /> 
</svg> 

https://jsfiddle.net/a5q41t26/

Проблема заключается в том, что я не могу выровнять нижнюю часть пути с нижней частью нижней волны, чтобы избежать разрыва.

Любая помощь будет оценена.

Answer 1

Первая координатная пара двух пар в команде пути Q является контрольной точкой. Кривая не проходит через контрольную точку.

Посмотрите на section on Quadratic bezier curves в Википедии.