svg 简单的动画

 1. 绘制小球，并沿轨迹进行运动。

    <!-- 小球的轨迹 -->
        <path d="M509.204 280.033C509.204 280.033 450.704 238.033 344.704 266.033C238.704 294.033 204.532 340.185 203.134 352.143" stroke="#FF4D1C" stroke-linecap="round" stroke-linejoin="round"/>
        <!-- 画一个圆心,cx:表示圆的x轴的坐标,cy表示圆的y轴的坐标,fill:相当于background 表示圆填充的颜色,fill-opacity 表示填充的颜色的透明度 -->
        <!-- repeatCount="indefinite" 表示进行无限的循环
        begin="0s" 动画开始时间
        dur="2s" 动画持续时间
        fill="freeze"  动画结束后保持的状态,freeze表示保持动画结束的状态
        begin="0s"
        path="M509.204 280.033C509.204 280.033 450.704 238.033 344.704 266.033C238.704 294.033 204.532 340.185 203.134 352.143" 小球运动的路径 -->
        <circle cx="0" cy="0" r="3" fill="red" fill-opacity="1">
            <animateMotion
                repeatCount="indefinite"
                begin="0s"
                dur="2s"
                fill="freeze"
                begin="0s"
                path="M509.204 280.033C509.204 280.033 450.704 238.033 344.704 266.033C238.704 294.033 204.532 340.185 203.134 352.143"
            ></animateMotion>
        </circle>

2. 背景缩放，并更改缩放时的颜色

      <!-- 椭圆 -->
            <ellipse cx="508.134" cy="281.289" rx="22" ry="13.353" fill="#FF4D1C" fill-opacity="0.3">
                <!-- attributeName: 需要动画的属性名称
                attributeName="rx" 通过控制rx属性，可以使方框变圆，再变回方框 可以使 动画由 竖直方向向 水平方向 放大
                attributeName="fill" 表示仅仅是填充的颜色变化
                attributeName="ry" 可以使 动画由 水平方向向 竖直方向 放大
                -->
                <!-- 不同的动画可以组合使用 -->
                <animate
                    attributeName="fill" 
                    from="green"
                    to="red"
                    dur="2s"
                    repeatCount="indefinite"
                >
                </animate>
                <animate
                    attributeName="rx"
                    from="0"
                    to="20.2"
                    dur="1s"
                    repeatCount="indefinite"
                 />
                <animate
                    attributeName="ry"
                    from="0"
                    to="14.3"
                    dur="1s"
                    repeatCount="indefinite"
                />
            </ellipse>

3. 改变背景颜色

 <path d="M604.38 125.175C604.38 129.191 601.133 132.445 597.13 132.445C593.126 132.445 589.88 129.191 589.88 125.175C589.88 121.159 593.126 117.905 597.13 117.905C601.133 117.905 604.38 121.159 604.38 125.175Z" fill="url(#paint190_linear_1963_1661)" stroke="#B4FFF5" stroke-width="0.5">
            <!-- 圆圈的颜色变化 -->
            <animate 
                attributeName="fill"
                from="green"
                to="red"
                repeatCount="indefinite"
                dur="1s"
             >
            </animate>
        </path>

4. 圆球扩散

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="#FF744C" fill-opacity="0.2"/>
<circle cx="49.9996" cy="50" r="38.4615" fill="#FF744C" fill-opacity="0.3">
<animate attributeName="r" begin="0" from="38" to="50" dur="2s" repeatCount="indefinite"></animate>

</circle>
<circle cx="50" cy="50" r="25" fill="#FF744C" fill-opacity="0.5">
<animate attributeName="r" begin="0" from="25" to="38" dur="2s" repeatCount="indefinite"></animate>

</circle>
<circle cx="50.0004" cy="50" r="11.5385" fill="#FF744C">
<animate attributeName="r" begin="0" from="3" to="25" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>

水平移动动画：

