Layout of geometric shapes?

Question

css

Hello!
there are such geometric shapes (on the background) on the page: it was advised to do this using svg, I received this svg from the designer:

<svg  height="100%" width="100%" viewBox="0 0 1000 1000" preserveAspectRatio="none">
        <linearGradient id="linear-gradient" gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#5e4bb6"/>
          <stop offset="100%" stop-color="#352d3f"/>
        </linearGradient>
        <path class="st0" fill="url(#linear-gradient)" d="M472.5,918.7L147.8,731.2c-17-9.8-27.4-28-27.4-47.7v-375c0-19.7,10.4-37.8,27.4-47.7L472.5,73.3
        c17-9.8,38-9.8,55,0l324.6,187.5c17,9.8,27.4,28,27.4,47.7v375c0,19.7-10.4,37.8-27.4,47.7L527.5,918.7
        C510.4,928.5,489.5,928.5,472.5,918.7z"/>
</svg>

I understand that I need to absolutely position it, take it off the screen, but I can’t stretch it to the full width of the container, scale helps to simply increase it, but it lags during scrolling.
Can you advise something?

Answer 1

No, it's certainly all beautiful, but personally, I would tear off the designer's hands for such beauty :)

Answer 2

Instead of scale, you need to change viewBox="0 0 1000 1000". For example, to reduce by 2 times, you need to write viewBox="0 0 500 500" )

Answer 3

And what prevents you from inserting into a div with position: absolute, whose height and width are set in percentages and negative left?