Как реализовать svg анимацию?

Question

[MarEeeeee]

Есть свг элемент состоящих из 3ех углов, которые должны разъезжаться в разные стороны, требуется сделать так, чтобы при удалении частей в разные стороны менялся задний фон

<svg viewBox="-100 -100 200 200" width="500" height="500" class = "main_screen">
    <defs>
        <polygon id="fig"
                    class="logo"
                    style="stroke: rgb(0, 0, 0); fill: rgb(235, 11, 11);"
                    transform="translate(-185,-163)"
                    points="190.492 149.86 186.232 156.783 195.951 174.49 155.412 174.823 160.204 182.811 209.797 182.744">
                    <animateTransform
                    attributeName="transform"
                    type="translate"
                    
                    values = "-185,-163; -145, -150; -185,-163"
                    dur = "2s"
                    repeatCount="indefinite"
                />
                
        </polygon>
    </defs>

   
    <g >
        <use href="#fig"></use>
        <use href="#fig" transform="rotate(-120)"></use>
        <use href="#fig" transform="rotate(120)"></use>

       
    </g>
    <path  d="M37.5 0L74.3061 63H0.69392L37.5 0Z" fill="black">
        <animateTransform    
        attributeName="transform"
        type="scale"
        values = "0; 1; 0"
        dur = "2s"
        repeatCount="indefinite"
           />
    </path>
</svg>

Answer 1

[Lord_Dantes]

В теории если готова база, то можно js-ом передвинуть полоски и сет-таймаутом показать фон, который заранее будет прозрачным.