Open In App

SVG <animateMotion> Element

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Syntax:

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

Attributes:

  • 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.

Example:




<!DOCTYPE html>
<html>
  
<body>
    <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" />
        </circle>
    </svg>
</body>
  
</html>


Output:

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

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera

Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads