All geek questions in one place

SVG animation back and forth

I have an svg animation that works very well, but I have a single point problem.

There is a biker who rides from left to right. All the time ... I want the biker to ride from left to right, then from right to left and so on. Here is my pen:

<svg version="1.1" x="0" y="0"
                 viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>

                <g id="bike" fill="#a2b91c"  transform="scale (-1, 1) translate(-800, -67)">
                <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
                    c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
                    c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
                    c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
                    c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
                    c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
                    c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
                    c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
                    c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
                    c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
                    c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
                    c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
                    c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
                    c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
                    C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
                    c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
                    C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
                    c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
                    c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
                     M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
                    c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
                    l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
                    c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
                    C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
                    c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
                    c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
                    c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
                    c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
                    c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
                    c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
                    L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
                    c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
                    c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
                    C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
                    c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
                    c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
                    c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
                    C802.5,56.5,803.1,58.8,802.6,60.6z"/>
                </g>

              <animateMotion
                       xlink:href="#bike"
                       dur="6s"
                       begin="0s"
                       repeatCount="indefinite"
                       rotate="auto"
                       direction="alternate"
                       
                         >
                    <mpath xlink:href="#pfad" />
              </animateMotion>

            </svg>
Run codeHide result

THX

+4
source share
2 answers

This works with keyPointsand keyTimes, part calcMode="linear"is for Chrome. Then I started each animation using id and .endmaking an exception for the first run with 0s;second.end.

<svg version="1.1" x="0" y="0"
                 viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>

                <g id="bike" fill="#a2b91c"  transform="scale (-1, 1) translate(-800, -67)">
                <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
                    c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
                    c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
                    c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
                    c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
                    c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
                    c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
                    c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
                    c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
                    c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
                    c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
                    c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
                    c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
                    c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
                    C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
                    c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
                    C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
                    c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
                    c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
                     M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
                    c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
                    l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
                    c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
                    C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
                    c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
                    c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
                    c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
                    c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
                    c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
                    c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
                    L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
                    c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
                    c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
                    C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
                    c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
                    c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
                    c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
                    C802.5,56.5,803.1,58.8,802.6,60.6z"/>
                </g>

              <animateMotion
                       xlink:href="#bike"
                       dur="6s"
                       begin="0s;second.end"
                       repeatCount="1"
                       rotate="auto"
                       direction="alternate"
                       fill="freeze"
                       id="first">
                    <mpath xlink:href="#pfad" />
              </animateMotion>
              <animateMotion
                       xlink:href="#bike"
                       dur="6s"
                       begin="first.end"
                       repeatCount="1"
                       rotate="auto"
                       direction="alternate"
                       keyPoints="1;0"
                       keyTimes="0;1"
                       calcMode="linear"
                       fill="freeze"
                       id="second">
                    <mpath xlink:href="#pfad" />
              </animateMotion>

            </svg>
Run codeHide result
0
source

addition to @KingCodeFish answer you can turn your bike on rotate="auto-reverse"

<svg version="1.1" x="0" y="0"
                 viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>

                <g id="bike" fill="#a2b91c"  transform="scale (-1, 1) translate(-800, -67)">
                <path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
                    c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
                    c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
                    c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
                    c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
                    c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
                    c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
                    c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
                    c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
                    c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
                    c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
                    c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
                    c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
                    c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
                    C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
                    c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
                    C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
                    c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
                    c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
                     M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
                    c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
                    l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
                    c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
                    C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
                    c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
                    c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
                    c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
                    c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
                    c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
                    c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
                    L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
                    c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
                    c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
                    C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
                    c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
                    c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
                    c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
                    C802.5,56.5,803.1,58.8,802.6,60.6z"/>
                </g>

          <animateMotion
                   xlink:href="#bike"
                   dur="6s"
                   begin="0s;second.end"
                   repeatCount="1"
                   rotate="auto"
                   id="first">
                <mpath xlink:href="#pfad" />
          </animateMotion>
          <animateMotion
                   xlink:href="#bike"
                   dur="6s"
                   begin="first.end-200ms"
                   repeatCount="1"
                   rotate="auto-reverse"
                   keyPoints="1;0"
                   keyTimes="0;1"
                   calcMode="linear"
                   id="second">
                <mpath xlink:href="#pfad" />
          </animateMotion>

            </svg>
