如何用svg制作弯曲波

Question

我正试图用svg做一个弯曲的波浪。我已经创造了一个水波，但最后应该有第二个弯曲的波浪。

这就是我现在所拥有的：

这就是它应该是这样的：

我怎样才能实现这一目标？

这是我已有的代码：

<svg class="four" viewBox="0 0 500 500" preserveAspectRatio="none">   
            <path d="M0,100 C100,200 350,0 300,100 L500,0 L0,0 Z" style="stroke: none; fill:#1e90ff;"></path>
         </svg>

Answer 1

在path的最后一位使用二次Bézier曲线，如下所示：

<path d="M0,100 C150,200 350,0 300,100 Q400,25 500,25 L500,0 L0,0 Z" 
style="stroke: none; fill:#1e90ff;"></path>
</svg>