How to implement animated mask in SVG animation

Question

i have created this SVG animated logo

https://codepen.io/nikches/pen/mOoevm

based on this GIf that was provided to me.

I tried to recreate the color intelapcing of the triangles, that you can see in the GIF, by using different levels of transparency for each triangle but that didn't work. This must be somekind of animated mask that blends all the colors together but i don't know how to recreate it using code . Any suggestions would be much appreciated. Take care.

below is the svg code with the animation code inlined:

<svg version="1.1" id="Layer_1_copy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#fff;}
    .st1{fill:none;stroke:url(#SVGID_1_);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}

    .st2{fill:none;stroke:url(#SVGID_2_);stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}

    .st3{fill:none;stroke:url(#SVGID_3_);stroke-width:23;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-opacity:1;}
    svg {
    background: black;
    }
    #blue {
        opacity: 0;
        transform: translateX(-50px);
        animation: moveToPlace 1.5s 1s ease forwards;
    }
    #pink {
        opacity: 0;
        transform: translateX(-50px);
        animation: moveToPlace2 1.5s 1.3s ease forwards;
    }

    #orange {
        opacity: 0;
        transform: translateX(-50px);
        animation: moveToPlace2 1.5s 1.6s ease forwards;
    }

    @keyframes moveToPlace {
        20% {
            opacity:1;
        }
        100%{
            opacity:1;
            transform:translateX(0);
        }
    }

    @keyframes moveToPlace2 {
        20% {
            opacity:.8;
        }
        100%{
            opacity:.8;
            transform:translateX(0);
        }
    }

    #C {
      stroke-dasharray: 240;
      stroke-dashoffset: 240;
      animation: dash .3s  ease-in forwards;
    }

    #o {
      stroke-dasharray: 210;
      stroke-dashoffset: 210;
      animation: dash .3s .3s ease-in forwards;
    }

    #rest {
      stroke-dasharray: 2000;
      stroke-dashoffset: 2000;
      animation: dash 1.5s 0.5s ease-in forwards;
    }

    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }   
</style>
<defs>
  <clipPath id="myClip">
    <path class="st0" d="M364,334.9c8.1-2.3,16.1-7.9,23.4-14.7c-1.3,7.2,2.1,11.1,8.5,10c7.3-1.2,15.5-9.1,21.9-16.3
        c-1.3,7.4,2.9,12.3,11.4,11c11-1.7,23.7-15.5,34.7-30.1l0,0c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1
        c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4c1.3-0.2,2.4-0.5,3.7-0.8c0.1,0,0.3-0.2,0.4-0.2
        c13.6-3.9,27-16.8,37-30.1c-1.7-1.2-3.6-3-5-3.8l-0.9,1.2c-4.9,6.5-10.8,12.6-16,17c4.2-13.3,3.3-32.7,11.5-51l-10-3.8
        C483,255.7,471,275,458.9,291l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9c-2.9,0.5-4.6-1.3-1.5-7.1l28.4-54.3l-13.3,2.1L423,301.9
        c-10.1,10.8-17.9,17.2-20.5,16.4c-3.3-0.9,0-6.4,1.7-9.5l26-49.5l-13.3,2.1L396,301l-0.9,1.2c-4.9,6.5-10.8,12.6-16,17
        c4.2-13.4,3.3-32.7,11.5-51l-10-3.8c-5.5,8.4-17.5,27.8-29.6,43.8l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9
        c-2.9,0.5-4.6-1.3-1.5-7.1l19.2-36.7c5.8-11,0.3-17.5-7.2-16.3c-5.8,0.9-11.8,4.9-18.4,12.9l5-9.5l-13.3,2.1l-20.9,39.5l-0.9,1.1
        c-9.6,12.7-21.9,23.5-31.3,24.9c-8.2,1.3-13.1-3.1-6.9-14.8l1.3-2.5c8.6,2.2,24.7-2,34.7-20.9l1.9-3.6
        c7.2-13.4,0.3-21.6-10.6-19.8c-10.8,1.7-19.3,8.7-25,19.3L238.5,326l-0.8,1c-4.9,6.5-10.8,12.6-16,17c4.2-13.4,3.3-32.7,11.5-51
        l-10-3.8c-5.5,8.4-17.5,27.8-29.6,43.8l0,0l-0.9,1.2c-9.6,12.7-19,23-24.9,23.9c-2.9,0.5-4.6-1.3-1.5-7.1l19.2-36.7
        c5.8-11,0.3-17.5-7.2-16.3c-5.8,0.9-11.8,4.9-18.4,12.9l5-9.5l-13.3,2.1L130.7,343l-0.9,1.1c-6,7.5-13.4,11.9-20.1,13l12.6-23.6
        c8.1-15.2,0.6-27.3-11.9-25.3c-10.2,1.6-18.2,7-25.9,21.5L78,342.2L72.2,353c-0.3,0.5-0.5,1-0.7,1.5c-3.4,4.5-7.1,9-9.4,11.1
        c-3.8,3.5-18.2,11.7-28.7,8.5C-0.8,363.7,54.2,256.6,79.7,263c7.9,2,8.6,9.9,4.9,14.4c-0.9,1.1-2.2,1.8-3.4,2.4
        c-0.2,0.1-0.4,0.2-0.5,0.2l10.4,4.7c0.8-0.7,1.5-1.4,2.3-2.2c9-9.4,6.9-24-3.5-29.8c-38.7-21.5-96.2,81-85.4,119.6
        c3.3,11.7,15.7,24.6,34.8,19.1c14.2-4.1,23-12.5,28.6-20.1c2.6,13.9,24.2,12.4,37.7-6.9l2.9-0.5c4-0.6,9.1-2.7,14.2-5.7l-8,15.1
        l13.4-2.1l20.4-38.7c20.4-28.7,29.5-26.8,23.7-16l-17.3,32.8c-5.6,10.8-1.7,19.2,9.1,17.5c11-1.7,23.7-15.5,34.7-30.1l0,0
        c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4
        c1.3-0.2,2.4-0.5,3.7-0.8c0.1,0,0.3-0.2,0.4-0.2c9.6-2.8,19.1-10,27.4-18.7c0.4,8.5,7.2,13.6,18.1,11.9c8.4-1.3,16.8-6.3,24.5-13
        l-4.5,8.6l13.4-2.1l20.4-38.7c20.4-28.7,29.5-26.8,23.7-16.1l-17.3,32.8c-5.6,10.8-1.7,19.2,9.1,17.5c11-1.7,23.7-15.5,34.7-30.1
        l0,0c7.6-9.9,14.2-20.3,19-27.3c-5.3,14.7-2.4,39.1-15.1,41.1c-4.5,0.7-6.3-3.9-6.3-3.9l-8.3,5.7c0,0,2.4,10.4,14.6,8.4
        c1.3-0.2,2.4-0.5,3.7-0.8C363.7,335,363.9,334.9,364,334.9 M262.8,303.4c7.7-14.4,21.3-14.4,13.3,0.7l-1.9,3.6
        c-6.4,11.9-15,13-20,12L262.8,303.4z M102.3,348.4l-0.6,0.1c-4.4,0.7-7.8,4.8-7.8,9.2c0,1.7,0.5,3.1,1.3,4.3l-0.1,0.3
        c-6.3,11.8-21.5,12.1-13.6-3l10.1-19.1l6.4-11.9c9.4-17.4,22.2-13.1,14.1,2L102.3,348.4z"/>

  </clipPath>
