在CSS中创建多层SVG波形

我正试图在这样一个网站上创建一个波浪效果：那里有一个主色波浪（深紫色），然后沿着边缘有浅色波浪。我尝试过用CSS position和top定位多个路径，但无法让它们工作

以下是我的基本波形：

Mybe so

三个独立的波。每个波浪的颜色可以根据您的喜好选择

该应用程序响应迅速，在所有现代浏览器中看起来都一样

.w1{
填充：#0E7452；
不透明度：0.4；
}
.w2{
填充：#0E7452；
不透明度：0.7；
}
.w3{
填充物：#0B5B41；
}

使用Inkscape或Illustrator绘制艺术品，导出并使用。我肯定有在线矢量软件。顺便说一句，inskape是免费的，这是应该怎么做的。只是一个观察：您可以大大简化d属性。对于相同的曲线，我会使用

d=“M0224 C120203240181360186.7 C480192600224720245.3 C8402679602771080250.7 C120022413201601440,96 V3200Z”

@enxaneta我认为OP有三条路径比较容易，这样每个路径都可以用不同的颜色绘制colors@Ping如果答案对你有用，请不要忘记标记。