SVG repeatCount Attribute

Last Updated : 23 Jul, 2025

The repeatCount attribute specifies the time duration of an animation. The elements that are using this attribute includes <animate>, <animateColor>, <animateMotion>, <animateTransform>, and <set>

Syntax:

repeatCount = number || indefinite

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

  • number: It indicates the number of iterations. The values starts greater than 0 and beyond.
  • indefinite: It specifies that the animation will repeat indefinitely.

Example 1: The below examples illustrates the use of the repeatCount attribute.

HTML
<!DOCTYPE html>
<html>

<body>
    <div style="color: green; 
          text-align: center;">
        <h1>GeeksforGeeks</h1>

        <h4>It will stop after 6 sec.</h4>

        <svg viewBox="0 0 620 150" 
            xmlns="https://www.w3.org/2000/svg">
            
            <rect x="260" y="0" fill="green" 
                width="100" height="100">

                <animate attributeType="XML" 
                    attributeName="y" from="0" 
                    to="50" dur="1s" repeatCount="6" />
            </rect>
        </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="0 0 620 150" 
            xmlns="https://www.w3.org/2000/svg">
            
            <rect x="260" y="0" fill="green" 
                width="100" height="100">
                
                <animate attributeType="XML" 
                    attributeName="y" from="0" 
                    to="50" dur="1s" 
                    repeatCount="indefinite" />
            </rect>
        </svg>
    </div>
</body>

</html>

Output:


Comment

Explore