波形SVGヒーロー

<div class="d01-01-09-hero">
          <div class="d01-01-09-inner">
            <h1>流れに乗って、前へ。</h1>
            <p>足元の波が、ページに穏やかなリズムを刻みます。</p>
          </div>
          <div class="d01-01-09-waves">
            <svg viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
              <path fill="rgba(255,255,255,.35)" d="M0,64 C240,100 480,20 720,52 C960,84 1200,30 1440,64 L1440,120 L0,120 Z M1440,64 C1680,100 1920,20 2160,52 C2400,84 2640,30 2880,64 L2880,120 L1440,120 Z"/>
            </svg>
            <svg class="d01-01-09-w2" viewBox="0 0 1440 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
              <path fill="#ffffff" d="M0,80 C260,40 520,110 780,72 C1040,36 1220,96 1440,72 L1440,120 L0,120 Z M1440,72 C1700,40 1960,110 2220,72 C2480,36 2660,96 2880,72 L2880,120 L1440,120 Z"/>
            </svg>
          </div>
        </div>

.prev.d01-01-09{padding:0;display:block;min-height:320px}
        .d01-01-09-hero{position:relative;height:320px;overflow:hidden;background:linear-gradient(180deg,#0e7490 0%,#22a3c4 100%);display:flex;align-items:center;justify-content:center}
        .d01-01-09-inner{position:relative;text-align:center;padding:24px 24px 60px;z-index:1}
        .d01-01-09-hero h1{color:#fff;font-size:24px;font-weight:700;letter-spacing:.1em;margin:0 0 12px}
        .d01-01-09-hero p{color:rgba(255,255,255,.85);font-size:12.5px;line-height:1.9;margin:0}
        .d01-01-09-waves{position:absolute;left:0;bottom:-1px;width:100%;height:80px}
        .d01-01-09-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:d01-01-09-wave 9s linear infinite}
        .d01-01-09-waves svg.d01-01-09-w2{animation-duration:6s;animation-direction:reverse;opacity:.9}
        @keyframes d01-01-09-wave{
          0%{transform:translateX(0)}
          100%{transform:translateX(-50%)}
        }