Open In App

SVG <animateMotion> Element

Last Updated : 31 Mar, 2022
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

Previous Article
Next Article

Similar Reads

SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG &lt;linearGradient&gt; Element
SVG &lt;linearGradient&gt; Element allows the developer to define linear gradients to apply SVG elements. It allows a smooth transition from one color to another. This is the most reliable technique. Linear gradients can be defined as vertical, angular gradients or horizontal: Vertical gradients are created when x1 and x2 are equal and y1 and y2 di
3 min read
SVG pattern Element
SVG (Scalable Vector Graphic) pattern is an element which defines the pattern in graphics using HTML. To work with create SVG pattern you have to define a &lt;pattern&gt; inside in an SVG after that, you can define the shapes inside of that &lt;pattern&gt;. Now have to define shapes area by specifying its color, borders, etc. Syntax of Declaration:
3 min read
SVG Path Element
SVG stands for Scalable Vector Graphic. The SVG element path is used to define a path that starts from a position and ends to a particular position. SVG path can be used to create any basic shapes. Syntax: &lt;path d="Shape of path using keyword like M, L, C etc." pathLength="Length of path" stroke="stroke color name" fill="color name"&gt; &lt;/pat
2 min read
SVG Polyline element
The &lt;polyline&gt; element of SVG in HTML is used to create a shape by connecting lines through different points. It is different from &lt;polygon&gt; as it can be used to create open shapes. Syntax: &lt;polyline points="Pair of points required to draw the shape" stroke="stroke color" fill="fill color for colored closed shapes"&gt; Attributes: po
1 min read
SVG defs Element
The &lt;defs&gt; in SVG is used whenever we want a particular element to render only when required or when it is called. objects that are created inside &lt;defs&gt; element are not rendered directly they are needed to be called by &lt;use&gt; element to render them on the browser. Syntax: &lt;defs&gt;&lt;/defs&gt; Property values: It does not have
2 min read
SVG polygon Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The &lt;polygon&gt; element of SVG is used to make any type of polygon on the SVG and defines a closed shape consisting of a set of connected straight line segments. Syntax: &lt;polygon points="Pair of points required to draw the shape" strok
2 min read
SVG &lt;marker&gt; Element
The &lt;marker&gt; element in SVG is used to define the graphics that is mostly used for the drawing purpose. It may be used in graphs, charts for making arrowheads and polymarkers on a given path. Syntax: &lt;marker&gt;&lt;/marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient=""&gt; Property Values: This element contains the fol
2 min read
SVG &lt;desc&gt; Element
The &lt;desc&gt; element in SVG is used to provide an accessible text description to any of the available SVG elements whether it is a container or graphic element. Syntax: &lt;desc&gt;&lt;/desc&gt; Property Values: It does not have any property values. Below given are a few examples of the function given above. Example1: When text inside the desc
1 min read
SVG Circle Element
The SVG &lt;circle&gt; element is used to draw circle. The center point and radius are given. Syntax: &lt;circle cx="x-axis co-ordinate" cy="y-axis co-ordinate" r="length" &gt; &lt;/circle&gt; Attributes: cx: x-axis co-ordinate of the center.cy: y-axis co-ordinate of the centerr: Radius of the circle. Example: C/C++ Code &amp;lt;!DOCTYPE html&amp;g
1 min read