Make SVG fit parent containers width

Question

Im currently trying to create a wave animation, however I don't get how to fit the path element's width to the SVGs width. The SVGs width is 200% of the viewport and the path elements width is 100%. However I want the path element to have a width of 200% too, so the animation fits the whole screen.

https://jsfiddle.net/r8o9gjsk/1/

or

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}

.waveWrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveMiddle {
  background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner">
    <div class="wave waveMiddle">
      <svg width="100%">
            <path width="100%" height="100%"
                  d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
          </svg>
    </div>
  </div>
</div>

Answer 1

you were missing the viewBox param on the svg

only changed the viewBox:

@keyframes move_wave {
  0% {
    transform: translateX(0) translateZ(0) scaleY(1)
  }
  50% {
    transform: translateX(-25%) translateZ(0) scaleY(0.55)
  }
  100% {
    transform: translateX(-50%) translateZ(0) scaleY(1)
  }
}

.waveWrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

.waveWrapperInner {
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 100%;
  bottom: -1px;
}

.wave {
  position: absolute;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat no-repeat;
  background-position: 0 bottom;
  transform-origin: center bottom;
}

.waveMiddle {
  background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
  animation: move_wave 10s linear infinite;
}

<div class="waveWrapper waveAnimation">
  <div class="waveWrapperInner">
    <div class="wave waveMiddle">
      <svg width="100%" viewBox="0 0 1600 200">
            <path width="100%" height="100%"
                  d="m1599.995,122c-310.995,0 -409.893,-121.25 -810.995,-121c-400,0 -500,121 -789,121l0,77l1600,0s-0.005,-48 -0.005,-77z" fill="#000000" fill-rule="evenodd"/>
          </svg>
    </div>
  </div>
</div>