Animate element inside SVG according to path - Example

Here is a simple example of animating any object inside SVG according to the path in SVG using its ID. You just need to make sure the object you animating is placed at the top leftmost point to make it overlap and move nicely on the path.

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
    <path id="pathid" d="M50,50 C150,150 250,150 350,50" fill="none" stroke="black"/>
    
    <circle cx="0" cy="0" r="10" fill="blue">
        <animateMotion dur="5s" repeatCount="indefinite">
            <mpath xlink:href="#pathid"/>
    </circle>
</svg>

DEMO

See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen.

Animate element inside SVG according to path – Example