Run codeHide result

<svg version="1.1" 
 x="0" y="0" 
 height="100" 
 width="689.07001" 
 viewBox="0 0 689.07294 99.996689" 
 xml:space="preserve">

<path id="pfad" 
      stroke="#a2b91c" 
      transform="scale(1,1)"
      stroke-miterlimit="10" 
      fill="none" 
      d="m -28.711004,104.58853 24.9999999,-3.8 C 50.988996,91.788535 136.67514,76.504229 198.17514,66.304229 c 297.1,-49.100005 477.7,22.8 477.7,22.8 18.95813,6.809335 42.13126,10.093934 42.13126,10.093934" />

  <g id="bike" 
      fill="#a2b91c" 
      width="9.34564" 
      height="8.50777">

<path d="m -27.175349,-10.682945 c 1.68648,-1.764806 4.432203,-2.314868 6.628704,-1.530439 l 1.568761,-2.353483 c -0.137438,-0.685964 -0.451302,-1.234846 -0.686607,-1.901894 l -0.96098,-0.215656 c -0.333426,-0.647155 -1.000207,-0.411607 -1.471037,-0.725158 -0.137244,-0.176656 -0.176366,-0.3732 -0.117621,-0.588661 l 1.000182,-0.09812 0.09806,-0.01963 c -0.490329,-0.922101 -0.157131,-1.803819 -0.03933,-2.745992 1.294113,-2.196533 3.60813,-3.372875 6.098866,-3.667698 1.765017,-0.353139 3.098723,0.705801 4.687277,0.99986 l 0.176491,-0.13729 c -0.07847,-0.392224 -0.470697,-0.313753 -0.725671,-0.568689 -0.196144,-0.470667 0.15684,-0.745257 0.176458,-1.157042 0.156876,-0.235347 0.333368,-0.372647 0.529484,-0.411877 1.3923986,-0.176611 2.5887368,0.195922 3.6282088,0.803815 0.745288,0.666737 0.941484,1.647345 0.843511,2.686721 -0.254937,0.254973 -0.588341,0.117712 -0.745218,0.353059 l 0.196117,-0.03923 c -0.0588,0.215735 -0.196079,0.549138 -0.451013,0.804102 -0.07843,0.117675 0.01967,0.607958 -0.215694,0.451081 -0.333408,-0.137261 -0.254936,0.254973 -0.588344,0.117713 -0.01957,0.411852 -0.5294862,0.411878 -0.5490642,0.82373 -0.176463,0.647198 -0.725669,-0.568689 -1.157041,-0.176456 -0.156839,0.745257 -0.31367,1.490475 0.31393,2.078848 0.862933,0.235271 1.8434992,0.03908 2.7456042,-0.03943 0.6864,-0.137328 1.411994,-0.07856 2.039558,-0.510046 0.451081,0.215694 0.627544,-0.431503 1.176646,-0.235431 0.235348,0.156876 0.274589,0.352995 0.235387,0.666776 -0.01957,0.41185 -0.47063,0.706054 -0.294101,1.078663 0.294207,0.451042 -0.41181,0.490321 -0.313712,0.980585 -0.64716,0.333445 -1.51007,0.09817 -1.882696,0.78462 0,0 0.01963,0.09805 0.117676,0.07843 0.196117,-0.03923 0.333405,0.137262 0.274591,0.352985 0.0981,0.490285 0.725632,0.05877 1.00018,0.411767 -0.313751,0.470696 -0.470587,1.215934 -1.137372,1.451381 0.176531,0.37261 0.725633,0.05878 1.039375,0.09797 0.274552,-0.156913 0.627545,-0.431502 0.666735,-0.745284 0.37261,-0.176531 0.372649,0.333369 0.509938,0.509868 0.215736,0.0588 0.588342,-0.117711 0.647198,0.176466 -0.176463,0.647197 -0.803994,1.078664 -1.215817,1.569054 1.255225,0.666714 2.51045199,1.8433126 2.98125197,3.1768266 0.568876,1.823806 0.52978,4.177188 -0.70560697,5.648171 -1.274622,1.78470898 -3.098428,2.35358498 -5.157685,2.25569698 -2.1573282,-0.0783 -3.9028388,-1.66674998 -4.7070658,-3.64742198 -0.725744,-2.098341 -0.333714,-4.72637 1.3723526,-6.3935086 0.313751,-0.470697 1.117857,-0.529586 1.176606,-1.255225 -0.13729,-0.176491 -0.176531,-0.372608 -0.372649,-0.333368 -1.8825936,1.804403 -3.5298406,3.7656696 -5.3143596,5.5504786 0.117711,0.588343 0.451153,1.235533 0.392362,1.961174 -0.137171,0.843314 -0.803952,1.588553 -1.54917,1.941675 0.137291,0.176491 0.451082,0.215693 0.607998,0.490245 -0.156877,0.235348 -0.352995,0.274589 -0.666775,0.235387 -0.294178,0.05886 -0.137262,0.333407 -0.09802,0.529525 l -2.333793,0.059 c -0.156914,-0.274551 0.0784,-0.627574 0.137173,-0.843314 -0.01963,-0.09806 -0.13729,-0.176491 -0.333406,-0.137261 l -1.039343,0.921796 c -1.177236,0.74392998 -2.530359,1.11675498 -3.962079,1.09744698 -2.274966,-0.156977 -4.648026,-1.82391198 -5.393416,-4.02063798 -1.059216,-2.235317 -0.76521,-4.843443 1.117319,-6.6480596 z m 19.8867398,-4.080929 c -0.09805,0.01963 -0.196115,0.03923 -0.27455,0.156915 l 0.03923,0.196116 0.313791,0.0392 -0.07847,-0.392224 z m 1.941488,-1.51026 c -0.37261,0.176531 -0.804038,0.568795 -1.274726,0.764946 l 0.05885,0.294167 c 0.509898,-4.4e-5 0.78441,-0.666853 1.274722,-0.764936 0,0 0.0588,-0.215736 -0.05885,-0.294167 z m -1.078512,1.745518 c 0.137291,0.176491 0.411852,0.01957 0.509899,-4.5e-5 0.176492,-0.137289 0.352995,-0.274587 0.19608,-0.549138 l -0.705979,0.549178 z m 1.353303,1.156995 c 0.156877,-0.235348 -0.0981,-0.490285 -0.137328,-0.6864 -0.392224,0.07847 -0.647161,0.333444 -1.058999,0.313859 -0.137262,0.333406 0.196144,0.470668 0.45112,0.725594 0.313789,0.0392 0.588342,-0.117712 0.745219,-0.353061 z m 1.823992,1.470787 c 0.235309,-0.353024 0.13726,-0.333407 0.09802,-0.529525 -0.333405,-0.13726 -0.588341,0.117713 -0.980565,0.196184 -0.902125,0.07852 -2.118041,0.11783 -2.686815,-0.686213 -0.156914,-0.274551 -0.196183,-0.980567 -0.745286,-0.666736 -0.09803,0.529524 7.7e-5,1.019778 0.196222,1.490475 0.117675,0.07843 0.313791,0.0392 0.333408,0.137261 0.03923,0.196117 -0.254936,0.254964 -0.333371,0.372649 1.15705,-0.333486 2.372985,-0.372791 3.471246,0.01937 0.215736,0.0588 0.490284,-0.0981 0.64716,-0.333446 z m -7.5500738,6.0997486 c 0.07859,1.921982 1.1377367,3.64771 2.7459856,4.549724 1.5885532,0.80395198 3.9027512,0.64689798 5.2362692,-0.333816 1.588455,-1.235626 2.45126897,-3.039926 2.13724899,-5.118789 -0.157027,-1.804208 -1.62802799,-3.5496356 -3.29506999,-4.2358916 -1.059068,-0.196044 -2.451466,-0.529327 -3.451648,0.07869 -0.117637,0.431467 0.235387,0.666777 0.215803,1.0786676 0.431541,1.137455 0.490475,2.451369 1.471078,3.274987 0.196117,-0.03923 0.333406,0.137261 0.470697,0.313753 0.156916,0.274551 -0.0784,0.627572 -0.352955,0.784488 -0.274552,0.156915 -0.627573,-0.0784 -0.784489,-0.352955 -0.137289,-0.176492 0.137263,-0.333407 0.09803,-0.529525 -1.255225,-1.176607 -1.372986,-2.784795 -2.0399382,-4.0791256 -1.5296629,1.0198696 -2.4119846,2.7262096 -2.4510816,4.5697076 z M -8.2494454,-13.9597 c 0.01967,0.607957 0.05893,1.314015 0.4708062,1.843501 0.09802,-0.529525 -0.117751,-1.098262 -0.117785,-1.608152 -0.1961172,0.03922 -0.2549732,-0.254935 -0.3922652,-0.431427 -0.137288,-0.176491 0.117637,-0.431467 -0.01967,-0.607957 -0.07843,0.117675 -0.215736,-0.0588 -0.274551,0.156915 -0.0588,0.215736 0.196157,0.470669 0.333446,0.647161 z m -7.7851336,10.0220956 c -0.07843,0.117676 -0.156874,0.235348 -0.117637,0.431466 l 0.196119,-0.03923 -0.07847,-0.392224 z m 0.626681,-12.6690406 0.255002,0.764835 c 0.352995,-0.274591 0.705978,-0.54918 1.098204,-0.627653 -0.509899,4.4e-5 -0.843315,-0.137171 -1.353206,-0.137182 z m 0.02044,11.8259286 c 0.117677,0.07843 0.313793,0.0392 0.529525,0.09802 0.07843,-0.117675 0.117637,-0.431466 -4.4e-5,-0.509899 l -0.01963,-0.09806 c -0.274551,0.156915 -0.451042,0.294205 -0.509861,0.509938 z m 3.254552,-14.3170756 c -0.313791,-0.0392 -0.823691,-0.03916 -1.117858,0.01969 0.490322,0.411812 0.882605,0.843242 1.431685,1.039312 -0.176529,-0.372609 0.03916,-0.823691 -0.313859,-1.058999 z m 2.8636706,5.13799 c 0.254934,-0.254965 -0.215773,-0.568718 -0.07852,-0.902124 -0.6471979,-0.176463 -0.8826066,-0.843241 -1.0983516,-1.411997 -0.235349,-0.156876 -0.804075,0.0589 -0.980586,-0.313712 l -0.09805,0.01963 c -0.627504,0.941393 -1.49038,1.725918 -2.137437,2.569243 1.568957,0.196004 3.059435,0.509674 4.5303206,0.72525 -0.03922,-0.196116 -4.4e-5,-0.509898 -0.137328,-0.6864 z m -1.3137486,3.118318 c -0.235347,-0.156875 -4.4e-5,-0.509899 -0.137328,-0.6864 -0.05885,-0.294167 -0.431505,-0.627546 -0.274627,-0.862894 0.333405,0.137261 0.313829,0.549103 0.568793,0.804038 0.137262,-0.333408 -0.274628,-0.862895 0.215655,-0.960982 0.2745897,0.352984 0.0589,0.804076 0.2354307,1.176646 0.254937,-0.254974 0.5491019,-0.313831 0.6863629,-0.647237 0.0392,-0.313792 -0.0981,-0.490285 -0.4118789,-0.529486 -1.3727997,-0.235238 -2.8436797,-0.450856 -4.3145597,-0.666479 l -0.588302,0.627611 c 0.608035,1.000144 1.28e-4,2.039655 -0.450856,2.8436826 0.470696,0.313752 1.000181,0.411767 1.372898,0.745147 0.03923,0.196116 -0.13726,0.333407 -0.215695,0.451083 -0.313791,-0.0392 -0.235309,0.353022 -0.294136,0.568754 -0.411841,-0.01957 -0.666776,0.235387 -0.705979,0.549178 0.05885,0.294176 -0.47063,0.706055 0.0589,0.804076 l 0.294165,-0.05886 c 1.353104,-1.392492 2.804301,-2.804677 3.961255,-4.1579856 z m -4.059229,5.1973616 c -0.156876,0.235348 0.117713,0.588342 0.0785,0.902124 0.01963,0.09806 0.117674,0.07843 0.215736,0.0588 0.0392,-0.313791 -0.03927,-0.706016 -0.294243,-0.960952 z m -0.509727,2.549543 c 0.411842,0.01957 0.607919,-0.529554 0.74518,-0.86296 -0.431465,-0.117636 -0.529486,0.411878 -0.804037,0.568794 -0.0588,0.215736 0.03923,0.196116 0.05885,0.294166 z m -0.235388,-0.666776 c 0.117677,0.07843 0.294168,-0.05886 0.372611,-0.17653 0.0588,-0.215736 -0.137291,-0.176491 -0.254963,-0.254934 l -0.196117,0.03923 0.07847,0.392224 z m -0.431693,-3.177011 c 0.156876,-0.235348 0.490245,-0.607997 0.431388,-0.902163 -0.31379,-0.0392 -0.372608,0.17653 -0.431427,0.392264 -0.07843,0.117675 -0.13726,0.333406 4.4e-5,0.509899 z m -0.411548,4.059616 c 0.117675,0.07843 0.196115,-0.03923 0.31379,0.0392 0.09806,-0.01963 0.0588,-0.215736 0.0588,-0.215736 -0.254943,-0.254931 -0.50987,4.4e-5 -0.372579,0.176535 z m -1.059646,-8.8643736 c 0.137262,-0.333407 0.607919,-0.529555 0.33333,-0.882549 -0.294205,-0.451042 -0.588409,-0.902093 -0.961092,-1.235438 0.0589,0.804076 0.490394,1.43159 0.627722,2.118042 z m -0.666736,0.745287 -0.627723,-2.118041 c -0.313753,0.470696 -0.392146,1.09826 -0.607853,1.549361 0.196146,0.470667 0.627613,0.588303 1.000281,0.921674 0.07843,-0.117674 0.27455,-0.156914 0.235308,-0.353023 z m -0.117535,1.9611746 c -0.334475,-0.137035 -0.27573,-0.352497 -0.334512,-0.64733 -0.431549,-0.6272686 -1.039523,-1.1174606 -1.706341,-1.3922066 -0.82359,1.4905746 -1.745234,3.0007436 -2.451082,4.5697086 0.353023,0.235309 0.529485,-0.411879 0.862893,-0.274628 -0.05879,0.215737 -0.352984,0.27459 -0.411812,0.490322 l 3.922346,0.744953 c 0.176456,-1.157041 -0.274736,-2.39258 0.117405,-3.490842 z m -9.668107,5.197751 c 0.823819,2.078747 3.000842,3.27489998 5.138466,3.25520398 1.431688,0.01952 2.608337,-0.72582798 3.765293,-1.56925298 -0.05885,-0.294166 -0.588371,-0.392185 -0.372677,-0.843267 0.254896,-0.764873 0.980497,-1.216033 0.901984,-2.118137 -1.176745,-0.274478 -2.373083,-0.64702 -3.62821,-0.803815 -0.05879,0.215737 -0.313754,0.470707 -0.490246,0.607997 -0.196116,0.03923 -0.509899,3.9e-5 -0.647198,-0.176464 -0.156915,-0.274551 0.05878,-0.725632 -0.09813,-1.000182 l 0.117638,-0.431466 c 0.802867,-1.588928 1.724504,-3.0992996 2.430435,-4.6681536 -2.353561,-1.058383 -5.255992,-0.273961 -6.746349,1.9623516 -1.078426,1.744722 -1.215663,4.118495 -0.37217,5.785041 z" />
      
<animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="0s;fourth.end" repeatCount="1" id="first" fill="freeze">
    <mpath xlink:href="#pfad" />
</animateMotion>
<animateTransform attributeName="transform" type="scale" from="1 1" to="-1 1" begin="first.end" dur="0.2s" fill="freeze"
                  id="second" />
<animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="second.end" direction="alternate" keyPoints="1;0" keyTimes="0;1"
               fill="freeze" calcMode="linear" id="third">
    <mpath xlink:href="#pfad" />
</animateMotion>
<animateTransform attributeName="transform" type="scale" from="-1 1" to="1 1" begin="third.end" dur="0.2s" fill="freeze" repeatCount="1"
                  id="fourth" />
  </g>
</svg>
Hide result
+2

Source: https://habr.com/ru/post/1613845/

More articles:


All Articles