The animateMotion element causes a referenced element to move along a motion path.
<!DOCTYPE HTML> <html> <head> <title>SVG tutorial</title> </head> <body> <svg width="120" height="120"> <!-- Draw the outline of the motion path in grey, along with 2 small circles at key points --> <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/> <circle cx="10" cy="110" r="3" fill="lightgrey" /><circle cx="110" cy="10" r="3" fill="lightgrey" /> <!-- Here is a red circle which will be moved along the motion path. --> <circle cx="" cy="" r="5" fill="red"> <!-- Define the motion path animation --> <animateMotion dur="6s" repeatCount="indefinite"> <mpath xlink:href="#theMotionPath"/> </animateMotion> </circle> </svg> </body> </html>