<?xml version="1.0" encoding="UTF-8" standalone="no" ?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Moving sub-trees</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <g> <!-- background rect to track progress --> <rect x="0" y="80" width="100" height="40" fill="royalblue" stroke="black" stroke-width="1"/> </g> </svg> <!-- Second animation --> <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> <rect x="0" y="0" width="199" height="199" style="fill: none; stroke: black"/> <g id="new-parent"> <!-- background rect to track progress --> <rect x="0" y="80" width="100" height="40" fill="greenyellow" stroke="black" stroke-width="1"/> <!-- circle to transfer --> <circle cx="100" cy="100" r="15" fill="skyblue" stroke="black" stroke-width="1" id="circle-to-move"/> </g> </svg> </body> </html>