Волновой эффект с SVG только с CSS

Question

Мне удалось управлять стилем волны в верхней части моего header. Но волновой эффект ниже не работает, как и прямая линия, ограничивающая волновой путь.

Как я могу исправить волновой эффект в нижней части моего заголовка?

.container_6 {
  height: 100vh;
  width: 100vw;
  border: 2px solid red;
}

.container_6 header {
  height: 400px;
  width: 100vw;
  background-color: rgb(189, 190, 107);
  border: 2px dotted rgb(0, 26, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.container_6 header .upper {
  width: 100vw;
  height: 100px;
  border: 1px solid green;
}

.container_6 header .bottom {
  width: 100vw;
  height: 100px;
  border: 1px solid green;
  overflow: auto;
}

<div class="container_6">
  <header>
    <div class="upper">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="210 110 1140 280">
            <path
              fill="#0099ff"
              fill-opacity="1"
              d="M0,32L60,69.3C120,107,240,181,360,186.7C480,192,600,128,720,133.3C840,139,960,213,1080,213.3C1200,213,1320,139,1380,101.3L1440,64L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
            ></path>
          </svg>
    </div>
    <h1>Main Text</h1>
    <div class="bottom">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="210 160 1140 380">
            <path
              fill="#0099ff"
              fill-opacity="1"
              d="M0,32L60,69.3C120,107,240,181,360,186.7C480,192,600,128,720,133.3C840,139,960,213,1080,213.3C1200,213,1320,139,1380,101.3L1440,64L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
            ></path>
          </svg>
    </div>
  </header>
</div>