How to extend an SVG graphic downwards filling the page?

In HTML, I am trying to use SVG graphics to create a background section to a part of my site. It uses a curve that sections off a part of the website to another. I have managed to create a basic outline for the general shape of the SVG: Picture of the animated banner and SVG page section.

However, I am expecting the SVG element to be stretched downwards so it fills out the rest of the page. This is not the case however as when scrolling down the SVG ends and the background takes up the rest of the site: The SVG is too small.

I need help extending the SVG to fill the rest of the page underneath it.

Current HTML Code:

div class="wave">
      <svg width="100%" height="200px" fill="none" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
        <path 
          fill="white" 
          d="
            M0 67
            C 273,183
              822,-90
              2525.01,98
            V 359
            H 0 
            V 67
            Z">
        </path>
      </svg>
    </div>

I have tried to change the SVG values but they normally just turn the graphic out of shape. I would like help understanding how to understand and fix this problem.

Futhermore, how to use the SVG viewBox to preserve the aspect ratio of the graphic?

[Update] Here is the website so far. I need to move the SVG graphic downwards as indicated in the arrow so the black particle background is above it: Picture Update

Solution

I thought about your problem.

If the idea is to have an image fullscreen on home with a wave svg down with a color and continuity same color in other part. An idea would be the following:

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

section {
  min-height: 100vh;
  background-color: #999999;
  margin: 0;
}

section h2 {
  margin: 0;
}

#home {
  margin: 0;
  padding: 0;
  width: 100vw;
  background-image: url("https://picsum.photos/1920/1080");
  background-size: cover;
  background-position: center;
  position: relative;
}

#home .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #7b98bc;
}

.wave {
  width: 100%;
  height: 100vh;
}

.wave svg {
  display: inline-block;
}

<section id="home">
  <div class="wave">
    <svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
            <path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
        </svg>
  </div>
  <div class="title">
    <h2>Title of my website</h2>
  </div>
</section>

<section id="part1">
  <h2>here we are section part1</h2>
</section>