SVG repeatDur Attribute

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="https://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="https://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>

Output:

Explore