How to implement svg animation?

Question

SVG

There is an element consisting of 3 corners that should move in different directions, you need to make sure that when the parts are removed in different directions, the background changes

<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

In theory, if the base is ready, then you can move the stripes with js and show the background with a set-timeout, which will be transparent in advance.