javascript - SVG start animation transparent

Question

I've this animation in a SVG:

 <svg width="100vw" height="100%" viewBox="0 0 1656 535" fill="none" xmlns="http://www.w3.org/2000/svg">
    
    <defs>
        <linearGradient id="right-to-left">
          <stop offset="0" stop-color="#fff">
            <animate dur="1s" id="a1" attributeName="offset" fill="freeze" from="1" to="0" />
          </stop>
          <stop offset="0" stop-color="#7E348E">
            <animate dur="1s" id="a2" attributeName="offset" fill="freeze" from="1" to="0" />
          </stop>
        </linearGradient>
    
        <linearGradient id="right-to-left-yellow1">
          <stop offset="0" stop-color="#fff">
            <animate dur="1s" id="yellow1fff" attributeName="offset" fill="freeze" begin="a1.end" from="1" to="0" />
          </stop>
          <stop offset="0" stop-color="#FFCB26">
            <animate dur="1s" id="yellow1color" attributeName="offset" fill="freeze" begin="a2.end" from="1" to="0" />
          </stop>
        </linearGradient>
    
        <linearGradient id="right-to-left-yellow2">
          <stop offset="0" stop-color="#fff">
            <animate dur="1s" id="yellow2fff" attributeName="offset" fill="freeze" begin="yellow1fff.end" from="1" to="0" />
          </stop>
          <stop offset="0" stop-color="#FFCB26">
            <animate dur="1s" id="yellow2color" attributeName="offset" fill="freeze" begin="yellow1color.end" from="1" to="0" />
          </stop>
        </linearGradient>
    
        <linearGradient id="right-to-left-yellow3">
    
            <animate dur="3s" id="aaa" attributeName="offset" fill="freeze"  from="1" to="0" />
    
          <stop offset="0" stop-color="#fff">
            <animate dur="1s" id="yellow3-fff" attributeName="offset" fill="freeze" begin="yellow2fff.end" from="1" to="0" />
          </stop>
          <stop offset="0" stop-color="#FFCB26">
            <animate dur="1s" id="yellow3-color" attributeName="offset" fill="freeze" begin="yellow2color.end" from="1" to="0" />
          </stop>
        </linearGradient>
      </defs>
    
    
    <path fill="url(#right-to-left-yellow1)" d="M1174.13 115.342C1171.07 125.459 1160.38 146.822 1123.17 176.198C1055.93 229.295 982.882 245.133 862.653 232.713C854.621 231.878 846.764 230.996 838.434 230.075C808.439 226.718 777.418 223.242 733.777 221.549L732.253 260.397C774.47 262.03 804.766 265.415 834.07 268.703C842.476 269.652 850.417 270.533 858.621 271.378C919.853 277.705 968.814 276.982 1011.48 269.041C1015.06 268.375 1018.61 267.659 1022.11 266.894C1068.38 256.73 1108.15 237.595 1147.3 206.7C1182.03 179.267 1203.6 152.321 1211.39 126.582L1174.13 115.342Z" fill="transparent"/>
    <path fill="url(#right-to-left-yellow2)"   d="M737.196 221.69L737.138 221.686L737.068 221.685C715.442 220.824 696.156 220.529 676.335 220.702C656.401 220.881 635.79 222.048 615.097 224.303L615.07 224.308L614.917 224.322C609.513 224.918 606.147 234.187 607.324 244.841C608.501 255.495 613.837 263.653 619.241 263.057L621.209 262.845C621.335 262.836 621.777 262.782 621.9 262.759C640.445 260.819 658.823 259.729 676.64 259.577C694.923 259.422 712.805 259.695 732.63 260.454C733.557 260.493 734.598 260.54 735.467 260.576C740.904 260.764 745.821 252.309 746.202 241.59C746.608 230.854 742.619 221.881 737.196 221.69Z" fill="transparent"/>
    <path fill="url(#right-to-left-yellow3)"  d="M725.601 221.447L725.609 221.262C712.181 220.838 698.053 220.6 683.581 220.568C610.794 220.388 532.119 234.082 449.704 261.267C382.717 283.363 312.785 314.48 241.82 353.796C117.922 422.421 26.7055 496.077 1.69811 517.012L1.63993 517.08C-1.45324 520.367 1.36858 529.147 8.04045 537.112C14.9322 545.348 23.3812 549.565 26.9666 546.568C27.077 546.477 27.2283 546.378 27.3224 546.275C52.5196 525.22 140.829 454.181 260.688 387.79C329.528 349.661 397.222 319.511 461.891 298.185C540.324 272.32 614.864 259.282 683.464 259.451C697.145 259.489 710.518 259.698 723.221 260.101C723.519 260.187 723.824 260.229 724.138 260.241C728.821 260.33 732.802 251.71 733.011 240.981C733.228 230.746 729.948 222.318 725.601 221.447Z" fill="transparent"/>
    
    
    <path fill="url(#right-to-left)"  d="M1792.59 -59.4391C1785.44 -67.4271 1776.35 -70.9747 1772.3 -67.3546L1770.61 -65.8546C1770.52 -65.766 1770.44 -65.6527 1770.34 -65.5505C1734.2 -33.0963 1615.53 71.342 1484.91 163.74C1408.98 217.466 1342.22 257.679 1286.52 283.281C1222.6 312.658 1172.56 322.718 1141.85 312.378C1133.9 309.706 1109.72 301.568 1101.27 256.851C1089.69 195.617 1093.64 116.694 1142.91 95.7619C1157.22 89.6817 1169.32 92.5555 1173.44 98.3552C1178.98 106.164 1174.71 124.864 1152.75 149.074L1152.56 149.278C1152.54 149.311 1152.52 149.343 1152.49 149.376C1152.46 149.41 1152.42 149.445 1152.4 149.491L1152.4 149.505C1148.96 153.55 1152.24 162.527 1159.9 169.786C1167.69 177.162 1177.03 179.956 1180.78 176.011L1181.13 175.65L1181.16 175.672C1181.46 175.347 1181.74 175.013 1182.04 174.69L1182.33 174.381C1182.38 174.33 1182.41 174.281 1182.44 174.233C1198.27 156.559 1208.39 139.199 1212.49 122.621C1216.8 105.185 1214.22 88.579 1205.19 75.883C1189.52 53.8059 1157.66 47.2796 1127.69 60.0023C1081.47 79.6322 1040.21 143.554 1063.02 264.096C1068.82 294.691 1085.02 334.292 1129.42 349.231C1150.69 356.386 1175.96 357.233 1205.69 351.701C1233.92 346.447 1266.16 335.434 1302.79 318.605C1360.67 292.005 1429.52 250.584 1507.42 195.476C1642.08 100.206 1764.08 -7.56226 1798.26 -38.324L1798.22 -38.3735L1798.25 -38.3922C1802.28 -42.0235 1799.77 -51.4399 1792.59 -59.4391Z" fill="transparent"/>
    </svg>

question from:https://stackoverflow.com/questions/65926146/svg-start-animation-transparent

Answer 1

Waitting for answers