Как создать анимацию галочки как в телеграмме при очистке кэша?
Можно ли пример создания такой анимации, чтобы была градиентовая галочка и от неё звёзды исходили? Ну или подскажите как достать её исходники, если это gif.
Искал похожее, но так и не нашел
Ответы (1 шт):
Автор решения: De.Minov
→ Ссылка
Вряд ли эту анимацию можно вытащить из кода ТГ.
Я попробовал воссоздать эту анимацию на SVG, получилось много кода, но результат похож на версию анимацию с версии для iPhone.
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background-color: #000;
overflow: hidden auto;
margin: 0;
}
svg {
height: 75vh;
}<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500">
<defs>
<linearGradient id="gradient-green" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#6ed355"/>
<stop offset="100%" stop-color="#42b970"/>
</linearGradient>
<symbol id="star" width="20" height="20" viewBox="0 0 20 20">
<path d="M 0 10 C 6 10 10 6 10 0 C 10 6 14 10 20 10 C 14 10 10 14 10 20 C 10 14 6 10 0 10" fill="#6ed355"/>
</symbol>
</defs>
<path d="M 125 250 A 1 1 0 0 0 375 250 A 1 1 0 0 0 125 250 M 207.75 253.75 L 236.36 282.36 L 298.86 219.86" fill="none" stroke-width="10" stroke="url(#gradient-green)" stroke-linecap="round" stroke-linejoin="round"/>
<use x="353.59799550795424" y="321.8260069695132" href="#star" opacity="0" transform-origin="353.59799550795424 321.8260069695132">
<animate id="aX-24" attributeName="x" values="353.59799550795424;411.3901677079871" dur="2s" fill="freeze" repeatCount="indefinite" begin="8.79s;aX-24.end+1.06s"/>
<animate id="aY-24" attributeName="y" values="321.8260069695132;363.4544059925582" dur="2s" fill="freeze" repeatCount="indefinite" begin="8.79s;aY-24.end+1.06s"/>
<animate id="aO-24" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="8.79s;aO-24.end+1.06s"/>
<animateTransform id="aS-24" attributeName="transform" attributeType="XML" type="scale" from="0.31" to="1.29" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="8.79s;aS-24.end+1.06s"/>
</use>
<use x="155.07121914860898" y="351.2973592817745" href="#star" opacity="0" transform-origin="155.07121914860898 351.2973592817745">
<animate id="aX-23" attributeName="x" values="155.07121914860898;106.77213908285233" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aX-23.end+5.11s"/>
<animate id="aY-23" attributeName="y" values="351.2973592817745;414.59227548296076" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aY-23.end+5.11s"/>
<animate id="aO-23" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aO-23.end+5.11s"/>
<animateTransform id="aS-23" attributeName="transform" attributeType="XML" type="scale" from="1.24" to="0.42" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="7.02s;aS-23.end+5.11s"/>
</use>
<use x="351.8265296141065" y="324.2307976601513" href="#star" opacity="0" transform-origin="351.8265296141065 324.2307976601513">
<animate id="aX-22" attributeName="x" values="351.8265296141065;404.32824659437733" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aX-22.end+4.56s"/>
<animate id="aY-22" attributeName="y" values="324.2307976601513;363.77652544975695" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aY-22.end+4.56s"/>
<animate id="aO-22" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.02s;aO-22.end+4.56s"/>
<animateTransform id="aS-22" attributeName="transform" attributeType="XML" type="scale" from="1.32" to="0.66" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="7.02s;aS-22.end+4.56s"/>
</use>
<use x="347.74093980613713" y="329.39737070904454" href="#star" opacity="0" transform-origin="347.74093980613713 329.39737070904454">
<animate id="aX-21" attributeName="x" values="347.74093980613713;417.74657265671385" dur="2s" fill="freeze" repeatCount="indefinite" begin="4.4s;aX-21.end+9.92s"/>
<animate id="aY-21" attributeName="y" values="329.39737070904454;387.4841065675319" dur="2s" fill="freeze" repeatCount="indefinite" begin="4.4s;aY-21.end+9.92s"/>
<animate id="aO-21" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="4.4s;aO-21.end+9.92s"/>
<animateTransform id="aS-21" attributeName="transform" attributeType="XML" type="scale" from="1.09" to="0.48" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="4.4s;aS-21.end+9.92s"/>
</use>
<use x="365.53340489457935" y="178.02125964837944" href="#star" opacity="0" transform-origin="365.53340489457935 178.02125964837944">
<animate id="aX-20" attributeName="x" values="365.53340489457935;445.4098059204784" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.28s;aX-20.end+10.35s"/>
<animate id="aY-20" attributeName="y" values="178.02125964837944;138.5844362501487" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.28s;aY-20.end+10.35s"/>
<animate id="aO-20" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.28s;aO-20.end+10.35s"/>
<animateTransform id="aS-20" attributeName="transform" attributeType="XML" type="scale" from="0.57" to="0.15" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="1.28s;aS-20.end+10.35s"/>
</use>
<use x="201.30275836485148" y="105.45438138002811" href="#star" opacity="0" transform-origin="201.30275836485148 105.45438138002811">
<animate id="aX-19" attributeName="x" values="201.30275836485148;175.27963516331664" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.62s;aX-19.end+1.03s"/>
<animate id="aY-19" attributeName="y" values="105.45438138002811;14.975136306548734" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.62s;aY-19.end+1.03s"/>
<animate id="aO-19" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.62s;aO-19.end+1.03s"/>
<animateTransform id="aS-19" attributeName="transform" attributeType="XML" type="scale" from="0.61" to="0.63" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="7.62s;aS-19.end+1.03s"/>
</use>
<use x="111.28952183024401" y="184.92175738721534" href="#star" opacity="0" transform-origin="111.28952183024401 184.92175738721534">
<animate id="aX-18" attributeName="x" values="111.28952183024401;40.87631843984644" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.45s;aX-18.end+6.05s"/>
<animate id="aY-18" attributeName="y" values="184.92175738721534;154.79029058958076" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.45s;aY-18.end+6.05s"/>
<animate id="aO-18" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.45s;aO-18.end+6.05s"/>
<animateTransform id="aS-18" attributeName="transform" attributeType="XML" type="scale" from="1.15" to="0.04" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="6.45s;aS-18.end+6.05s"/>
</use>
<use x="284.4870443688153" y="372.7437489425663" href="#star" opacity="0" transform-origin="284.4870443688153 372.7437489425663">
<animate id="aX-17" attributeName="x" values="284.4870443688153;299.10004495658103" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.47s;aX-17.end+6.31s"/>
<animate id="aY-17" attributeName="y" values="372.7437489425663;416.3471060286961" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.47s;aY-17.end+6.31s"/>
<animate id="aO-17" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.47s;aO-17.end+6.31s"/>
<animateTransform id="aS-17" attributeName="transform" attributeType="XML" type="scale" from="0.65" to="0.53" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="3.47s;aS-17.end+6.31s"/>
</use>
<use x="337.6982257520658" y="139.72509444084034" href="#star" opacity="0" transform-origin="337.6982257520658 139.72509444084034">
<animate id="aX-16" attributeName="x" values="337.6982257520658;403.30186785951093" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.5s;aX-16.end+1.88s"/>
<animate id="aY-16" attributeName="y" values="139.72509444084034;72.3912307394121" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.5s;aY-16.end+1.88s"/>
<animate id="aO-16" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.5s;aO-16.end+1.88s"/>
<animateTransform id="aS-16" attributeName="transform" attributeType="XML" type="scale" from="0.36" to="0.31" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="6.5s;aS-16.end+1.88s"/>
</use>
<use x="109.6396841394236" y="188.9491621152918" href="#star" opacity="0" transform-origin="109.6396841394236 188.9491621152918">
<animate id="aX-15" attributeName="x" values="109.6396841394236;17.820619654955294" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.11s;aX-15.end+5.38s"/>
<animate id="aY-15" attributeName="y" values="188.9491621152918;152.99159216942354" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.11s;aY-15.end+5.38s"/>
<animate id="aO-15" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.11s;aO-15.end+5.38s"/>
<animateTransform id="aS-15" attributeName="transform" attributeType="XML" type="scale" from="1.14" to="0.7" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="0.11s;aS-15.end+5.38s"/>
</use>
<use x="379.8632350065336" y="233.8132808769794" href="#star" opacity="0" transform-origin="379.8632350065336 233.8132808769794">
<animate id="aX-14" attributeName="x" values="379.8632350065336;454.1226029049236" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.66s;aX-14.end+6.74s"/>
<animate id="aY-14" attributeName="y" values="233.8132808769794;230.5284873326364" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.66s;aY-14.end+6.74s"/>
<animate id="aO-14" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.66s;aO-14.end+6.74s"/>
<animateTransform id="aS-14" attributeName="transform" attributeType="XML" type="scale" from="0.77" to="1.47" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="6.66s;aS-14.end+6.74s"/>
</use>
<use x="191.99693684307778" y="371.5131397524693" href="#star" opacity="0" transform-origin="191.99693684307778 371.5131397524693">
<animate id="aX-13" attributeName="x" values="191.99693684307778;158.23376540428364" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.23s;aX-13.end+7.96s"/>
<animate id="aY-13" attributeName="y" values="371.5131397524693;464.0135010190275" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.23s;aY-13.end+7.96s"/>
<animate id="aO-13" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.23s;aO-13.end+7.96s"/>
<animateTransform id="aS-13" attributeName="transform" attributeType="XML" type="scale" from="1.13" to="1.26" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="0.23s;aS-13.end+7.96s"/>
</use>
<use x="111.20624907884957" y="185.11676281722572" href="#star" opacity="0" transform-origin="111.20624907884957 185.11676281722572">
<animate id="aX-12" attributeName="x" values="111.20624907884957;71.677157514221" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.63s;aX-12.end+1.24s"/>
<animate id="aY-12" attributeName="y" values="185.11676281722572;168.2721217345283" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.63s;aY-12.end+1.24s"/>
<animate id="aO-12" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.63s;aO-12.end+1.24s"/>
<animateTransform id="aS-12" attributeName="transform" attributeType="XML" type="scale" from="0.65" to="0.15" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="0.63s;aS-12.end+1.24s"/>
</use>
<use x="372.0815848335335" y="193.58389344352452" href="#star" opacity="0" transform-origin="372.0815848335335 193.58389344352452">
<animate id="aX-11" attributeName="x" values="372.0815848335335;458.89336171154093" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.7s;aX-11.end+8.98s"/>
<animate id="aY-11" attributeName="y" values="193.58389344352452;163.07650143270766" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.7s;aY-11.end+8.98s"/>
<animate id="aO-11" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="6.7s;aO-11.end+8.98s"/>
<animateTransform id="aS-11" attributeName="transform" attributeType="XML" type="scale" from="0.94" to="0.86" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="6.7s;aS-11.end+8.98s"/>
</use>
<use x="376.84725055804444" y="210.45630329996249" href="#star" opacity="0" transform-origin="376.84725055804444 210.45630329996249">
<animate id="aX-10" attributeName="x" values="376.84725055804444;450.25692182661464" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.84s;aX-10.end+6.76s"/>
<animate id="aY-10" attributeName="y" values="210.45630329996249;194.60802681677373" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.84s;aY-10.end+6.76s"/>
<animate id="aO-10" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.84s;aO-10.end+6.76s"/>
<animateTransform id="aS-10" attributeName="transform" attributeType="XML" type="scale" from="0.1" to="0.39" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="9.84s;aS-10.end+6.76s"/>
</use>
<use x="211.96021644828028" y="102.83670119754078" href="#star" opacity="0" transform-origin="211.96021644828028 102.83670119754078">
<animate id="aX-9" attributeName="x" values="211.96021644828028;193.6905172241775" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.82s;aX-9.end+5.9s"/>
<animate id="aY-9" attributeName="y" values="102.83670119754078;13.466103557782276" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.82s;aY-9.end+5.9s"/>
<animate id="aO-9" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.82s;aO-9.end+5.9s"/>
<animateTransform id="aS-9" attributeName="transform" attributeType="XML" type="scale" from="1.4" to="1.25" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="3.82s;aS-9.end+5.9s"/>
</use>
<use x="289.212543726307" y="108.93465164283" href="#star" opacity="0" transform-origin="289.212543726307 108.93465164283">
<animate id="aX-8" attributeName="x" values="289.212543726307;312.13098032077545" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.45s;aX-8.end+4.9s"/>
<animate id="aY-8" attributeName="y" values="108.93465164283;47.897106159278565" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.45s;aY-8.end+4.9s"/>
<animate id="aO-8" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.45s;aO-8.end+4.9s"/>
<animateTransform id="aS-8" attributeName="transform" attributeType="XML" type="scale" from="0.24" to="0.82" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="5.45s;aS-8.end+4.9s"/>
</use>
<use x="376.91524751128316" y="210.77304328322785" href="#star" opacity="0" transform-origin="376.91524751128316 210.77304328322785">
<animate id="aX-7" attributeName="x" values="376.91524751128316;425.3562419509051" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.83s;aX-7.end+4.56s"/>
<animate id="aY-7" attributeName="y" values="210.77304328322785;200.43246490690376" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.83s;aY-7.end+4.56s"/>
<animate id="aO-7" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="7.83s;aO-7.end+4.56s"/>
<animateTransform id="aS-7" attributeName="transform" attributeType="XML" type="scale" from="0.11" to="0.72" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="7.83s;aS-7.end+4.56s"/>
</use>
<use x="116.43847092128664" y="305.82209759442696" href="#star" opacity="0" transform-origin="116.43847092128664 305.82209759442696">
<animate id="aX-6" attributeName="x" values="116.43847092128664;34.469509281875986" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.44s;aX-6.end+4.28s"/>
<animate id="aY-6" attributeName="y" values="305.82209759442696;349.4875413047106" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.44s;aY-6.end+4.28s"/>
<animate id="aO-6" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.44s;aO-6.end+4.28s"/>
<animateTransform id="aS-6" attributeName="transform" attributeType="XML" type="scale" from="0.9" to="1.12" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="1.44s;aS-6.end+4.28s"/>
</use>
<use x="225.79036324429285" y="379.27701254432066" href="#star" opacity="0" transform-origin="225.79036324429285 379.27701254432066">
<animate id="aX-5" attributeName="x" values="225.79036324429285;219.27544268257031" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.04s;aX-5.end+9.09s"/>
<animate id="aY-5" attributeName="y" values="379.27701254432066;443.1335831519997" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.04s;aY-5.end+9.09s"/>
<animate id="aO-5" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.04s;aO-5.end+9.09s"/>
<animateTransform id="aS-5" attributeName="transform" attributeType="XML" type="scale" from="0.09" to="1.19" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="3.04s;aS-5.end+9.09s"/>
</use>
<use x="159.12728115755897" y="125.72137843397182" href="#star" opacity="0" transform-origin="159.12728115755897 125.72137843397182">
<animate id="aX-4" attributeName="x" values="159.12728115755897;118.2712778099066" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.72s;aX-4.end+7.91s"/>
<animate id="aY-4" attributeName="y" values="125.72137843397182;67.98908240021308" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.72s;aY-4.end+7.91s"/>
<animate id="aO-4" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="3.72s;aO-4.end+7.91s"/>
<animateTransform id="aS-4" attributeName="transform" attributeType="XML" type="scale" from="0.61" to="0.99" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="3.72s;aS-4.end+7.91s"/>
</use>
<use x="371.3704133797256" y="288.3922978214511" href="#star" opacity="0" transform-origin="371.3704133797256 288.3922978214511">
<animate id="aX-3" attributeName="x" values="371.3704133797256;432.5343845382939" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.46s;aX-3.end+2.61s"/>
<animate id="aY-3" attributeName="y" values="288.3922978214511;310.92298058403486" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.46s;aY-3.end+2.61s"/>
<animate id="aO-3" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="1.46s;aO-3.end+2.61s"/>
<animateTransform id="aS-3" attributeName="transform" attributeType="XML" type="scale" from="0.89" to="0.95" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="1.46s;aS-3.end+2.61s"/>
</use>
<use x="367.3788447788599" y="298.09156481627184" href="#star" opacity="0" transform-origin="367.3788447788599 298.09156481627184">
<animate id="aX-2" attributeName="x" values="367.3788447788599;438.8071784385854" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.38s;aX-2.end+8.44s"/>
<animate id="aY-2" attributeName="y" values="298.09156481627184;330.66670460275606" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.38s;aY-2.end+8.44s"/>
<animate id="aO-2" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="9.38s;aO-2.end+8.44s"/>
<animateTransform id="aS-2" attributeName="transform" attributeType="XML" type="scale" from="1.18" to="1.24" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="9.38s;aS-2.end+8.44s"/>
</use>
<use x="158.05932023807566" y="353.5153073384985" href="#star" opacity="0" transform-origin="158.05932023807566 353.5153073384985">
<animate id="aX-1" attributeName="x" values="158.05932023807566;133.3670972450659" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.13s;aX-1.end+2.94s"/>
<animate id="aY-1" attributeName="y" values="353.5153073384985;387.7223128218078" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.13s;aY-1.end+2.94s"/>
<animate id="aO-1" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="5.13s;aO-1.end+2.94s"/>
<animateTransform id="aS-1" attributeName="transform" attributeType="XML" type="scale" from="1.21" to="0.63" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="5.13s;aS-1.end+2.94s"/>
</use>
<use x="100.029905260108" y="237.10645917504965" href="#star" opacity="0" transform-origin="100.029905260108 237.10645917504965">
<animate id="aX-0" attributeName="x" values="100.029905260108;50.10348799355205" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.45s;aX-0.end+3.55s"/>
<animate id="aY-0" attributeName="y" values="237.10645917504965;236.07435208908427" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.45s;aY-0.end+3.55s"/>
<animate id="aO-0" attributeName="opacity" values="0;1;0" dur="2s" fill="freeze" repeatCount="indefinite" begin="0.45s;aO-0.end+3.55s"/>
<animateTransform id="aS-0" attributeName="transform" attributeType="XML" type="scale" from="0" to="0.01" dur="2s" additive="sum" calcMode="paced" fill="freeze" repeatCount="indefinite" begin="0.45s;aS-0.end+3.55s"/>
</use>
</svg>Это уже скомпилированная версия анимации, которая собиралась при помощи Pug препроцессора, исходники которого можно глянуть в моём кодепене и при желание что-то переделать.