<?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>