Repeat SVG animation sequence - html

Question

I have a 17 second long second animation with multiple parts to it. How can I repeat the whole sequence once it's done?
I tried repeatCount = "indefinite" attribute on each <animate>, but that just made things weird. Here's the animation I want repeated, for reference or something.
<rect x="185" y="300" width="300" height="400" fill="#666666">
<animate
attributeName="x"
from="185" to="145"
begin="5s"
dur="2s"
fill="freeze"
/>
<animate
attributeName="x"
from="145" to="185"
begin="9s"
dur="2s"
fill="freeze"
/>
<animate
attributeName="y"
from="300" to="340"
begin="11s"
dur="2s"
fill="freeze"
/>
<animate
attributeName="y"
from="340" to="300"
begin="15s"
dur="2s"
fill="freeze"
/>
</rect>

Answer 1

In addition to animation begin values being clock-based time intervals, they can also be sync-based values that reference other animations.
From MDN Web Docs:
<syncbase-value>Describes a syncbase and an optional offset from that syncbase. The element's animation start time is defined relative to the begin or active end of another animation. A syncbase consists of an ID reference to another animation element followed by either .begin or .end to identify whether to synchronize with the beginning or active end of the referenced animation element.
This means you can chain animations together by referencing each others' IDs as begin values.
Basically, you'll want to start each animation after the previous one ends. When the last animation ends it should trigger the first to start again. The animation begin attribute accepts multiple values so you can specify two values for the first animation: the 5s delay and the end of the last animation.
<svg viewBox="0 0 400 500" width="50%" height="50%">
<rect x="50" y="10" width="300" height="400" fill="#666666">
<animate
id="anim1"
attributeName="x"
from="50" to="10"
begin="5s;anim4.end"
dur="2s"
fill="freeze"
/>
<animate
id="anim2"
attributeName="x"
from="10" to="50"
begin="anim1.end"
dur="2s"
fill="freeze"
/>
<animate
id="anim3"
attributeName="y"
from="10" to="50"
begin="anim2.end"
dur="2s"
fill="freeze"
/>
<animate
id="anim4"
attributeName="y"
from="50" to="10"
begin="anim3.end"
dur="2s"
fill="freeze"
/>
</rect>
</svg>

Answer 2

You can try with this:
<animate attributeName="x" values="185; 145; 185" begin="5s" dur="4s" fill="freeze"/>
<animate attributeName="y" values="300; 340; 300" begin="11s" dur="4s" fill="freeze"/>