How do you make an SVG animation loop in html?

To make an SVG animation loop, you can use the repeatCount attribute of the animate element. This attribute specifies the number of times the animation should be repeated, and you can set it to indefinite to make the animation loop continuously.

Example

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" fill="#00bfff">
    <animate attributeName="x" from="10" to="90" dur="2s" repeatCount="indefinite" />
  </rect>
</svg>

Check Demo

In this example, a blue rectangle is animated to move from x=10 to x=90 over a duration of 2 seconds, and the animation is set to repeat indefinitely.

You can also use the begin attribute to control when the animation should start, and the fill attribute to control what should happen when the animation ends. For example, you can set fill="freeze" to freeze the animation at its final state.

There are many other attributes and elements you can use to control the behavior of SVG animations, such as keyTimes, keySplines, calcMode, and values. You can find more information on these in the official SVG specification.