Continuous animation.
The cyan rectangle begins growing from the center to the right edge.
Then morphs to a vertical one from the center to the top edge, morphing again to a horizontal bar to the left edge, finally morphing to a vertical bar growing to the bottom edge.
An exercise for the viewer would be to change the direction of animation from counter-clockwise to clock-wise.
Here's the code ...
First the initial line:
<rect id="lineC" x="240" y="240" height="0" width="0" style="fill:cyan"/>
<animate xlink:href="#lineC" attributeName="width" from="0px" to="250px" begin="0s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="height" from="0px" to="20px" begin="0s" dur="3s" fill="freeze"/>
Now morphing to the top edge:
<animate xlink:href="#lineC" attributeName="width" from="240" to="20" begin="4s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="height" from="20" to="240" begin="4s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="x" attributeType="xml" from="240" to="240" begin="4s" dur="3x" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="y" attributeType="xml" from="240" to="20" begin="4s" dur="3s" fill="freeze"/>
... left edge ...
<animate xlink:href="#lineC" attributeName="width" from="20" to="240" begin="8s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="height" from="240" to="20" begin="8s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="x" attributeType="xml" from="240" to="20" begin="8s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="y" attributeType="xml" from="20" to="240" begin="8s" dur="3s" fill="freeze"/>
... and bottom edge: (this took some extra work)
<animate xlink:href="#lineC" attributeName="width" from="20" to="20" begin="12s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="height" from="240" to="0" begin="12s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="x" from="20" to="240" begin="12s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="width" from="240" to="20" begin="12s" dur="3s" fill="freeze"/>
<animate xlink:href="#lineC" attributeName="height" from="20" to="240" begin="12s" dur="3s" fill="freeze"/>
<text id="T1" x="42%" y="45%" style="opacity:0; ">
All done!
<animate attributeType="css" attributeName="opacity" values='0;1' dur="1s" begin="16s" fill="freeze"/>
Note the use of percent values for the x and y values to place the text.
All Done!