<path d="M542.5 156C540.367 154.502 539.349 153.585 536.387 151.333C510.533 131.682 513.525 74.2329 491.118 72.9534C490.617 72.9248 490.095 72.9584 489.609 73.0803C477.895 76.0168 473.748 105.321 462.228 122.146C457.73 128.715 448.516 128.275 444.555 121.369C427.774 92.1124 432.387 26.4824 408.525 5.25474C403.497 0.782538 395.712 0.813144 391.061 5.6761C371.77 25.8497 373.279 85.4744 354.727 111.416C349.025 119.389 336.136 121.518 332.304 112.496C328.159 102.736 329.727 87.1043 322.355 76.5176C317.02 68.8552 305.037 67.6112 298.956 74.697C284.849 91.1366 294.464 131.125 266.54 151.333C261.911 154.684 256.214 158.316 251 161.494" stroke="url(#paint12_linear_2623_2)" stroke-linecap="round">
<animateTransform attributeName="transform" 
type="translate" values="20;-20;0" begin="0s" dur="3s" 
repeatCount="indefinite" />
</path>

圆球旋转

<circle cx="94.9993" cy="95" r="56.3088" fill="#00365C" stroke="#FF744C" stroke-width="4" stroke-dasharray="8 2">
<animateTransform attributeName="transform" type="rotate" 
from="0 94.9993 95" to="360 94.9993 95"
begin="0s" dur="5s" 
repeatCount="indefinite" 
 />
</circle>

