Combining, and animating multiple SVG's - Feeling Stuck-CodePudding

I am trying to combine and animate 15 SVG's (color gradients, and slight blob change). I've tried everything I know in CSS, as well as svgasm and snap.svg libraries.

The SVG's were made in Figma, and have tried messing around with @keyframes/basic CSS but the SVG's are scattered all over the viewport

Could anyone help me with this?

Thanks

<svg width="50%" height="50%" viewBox="0 0 2758 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="frame1" filter="url(#filter0_f_54_9)">
            <path
                d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1700.28 469.482 1743.74 496.34 1745.04 504.601C1815.77 521.541 2034.24 764.662 2162.27 1042.56C2304.15 1350.51 2755.05 1925.03 2193 2124Z"
                fill="url(#paint0_linear_54_9)" />
            <path
                d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1700.28 469.482 1743.74 496.34 1745.04 504.601C1815.77 521.541 2034.24 764.662 2162.27 1042.56C2304.15 1350.51 2755.05 1925.03 2193 2124Z"
                fill="url(#paint1_linear_54_9)" fill-opacity="0.32" />
        </g>
        <defs>
            <filter id="filter0_f_54_9" x="0.554688" y="0.743164" width="2757.32" height="2438.5"
                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                <feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_54_9" />
            </filter>
            <linearGradient id="paint0_linear_54_9" x1="661.172" y1="668.504" x2="-590.5" y2="1723"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FCA38E" />
                <stop offset="0.0386523" stop-color="#FFAB98" />
                <stop offset="0.0738017" stop-color="#FCB19F" />
                <stop offset="0.123069" stop-color="#FBA793" />
                <stop offset="0.167669" stop-color="#FBC4B7" />
                <stop offset="0.213138" stop-color="#DBB8C7" />
                <stop offset="0.257679" stop-color="#DBB8C7" />
                <stop offset="0.304105" stop-color="#DBB8C7" />
                <stop offset="0.373275" stop-color="#A9ADDA" />
                <stop offset="0.377431" stop-color="#6E8DFB" />
                <stop offset="0.380977" stop-color="#C4B1D0" />
                <stop offset="0.382591" stop-color="#A9ADDA" />
                <stop offset="0.4446" stop-color="#698FFB" />
                <stop offset="0.483419" stop-color="#86ACE5" />
                <stop offset="0.483519" stop-color="#8AB0E2" />
                <stop offset="0.578662" stop-color="#6993F9" />
                <stop offset="0.621066" stop-color="#6A8EFB" />
                <stop offset="0.664049" stop-color="#6A91FA" />
                <stop offset="0.707934" stop-color="#4FBDF1" />
                <stop offset="0.74911" stop-color="#72C8DE" />
                <stop offset="0.793838" stop-color="#76D6D6" />
                <stop offset="0.83966" stop-color="#77DDD3" />
                <stop offset="0.861422" stop-color="#77DCD3" />
                <stop offset="0.865799" stop-color="#77DCD3" />
            </linearGradient>
            <linearGradient id="paint1_linear_54_9" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FB0909" />
                <stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
            </linearGradient>
        </defs>
    </svg>
    <svg width="60%" height="60%" viewBox="0 0 2785 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="frame2" filter="url(#filter0_f_70_4)">
            <path
                d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1730.87 481.618 1752.98 503.044 1743.26 507.158C1821.47 539.785 2113.37 925.226 2243.5 1207.68C2385.37 1515.63 2755.05 1925.03 2193 2124Z"
                fill="url(#paint0_linear_70_4)" />
            <path
                d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1730.87 481.618 1752.98 503.044 1743.26 507.158C1821.47 539.785 2113.37 925.226 2243.5 1207.68C2385.37 1515.63 2755.05 1925.03 2193 2124Z"
                fill="url(#paint1_linear_70_4)" fill-opacity="0.32" />
        </g>
        <defs>
            <filter id="filter0_f_70_4" x="0.554688" y="0.743164" width="2783.89" height="2438.5"
                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                <feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_4" />
            </filter>
            <linearGradient id="paint0_linear_70_4" x1="661.172" y1="668.504" x2="-274" y2="1703.5"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FCA38E" />
                <stop offset="0.0386523" stop-color="#FFAB98" />
                <stop offset="0.0738017" stop-color="#FCB19F" />
                <stop offset="0.123069" stop-color="#FBA793" />
                <stop offset="0.167669" stop-color="#FBC4B7" />
                <stop offset="0.213138" stop-color="#DBB8C7" />
                <stop offset="0.257679" stop-color="#DBB8C7" />
                <stop offset="0.304105" stop-color="#DBB8C7" />
                <stop offset="0.373275" stop-color="#A9ADDA" />
                <stop offset="0.377431" stop-color="#6E8DFB" />
                <stop offset="0.380977" stop-color="#C4B1D0" />
                <stop offset="0.382591" stop-color="#A9ADDA" />
                <stop offset="0.4446" stop-color="#698FFB" />
                <stop offset="0.483419" stop-color="#86ACE5" />
                <stop offset="0.483519" stop-color="#8AB0E2" />
                <stop offset="0.578662" stop-color="#6993F9" />
                <stop offset="0.621066" stop-color="#6A8EFB" />
                <stop offset="0.664049" stop-color="#6A91FA" />
                <stop offset="0.707934" stop-color="#4FBDF1" />
                <stop offset="0.74911" stop-color="#72C8DE" />
                <stop offset="0.793838" stop-color="#76D6D6" />
                <stop offset="0.83966" stop-color="#77DDD3" />
                <stop offset="0.861422" stop-color="#77DCD3" />
                <stop offset="0.865799" stop-color="#77DCD3" />
                <stop offset="1" stop-color="#77DCD3" />
            </linearGradient>
            <linearGradient id="paint1_linear_70_4" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FB0909" />
                <stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
            </linearGradient>
        </defs>
    </svg>
    <svg width="60%" height="60%" viewBox="0 0 2561 2250" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="frame3" filter="url(#filter0_f_70_6)">
            <path
                d="M1999.54 1936.8C1969.6 2024.41 1589.21 1825.4 1522.1 1889.19C1454.99 1952.98 1194.31 1863.74 1105.29 1889.19C1016.27 1914.64 979.816 1868.55 889.132 1849.88C798.447 1831.2 673.521 1661.03 601.8 1602.47C530.078 1543.92 333.704 1419.9 297.259 1334.79C260.813 1249.68 385.378 1205.99 392.498 1113.68C399.619 1021.37 428.964 932.148 478.031 853.631C527.098 775.114 436.027 587.928 504.253 528.629L700.618 376.522L944.328 325.884C1003.11 287.107 1057.68 252.508 1370.29 376.522C1584.41 461.467 1604.27 480.713 1595.54 484.409C1665.8 513.717 1928.01 859.955 2044.9 1113.68C2172.34 1390.31 2504.42 1758.07 1999.54 1936.8Z"
                fill="url(#paint0_linear_70_6)" />
            <path
                d="M1999.54 1936.8C1969.6 2024.41 1589.21 1825.4 1522.1 1889.19C1454.99 1952.98 1194.31 1863.74 1105.29 1889.19C1016.27 1914.64 979.816 1868.55 889.132 1849.88C798.447 1831.2 673.521 1661.03 601.8 1602.47C530.078 1543.92 333.704 1419.9 297.259 1334.79C260.813 1249.68 385.378 1205.99 392.498 1113.68C399.619 1021.37 428.964 932.148 478.031 853.631C527.098 775.114 436.027 587.928 504.253 528.629L700.618 376.522L944.328 325.884C1003.11 287.107 1057.68 252.508 1370.29 376.522C1584.41 461.467 1604.27 480.713 1595.54 484.409C1665.8 513.717 1928.01 859.955 2044.9 1113.68C2172.34 1390.31 2504.42 1758.07 1999.54 1936.8Z"
                fill="url(#paint1_linear_70_6)" fill-opacity="0.32" />
        </g>
        <defs>
            <filter id="filter0_f_70_6" x="0.59375" y="0.00585938" width="2559.73" height="2249.47"
                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                <feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_6" />
            </filter>
            <linearGradient id="paint0_linear_70_6" x1="623.515" y1="629.344" x2="143" y2="1774"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FCA38E" />
                <stop offset="0.0386523" stop-color="#FFAB98" />
                <stop offset="0.0738017" stop-color="#FCB19F" />
                <stop offset="0.123069" stop-color="#FBA793" />
                <stop offset="0.167669" stop-color="#FBC4B7" />
                <stop offset="0.213138" stop-color="#DBB8C7" />
                <stop offset="0.257679" stop-color="#DBB8C7" />
                <stop offset="0.304105" stop-color="#DBB8C7" />
                <stop offset="0.373275" stop-color="#A9ADDA" />
                <stop offset="0.377431" stop-color="#6E8DFB" />
                <stop offset="0.380977" stop-color="#C4B1D0" />
                <stop offset="0.382591" stop-color="#A9ADDA" />
                <stop offset="0.4446" stop-color="#698FFB" />
                <stop offset="0.483419" stop-color="#86ACE5" />
                <stop offset="0.483519" stop-color="#8AB0E2" />
                <stop offset="0.578662" stop-color="#6993F9" />
                <stop offset="0.621066" stop-color="#6A8EFB" />
                <stop offset="0.664049" stop-color="#6A91FA" />
                <stop offset="0.707934" stop-color="#4FBDF1" />
                <stop offset="0.74911" stop-color="#72C8DE" />
                <stop offset="0.793838" stop-color="#76D6D6" />
                <stop offset="0.83966" stop-color="#77DDD3" />
                <stop offset="0.861422" stop-color="#77DCD3" />
                <stop offset="0.865799" stop-color="#77DCD3" />
                <stop offset="1" stop-color="#77DCD3" />
            </linearGradient>
            <linearGradient id="paint1_linear_70_6" x1="482.483" y1="553.994" x2="1803.99" y2="1626.71"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FB0909" />
                <stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
            </linearGradient>
        </defs>
    </svg>
    <svg width="60%" height="60%" viewBox="0 0 2492 2192" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="frame4" filter="url(#filter0_f_70_8)">
            <path
                d="M1940.59 1880.11C1911.7 1964.68 1544.5 1772.58 1479.72 1834.15C1414.94 1895.72 1163.32 1809.58 1077.38 1834.15C991.454 1858.72 956.264 1814.23 868.727 1796.2C781.19 1778.18 660.601 1613.91 591.369 1557.39C522.136 1500.87 332.579 1381.15 297.398 1298.99C262.218 1216.84 382.459 1174.67 389.332 1085.56C396.205 996.452 424.532 910.328 471.896 834.537C519.259 758.745 431.35 578.056 497.207 520.816L686.757 373.988L922.008 325.108C978.753 287.677 1031.43 254.279 1333.18 373.988C1539.87 455.984 1559.05 474.563 1550.62 478.131C1618.44 506.422 1871.54 840.641 1984.38 1085.56C2107.4 1352.59 2427.95 1707.58 1940.59 1880.11Z"
                fill="url(#paint0_linear_70_8)" />
            <path
                d="M1940.59 1880.11C1911.7 1964.68 1544.5 1772.58 1479.72 1834.15C1414.94 1895.72 1163.32 1809.58 1077.38 1834.15C991.454 1858.72 956.264 1814.23 868.727 1796.2C781.19 1778.18 660.601 1613.91 591.369 1557.39C522.136 1500.87 332.579 1381.15 297.398 1298.99C262.218 1216.84 382.459 1174.67 389.332 1085.56C396.205 996.452 424.532 910.328 471.896 834.537C519.259 758.745 431.35 578.056 497.207 520.816L686.757 373.988L922.008 325.108C978.753 287.677 1031.43 254.279 1333.18 373.988C1539.87 455.984 1559.05 474.563 1550.62 478.131C1618.44 506.422 1871.54 840.641 1984.38 1085.56C2107.4 1352.59 2427.95 1707.58 1940.59 1880.11Z"
                fill="url(#paint1_linear_70_8)" fill-opacity="0.32" />
        </g>
        <defs>
            <filter id="filter0_f_70_8" x="0.963867" y="0.475098" width="2491.02" height="2191.52"
                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                <feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_8" />
            </filter>
            <linearGradient id="paint0_linear_70_8" x1="612.33" y1="618.035" x2="148.494" y2="1722.96"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FCA38E" />
                <stop offset="0.0386523" stop-color="#FFAB98" />
                <stop offset="0.0738017" stop-color="#FCB19F" />
                <stop offset="0.123069" stop-color="#FBA793" />
                <stop offset="0.167669" stop-color="#FBC4B7" />
                <stop offset="0.213138" stop-color="#DBB8C7" />
                <stop offset="0.257679" stop-color="#DBB8C7" />
                <stop offset="0.304105" stop-color="#DBB8C7" />
                <stop offset="0.373275" stop-color="#A9ADDA" />
                <stop offset="0.377431" stop-color="#6E8DFB" />
                <stop offset="0.380977" stop-color="#C4B1D0" />
                <stop offset="0.382591" stop-color="#A9ADDA" />
                <stop offset="0.4446" stop-color="#698FFB" />
                <stop offset="0.483419" stop-color="#86ACE5" />
                <stop offset="0.483519" stop-color="#8AB0E2" />
                <stop offset="0.578662" stop-color="#6993F9" />
                <stop offset="0.621066" stop-color="#6A8EFB" />
                <stop offset="0.664049" stop-color="#6A91FA" />
                <stop offset="0.707934" stop-color="#4FBDF1" />
                <stop offset="0.74911" stop-color="#72C8DE" />
                <stop offset="0.793838" stop-color="#76D6D6" />
                <stop offset="0.83966" stop-color="#77DDD3" />
                <stop offset="0.861422" stop-color="#77DCD3" />
                <stop offset="0.865799" stop-color="#77DCD3" />
                <stop offset="1" stop-color="#77DCD3" />
            </linearGradient>
            <linearGradient id="paint1_linear_70_8" x1="476.194" y1="545.3" x2="1751.83" y2="1580.78"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FB0909" />
                <stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
            </linearGradient>
        </defs>
    </svg>
    <svg width="60%" height="60%" viewBox="0 0 2382 2099" fill="none" xmlns="http://www.w3.org/2000/svg">
        <g id="frame5" filter="url(#filter0_f_70_10)">
            <path
                d="M1845.42 1788.09C1818.19 1867.79 1472.19 1686.77 1411.14 1744.79C1350.1 1802.81 1112.99 1721.64 1032.02 1744.79C951.049 1767.94 917.89 1726.02 835.404 1709.03C752.918 1692.04 639.286 1537.25 574.049 1483.99C508.811 1430.73 330.191 1317.93 297.041 1240.51C263.89 1163.09 377.193 1123.36 383.67 1039.39C390.147 955.426 416.839 874.271 461.47 802.853C506.1 731.435 423.263 561.172 485.321 507.234L663.933 368.878L885.61 322.818C939.081 287.547 988.716 256.077 1273.06 368.878C1467.82 446.143 1485.89 463.65 1477.95 467.012C1541.85 493.67 1780.36 808.605 1886.68 1039.39C2002.6 1291.01 2304.66 1625.52 1845.42 1788.09Z"
                fill="url(#paint0_linear_70_10)" />
            <path
                d="M1845.42 1788.09C1818.19 1867.79 1472.19 1686.77 1411.14 1744.79C1350.1 1802.81 1112.99 1721.64 1032.02 1744.79C951.049 1767.94 917.89 1726.02 835.404 1709.03C752.918 1692.04 639.286 1537.25 574.049 1483.99C508.811 1430.73 330.191 1317.93 297.041 1240.51C263.89 1163.09 377.193 1123.36 383.67 1039.39C390.147 955.426 416.839 874.271 461.47 802.853C506.1 731.435 423.263 561.172 485.321 507.234L663.933 368.878L885.61 322.818C939.081 287.547 988.716 256.077 1273.06 368.878C1467.82 446.143 1485.89 463.65 1477.95 467.012C1541.85 493.67 1780.36 808.605 1886.68 1039.39C2002.6 1291.01 2304.66 1625.52 1845.42 1788.09Z"
                fill="url(#paint1_linear_70_10)" fill-opacity="0.32" />
        </g>
        <defs>
            <filter id="filter0_f_70_10" x="0.978516" y="0.184082" width="2380.75" height="2098.54"
                filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                <feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_10" />
            </filter>
            <linearGradient id="paint0_linear_70_10" x1="593.801" y1="598.843" x2="156.728" y2="1640.01"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FCA38E" />
                <stop offset="0.0386523" stop-color="#FFAB98" />
                <stop offset="0.0738017" stop-color="#FCB19F" />
                <stop offset="0.123069" stop-color="#FBA793" />
                <stop offset="0.167669" stop-color="#FBC4B7" />
                <stop offset="0.213138" stop-color="#DBB8C7" />
                <stop offset="0.257679" stop-color="#DBB8C7" />
                <stop offset="0.304105" stop-color="#DBB8C7" />
                <stop offset="0.373275" stop-color="#A9ADDA" />
                <stop offset="0.377431" stop-color="#6E8DFB" />
                <stop offset="0.380977" stop-color="#C4B1D0" />
                <stop offset="0.382591" stop-color="#A9ADDA" />
                <stop offset="0.4446" stop-color="#698FFB" />
                <stop offset="0.483419" stop-color="#86ACE5" />
                <stop offset="0.483519" stop-color="#8AB0E2" />
                <stop offset="0.578662" stop-color="#6993F9" />
                <stop offset="0.621066" stop-color="#6A8EFB" />
                <stop offset="0.664049" stop-color="#6A91FA" />
                <stop offset="0.707934" stop-color="#4FBDF1" />
                <stop offset="0.74911" stop-color="#72C8DE" />
                <stop offset="0.793838" stop-color="#76D6D6" />
                <stop offset="0.83966" stop-color="#77DDD3" />
                <stop offset="0.861422" stop-color="#77DCD3" />
                <stop offset="0.865799" stop-color="#77DCD3" />
                <stop offset="1" stop-color="#77DCD3" />
            </linearGradient>
            <linearGradient id="paint1_linear_70_10" x1="465.52" y1="530.306" x2="1667.55" y2="1506.04"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FB0909" />
                <stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
            </linearGradient>
        </defs>
    </svg>

CodePudding user response：

With Snap, we can select and manipulate existing elements using css selectors, eg

var element = Snap('<some css selector>');

So, we can do something like the following, using an animate callback if we want animations in sequence, or run several together.

var s = Snap("#svg");

animateFrame1();

function animateFrame1 () {
    var g = Snap("#frame1").animate({ 'transform': 'r180'}, 1000, mina.linear, animateFrame2)
}

function animateFrame2 () {
    var g = Snap("#frame2").animate({ 'transform': 'r180'}, 1000, mina.linear, )
}

Example jsfiddle

There is also a Snap plugin here which could help a little if you need to combine a lot (look at the el.animateFrames method).