Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Animation


SVG Animation

SVG elements can be animated.

In SVG, we have four animation elements which sets or animates SVG graphics:

  • <set>
  • <animate>
  • <animateTransform>
  • <animateMotion>

SVG <set>

The <set> element sets the value of an attribute for a specified duration.

In this example, we create a red circle that starts with a radius of 25, then after 3 seconds the radius will be set to 50:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" style="fill:red;">
  <set attributeName="r" to="50" begin="3s" />
</svg>
Try it Yourself »

Code explanation:

  • The attributeName attribute in the <set> element defines which attribute to change
  • The to attribute in the <set> element defines the new value for the attribute
  • The begin attribute in the <set> element defines when the animation should start

SVG <animate>

The <animate> element animates an attribute of an element.

The <animate> element should be nested inside the target element.

In this example, we create a red circle. We animate the cx attribute from 50 to 90%. This means that the circle will go from left to right:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      repeatCount="indefinite" />
  </circle>
</svg>
Try it Yourself »

Code explanation:

  • The attributeName attribute defines which attribute to animate
  • The begin attribute defines when the animation should start
  • The dur attribute defines the duration of the animation
  • The from attribute defines the starting value
  • The to attribute defines the ending value
  • The repeatCount attribute defines how many times the animation should play

SVG <animate> with Freeze

In this example, we want the red circle to freeze (stop) when it comes to its final position (instead of snapping back to the start position):

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="100%" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" style="fill:red;">
    <animate
      attributeName="cx"
      begin="0s"
      dur="8s"
      from="50"
      to="90%"
      fill="freeze" />
  </circle>
</svg>
Try it Yourself »

Code explanation:

  • The fill="freeze" attribute defines that the animation should freeze when it comes to its final position


SVG <animateTransform>

The <animateTransform> element animates the transform attribute on the target element.

The <animateTransform> element should be nested inside the target element.

In this example, we create a red rectangle that will rotate:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="200" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="30" y="30" height="110" width="110" style="stroke:green;fill:red">
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 85 85"
      to="360 85 85"
      repeatCount="indefinite" />
  </rect>
</svg>
Try it Yourself »

Code explanation:

  • The attributeName attribute animates the transform attribute of the <rect> element
  • The begin attribute defines when the animation should start
  • The dur attribute defines the duration of the animation
  • The type attribute defines the type of transformation
  • The from attribute defines the starting value
  • The to attribute defines the ending value
  • The repeatCount attribute defines how many times the animation should play

SVG <animateMotion>

The <animateMotion> element sets how an element moves along a motion path.

The <animateMotion> element should be nested inside the target element.

In this example, we create a rectangle and a text. Both elements have an <animateMotion> element with the same path:

It's SVG! Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect x="45" y="18" width="155" height="45" style="stroke:green;fill:none;">
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
  <text x="50" y="50" style="font-family:Verdana;font-size:32">It's SVG!
    <animateMotion
      path="M0,0 q60,100 100,0 q60,-20 100,0"
      begin="0s"
      dur="10s"
      repeatCount="indefinite" />
</text>
</svg>
Try it Yourself »

Code explanation:

  • The path attribute defines the path of the animation
  • The begin attribute defines when the animation should start
  • The dur attribute defines the duration of the animation
  • The repeatCount attribute defines how many times the animation should play

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.