颜色渐变

 

 

 

  <defs>
                            <radialGradient id="color2" cx="20%" cy="40%" r="50%" fx="50%" fy="50%">
                                <stop offset="0" stop-color="#d74344">
                                    <animate attributeName='stop-color' values='#ed9438; green' dur='4s' fill='freeze'
                                        repeatCount='indefinite' />
                                </stop>
                                <stop offset="0.5" stop-color="#ed9438">
                                    <animate attributeName='stop-color' values='#bfd5ec; #fc5531' dur='4s' fill='freeze'
                                        repeatCount='indefinite' />
                                </stop>
                                <stop offset="1" stop-color="#bfd5ec">

                                    <animate attributeName='stop-color' values='blue; #d74344' dur='4s' fill='freeze'
                                        repeatCount='indefinite' />
                                </stop>

                                <!-- <animate attributeName='r' dur='5s' from='100%' to='0%' repeatCount='indefinite' /> -->
                            </radialGradient>
                        </defs>
                        <path
                            d="M225.446 61.8392L229.378 64.0709C231.243 63.6311 233.338 62.9849 235.663 62.1324L236.38 62.8546C234.314 63.6148 232.343 64.2229 230.459 64.6845L232.286 65.7216L231.31 66.2755L224.47 62.3931L225.446 61.8392ZM231.071 60.0582C230.44 60.851 229.617 61.698 228.613 62.6157L227.417 62.2193C228.364 61.3994 229.206 60.574 229.923 59.7324L231.071 60.0582ZM233.597 60.6989C232.87 61.4808 231.97 62.3279 230.88 63.2401L229.694 62.8383C230.708 62.0238 231.636 61.2039 232.449 60.3731L233.597 60.6989ZM236.17 59.3143C236.046 59.5478 235.883 59.803 235.682 60.069L239.107 62.013L238.141 62.5614L231.167 58.603L229.215 59.7107C227.063 60.8998 225.054 61.6926 223.198 62.0944L223.102 61.1822C224.623 60.8618 226.326 60.1776 228.201 59.1351L231.119 57.479L234.572 59.4392C234.697 59.2165 234.792 58.9993 234.859 58.7876L236.17 59.3143ZM239.116 65.07L237.739 65.8519L239.844 67.0465L241.221 66.2646L239.116 65.07ZM236.773 66.3461C235.462 66.9488 234.113 67.3126 232.745 67.4266L232.669 66.6013C234.037 66.4655 235.347 66.0474 236.61 65.3524L241.345 62.6646L248.759 66.8728L241.537 70.9724C240.8 71.3905 240.044 71.385 239.289 70.9561L238.189 70.3316L238.896 69.6257C239.241 69.8647 239.566 70.071 239.891 70.2556C240.178 70.4185 240.523 70.3968 240.886 70.1905L242.216 69.4357L239.939 68.1434L237.241 69.6746L236.227 69.099L238.925 67.5678L236.773 66.3461ZM243.134 68.9144L244.512 68.1325L242.235 66.8402L240.858 67.6221L243.134 68.9144ZM245.43 67.6112L246.77 66.851L244.493 65.5587L243.153 66.3189L245.43 67.6112ZM243.479 64.9831L241.374 63.7886L240.035 64.5487L242.139 65.7433L243.479 64.9831ZM247.745 73.4864C247.879 73.1498 248.004 72.8185 248.118 72.4927C246.961 72.7914 245.861 72.9923 244.818 73.0955L244.971 72.2918C246.081 72.1615 247.229 71.9226 248.396 71.5859C248.53 71.0755 248.635 70.5597 248.721 70.0547L242.981 73.3127L241.996 72.7534L250.548 67.899L258.412 72.3624L250.931 76.6086C250.261 76.9887 249.592 76.9887 248.932 76.6141L247.975 76.0711L248.692 75.3815L249.525 75.9082C249.745 76.0331 249.965 76.0385 250.175 75.919L251.256 75.3055L250.013 75.3055C250.204 74.9145 250.386 74.529 250.539 74.138C249.353 74.4204 248.233 74.5996 247.162 74.6864L247.315 73.8828C248.482 73.7634 249.668 73.5462 250.893 73.2204C251.074 72.6828 251.218 72.1452 251.342 71.6077L252.548 71.6185C252.5 71.9606 252.423 72.3516 252.289 72.7968C253.074 72.5362 253.868 72.2375 254.671 71.9009L255.446 72.5253C254.251 73.0195 253.083 73.4321 251.974 73.7579C251.811 74.2195 251.61 74.7136 251.381 75.2349L256.47 72.3461L250.577 69.0013L248.826 69.995L249.936 70.0058C249.917 70.3425 249.86 70.7226 249.764 71.1461C250.472 70.8963 251.199 70.614 251.916 70.3045L252.672 70.9181C251.572 71.3796 250.529 71.7651 249.525 72.0855C249.41 72.5199 249.257 72.9869 249.066 73.4864L247.745 73.4864ZM262.659 74.4692C262.535 74.9417 262.363 75.4303 262.133 75.9408L261.301 75.7833L263.186 76.853C264.066 76.7444 265.003 76.5489 265.988 76.2828L266.696 76.9887C265.883 77.2114 265.089 77.3797 264.305 77.4883L266.075 78.4928L265.099 79.0467L262.009 77.2928L261.779 77.4231C261.32 77.6621 260.851 77.8738 260.402 78.053L264.18 80.1978L263.205 80.7517L259.904 78.8784C259.263 79.7634 259.579 80.9309 260.823 82.3752L259.282 82.5761C258.115 81.0015 257.914 79.682 258.661 78.6177C258.087 78.748 257.513 78.8458 256.958 78.9001C255.446 79.0195 253.724 78.7915 251.792 78.2159L252.117 77.4123C254.069 77.977 255.657 78.1942 256.891 78.0802C257.302 78.0313 257.714 77.9607 258.115 77.863L254.901 76.0385L255.877 75.4846L259.378 77.472C259.837 77.2982 260.306 77.0865 260.765 76.8476L260.995 76.7172L257.895 74.9579L258.871 74.4041L260.861 75.5335C261.071 75.0665 261.224 74.6213 261.301 74.1977L262.659 74.4692Z"
                            style="fill:url(#color2)">

                        </path>

如何制作SVG颜色渐变动画效果 - 程序员大本营

参考链接：超级强大的SVG SMIL animation动画详解 « 张鑫旭-鑫空间-鑫生活