css3/svg延路径移动/路径 32.svg

<svg width="422px" height="409px" viewBox="0 0 422 409" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="-4.10590071%" y1="7.4791565%" x2="86.2799922%" y2="88.4341707%" id="linearGradient-1">
            <stop stop-color="#04C6FB" offset="0%"></stop>
            <stop stop-color="#5BFAB8" offset="21.7773066%"></stop>
            <stop stop-color="#90FFD3" stop-opacity="0" offset="100%"></stop>
        </linearGradient>
        <filter id="f1" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
        </filter>
    </defs>

            <g transform="translate(-1032.000000, -631.000000)" stroke="url(#linearGradient-1)" stroke-width="2"  fill="none" fill-rule="evenodd">
                <path d="M1038.47866,631.993881 C1035.22987,648.396005 1033.60548,656.597067 1033.60548,656.597067 C1033.60548,656.597067 1083.3177,687.641236 1083.3177,687.641236 C1083.3177,687.641236 1081.40446,712.234757 1077.57797,761.421798 L1508.89822,1080"></path>
                <circle cx="0" cy="0" r="5" stroke="none" fill="red" filter="url(#f1)">
                    <animateMotion id="toRight" path="M1038.47866,631.993881 C1035.22987,648.396005 1033.60548,656.597067 1033.60548,656.597067 C1033.60548,656.597067 1083.3177,687.641236 1083.3177,687.641236 C1083.3177,687.641236 1081.40446,712.234757 1077.57797,761.421798 L1508.89822,1080" begin="0s" dur="8" repeatCount="indefinite"/>                
                    <animateMotion id="toLeft" path="M1038.47866,631.993881 C1035.22987,648.396005 1033.60548,656.597067 1033.60548,656.597067 C1033.60548,656.597067 1083.3177,687.641236 1083.3177,687.641236 C1083.3177,687.641236 1081.40446,712.234757 1077.57797,761.421798 L1508.89822,1080" begin="0s" dur="8" repeatCount="indefinite"/>                
                </circle>
            </g>
</svg>