SVG repeatDur Attribute

Last Updated : 31 Mar, 2022

The repeatDur attribute specifies the total duration to repeat the animation.

The elements that uses this attribute are:

<animate> element
<animateColor> element
<animateMotion> element
<animateTransform> element
<set> element

Syntax:

repeatDur = clock-value || indefinite

Attribute Values: The repeatDur attribute accepts the values mentioned above and described below:

clock-value: It indicates the time duration to repeat the animation.
indefinite: It specifies that the animation will repeat indefinitely.

The below examples illustrate the use of the repeatDur attribute.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
<body> 
    <div style="color: green;  
       text-align: center;"> 
  
        <h1> 
            GeeksforGeeks 
        </h1> 
        <h4> 
            It will stop  
            after 4 sec. 
        </h4> 
  
        <svg viewBox="-360 0 820 150" 
            xmlns="http://www.w3.org/2000/svg"> 
            <circle cx="50" cy="50" r='20' 
                fill ="green"> 
                <animate attributeName="cy" 
                    from="10" to="50"
                    dur="1s" repeatDur="4s"/> 
            </circle> 
        </svg> 
    </div>  
</body> 
  
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <div style="color: green;  
        text-align: center;"> 
        <h1> 
          GeeksforGeeks 
        </h1> 
        <h4> 
          It will continue to animate 
        </h4>  
  
        <svg viewBox="-360 0 820 150" 
            xmlns="http://www.w3.org/2000/svg"> 
            <rect y="0" width="100"
                 fill ="green" height="100"> 
                <animate attributeName="y" 
                    from="0" to="40"
                    dur="1s" 
                    repeatDur="indefinite"/> 
            </rect>  
        </svg> 
    </div>  
</body> 
  
</html>