如何制作如图所示的SVG波浪图形？

以下是适配目标效果的SVG代码，修改了路径曲线参数，让波浪形态更贴合需求：

<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
  <rect x="0" y="0" width="960" height="540" fill="#002233"></rect>
  <path d="M0 382L48 370C96 358 192 334 288 346C384 358 480 406 576 402C672 398 768 342 864 354C912 360 936 402 960 423L960 540L912 540C864 540 768 540 672 540C576 540 480 540 384 540C288 540 192 540 96 540L48 540L0 540Z" fill="#0066FF" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>

关键修改说明 #

• 重新调整路径中的贝塞尔曲线控制点，让波浪起伏弧度更自然，匹配目标图的波浪形态
• 修正路径收尾衔接逻辑，避免突兀折线
• 将stroke-linejoin改为round，让线条衔接更平滑

内容的提问来源于stack exchange，提问作者user19661023