Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
mohamedkhallouq
GitHub Repository: mohamedkhallouq/content
 Path: blob/main/files/en-us/web/svg/element/animatemotion/index.md
6581 views
---
title: <animateMotion>
slug: Web/SVG/Element/animateMotion
page-type: svg-element
tags:
  - Element
  - SVG
  - SVG Animation
browser-compat: svg.elements.animateMotion
---

{{SVGRef}}

The SVG <animateMotion> element provides a way to define how an element moves along a motion path.

Note: To reuse an existing path, it will be necessary to use an {{SVGElement("mpath")}} element inside the <animateMotion> element instead of the {{SVGAttr("path")}} attribute.

Example

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path
    fill="none"
    stroke="lightgrey"
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

  <circle r="5" fill="red">
    <animateMotion
      dur="10s"
      repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

{{EmbedLiveSample('Example', 150, '100%')}}

Usage context

{{svginfo}}

Attributes

  • {{SVGAttr("keyPoints")}}

    • : This attribute indicate, in the range [0,1], how far is the object along the path for each {{SVGAttr("keyTimes")}} associated values. Value type: <number>*; Default value: none; Animatable: no

  • {{SVGAttr("path")}}

    • : This attribute defines the path of the motion, using the same syntax as the {{SVGAttr('d')}} attribute. Value type: <string>; Default value: none; Animatable: no

  • {{SVGAttr("rotate")}}

    • : This attribute defines a rotation applied to the element animated along a path, usually to make it pointing in the direction of the animation. Value type: <number>|auto|auto-reverse; Default value: 0; Animatable: no

Note: For <animateMotion>, the default value for the {{SVGAttr("calcMode")}} attribute is paced.

Animation Attributes

  • Animation timing attributes

    • : {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}

  • Animation value attributes

    • : {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}

  • Other Animation attributes

    • : Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}

  • Animation event attributes

    • : Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}

Global attributes

Usage notes

This element implements the {{domxref("SVGAnimateMotionElement")}} interface.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

  • {{SVGElement("mpath")}}