Как я могу сделать SVG обрезку при уменьшении (изменении размера) страницы вместо изменения размера самой SVG

Question

Моя цель - заставить мой SVG действовать так же, как Netlify SVG.

SVG Code

<svg min-width="1152" min-height="523" viewBox="0 0 1152 523" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M592 383C457.295 487.224 134.333 527 0 522V0H1154V172C1001.67 191 729 277 592 383Z" fill="url(#paint0_linear)"/>
    <defs>
    <linearGradient id="paint0_linear" x1="577" y1="0" x2="577" y2="522.669" gradientUnits="userSpaceOnUse">
    <stop stop-color="#04724D"/>
    <stop offset="1" stop-color="#23E8A5"/>
    </linearGradient>
    </defs>
</svg>

Html Код

<div class="home_background">
    <a class="btn btn-white btn-right">Sign Up</a>
</div>

Я также использую Гэтсби. js, хотя это не влияет на конечный результат.