title: Make the SVG path 100% width?
body: <p>I have a SVG path animation that currently is not expanding 100% width to fill the screen. I have tried with viewBox and other settings but nothing seems to work. </p>
  
  <p>The SVG does expand 100% width, but the path doesn't. </p>
  
  <p>Check the pen: <a href="https://codepen.io/somestuff/pen/QPJXyb" rel="nofollow noreferrer">https://codepen.io/somestuff/pen/QPJXyb</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wave-container {
    transition: color .8s cubic-bezier(.2, .8, .2, 1), background-color .8s cubic-bezier(.2, .8, .2, 1), fill .8s cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 1900px;
  }
  
  html,
  body {
    width: 100%;
    height: 100%;
  }
  
  .wave-container svg {
    position: relative;
    top: -150px;
    left: 8px;
    width: 110% !important;
  }
  
   :not(svg),
   :not(foreignObject)&gt;svg {
    transform-origin: 0px 0px;
  }
  
  .wave-container {
    align-self: end;
    width: 100%;
    background: blue;
    display: block;
    width: 100%;
    vertical-align: bottom;
  }
  
  .dVVMLq {
    position: absolute;
    bottom: -1px;
    left: 0px;
    width: 100%;
  }
  
  .wave-container svg path {
    fill: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wave-container"&gt;
    &lt;div class="Wave__WaveWrapper-o7bhc-0 wave-container"&gt;&lt;svg id="wave" width="100%" height="150px" fill="none"&gt; 
      &lt;path fill="#e5e5e5" d="M 0 59.9547 C 307.185 122.808 534.699 46.5899 847.24 39.6827 C 1159.78 32.7756 1270.98 45.0236 1440 59.9547 V 351.955 H 0 V 59.9547 Z"&gt;
      &lt;animate repeatCount="indefinite" fill="freeze" attributeName="d" dur="10s" 
      values="M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z; M0 51.8168C277 169.163 433 131.471 720 51.8168C1007 -27.8372 1199 -5.83717 1440 51.8168V343.817H0V51.8168Z; M0 69.3411C342 69.3411 652 -51.313 994 25.687C1336 102.687 1354 103.687 1440 69.3411V361.341H0V69.3411Z; M0 95.654C277.431 -69.1705 408 11.654 720 95.654C1032 179.654 1207.5 144.328 1440 95.654V387.654H0V95.654Z&amp;nbsp; "&gt;
      &lt;/animate&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>