I hope I am posting to the correct forum.

I have done an animation and after it finishes, I want it stop and then restart. The stop was easy enough, but does anyone know how to restart it?

My code -

HTML Code:
<svg xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">


  <rect x="100" y="100" width="10px" height="100px"
   stroke="red" fill="black">
     
     <animate attributeName="width" from="10px" to="100px"
      begin="0s" dur="10s" repeatCount="1"/>
      
     <animate attributeName="height" from="100px" to="10px"
      begin="0s" dur="10s" repeatCount="1"/>

     <animate attributeName="fill" from="black" to="pink"
       begin="10s" dur="30s" /> 
     

  </rect>

</svg>
From what I have found, it seems it should be a javascript function. Is this correct? What sort of function should I use? I know very little about javascript.

Thanks,
Vicki