Make the SVG path 100% width?

Question

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.

The SVG does expand 100% width, but the path doesn't.

Check the pen: https://codepen.io/somestuff/pen/QPJXyb

 .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)>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; }

 <div class="wave-container"> <div class="Wave__WaveWrapper-o7bhc-0 wave-container"><svg id="wave" width="100%" height="150px" fill="none"> <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"> <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&nbsp; "> </animate></path></svg></div> </div>

Answer 1

Use a viewBox() attribute and no width or height. The SVG will take the width of the container, the class="Wave__WaveWrapper-o7bhc-0 wave-container" in this case. Try with <svg id="wave" viewBox="0 0 1440 365.38" > -- original answer by @enxaneta