如何为带波浪底边框的Header实现相对clip-path平滑动画？

我正在使用clip-path和滚动驱动动画制作带有波浪底边框的动画Header。当前方案采用带绝对坐标控制点的SVG路径，希望切换为相对路径以提升响应式适配性（让路径可随容器缩放）。

绝对SVG路径示例代码如下：

@keyframes straighten-wave {
  0% {
    clip-path: path('m0,0h1440v150c0,0,-119.6,-18.8,-196.9,-23c-143.8,-7.7,-224,26.2,-372.1,22c-160.5,-2.6,-249.9,-47.4,-414.5,-49c-179.3,-1.7,-456.5,50,-456.5,50v-150');
    background-color: rgba(255, 200, 200, 0.8);
  }
  100% {
    clip-path: path('m0,0h1440v90c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c-1440,0,-1440,0,-1440,0v-90');
    background-color: rgba(200, 255, 200, 0.8);
  }
}

header {
  position: sticky;
  top: 0;
  height: 150px;
  backdrop-filter: blur(8px);
  z-index: 100;
  animation: straighten-wave linear both;
  animation-timeline: scroll();  
}

当我尝试使用objectBoundingBox单位时，动画出现异常——状态间会瞬间跳转而非平滑过渡。

想请教几个问题：

• 是否可以实现相对clip-path的平滑动画？
• 有没有其他方法能实现带响应式动画的波浪边框效果？
• 是否需要尝试CSS之外更灵活的技术？

目标Header形状如下：

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