</defs>
<g>

<polygon xmlns="http://www.w3.org/2000/svg" id="blue" fill="#3BBFED" points="230.5,98 230.5,224.4 345.4,161.2  "/>
<polygon xmlns="http://www.w3.org/2000/svg" id="orange" fill="#F7941D" points="214.4,64.7 214.4,191.1 329.3,127.9  "/>
<polygon xmlns="http://www.w3.org/2000/svg" id="pink" fill="#FF6FBE" points="252,64.7 252,191.1 366.9,127.9  "/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="2" y1="319.1667" x2="104.3333" y2="319.1667">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<polyline clip-path="url(#myClip)" class="st3" points="87,281.7 94.3,270.7 84.3,256 61,260.3 43.7,281.7 26.7,308 16,332.3 13.3,352 14.7,370.3 24,381.3 
44.3,383.3 62.3,370.3 " id="C"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="65.8333" y1="343.5" x2="126.1667" y2="343.5">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#000000"/>
</linearGradient>
<polygon clip-path="url(#myClip)" class="st3" points="78.7,351.3 73,363.7 75.8,373.3 84,376.7 94.3,370.3 102.3,357.3 112.7,341.3 119.7,326 119.7,315 
111.7,310.7 99,316 90.7,327 84.7,338 " id="o"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="85.8333" y1="310.6667" x2="514.8333" y2="310.6667">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#fff"/>
</linearGradient>
<polyline clip-path="url(#myClip)" class="st3" points="96.3,351.5 111.7,360.3 125.3,354.3 138,343.7 147,324 156.7,303.3 121.7,371 152,319.7 165,309 
176.3,303.3 183.7,303.3 179.3,317 170,331.3 160.3,349 156.7,359.3 163.7,363.3 177.3,356.3 190.3,343.7 202.7,326.7 217.3,305.7 
226,292 226,299.7 221,316.7 217.3,334.7 214.4,348 205.7,356 191.3,352 221,347.3 238.3,334 248,320 257.7,323.3 269,319.7 
280.7,305.7 284.7,292 278.3,286.3 266.7,288.7 260,296.3 249,314.3 240,341.7 244.7,350 256,347.3 273.7,339.3 288,328.6 
302,304.7 313.7,278 279,346.3 311.7,293 323.7,284 336.7,276 342,281.3 336.7,292.7 327.7,309 319,323.5 314.3,336 324.3,339.3 
342,327 356.7,305.3 373.3,281.7 385.7,266.7 379.7,286.7 376.3,304 373,322 366.9,330 357,332 348.3,326 378.7,323.3 400.3,306.7 
414,279.7 421.7,261.7 394,320 396.3,325.7 408.3,320 426.3,304 441.7,278.7 451.8,256 422.3,320 431.7,320 444.7,313.5 457.7,297 
477,271.7 492.7,250.3 488.3,269.3 483,298.3 478.3,310.7 467.7,314 457.3,309 490.3,302.7 505.3,286.3 " id="rest"/>
</svg>