Skip to content
Related Articles

Related Articles

SVG <animateMotion> Element

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Mar, 2022
View Discussion
Improve Article
Save Article

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.

The SVG <animateMotion> element let define how an element moves along a motion path.


<animateMotion values="" dur="" repeatCount="" path="" />


  • keyPoints: This attribute indicates in the range [0, 1], how far is the object along the path for each keyTimes associated values.
  • path: This attribute defines the path of the motion.
  • rotate: This attribute defines a rotation applied to the element animated along a path, usually to make it point in the direction of the animation.
  • Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
  • Global Attributes: some global attributes used like core attributes and styling attributes, etc.


<!DOCTYPE html>
    <svg width="1200" height="1200">
        <circle cx="60" cy="60" r="5" fill="green">
            <animateMotion dur="10s" repeatCount="indefinite"
          path="M20, 60 C20,
                -50 180, 150 180,
                 60 C180-60 20,
                 150 20, 60 z" />


Browsers Supported: The following browsers are supported by this SVG element:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!