<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200" width="400" height="200" version="1.1">

  <g>
    <!--control starts with radius 100 but shrinks to radius 0 when clicked.  It goes back to 100 when the reverseanimation runs-->
    <circle cx="100" cy="100" r="100" fill="#b2d4e5">
      <animate id="startAnimation" dur="1.0s" attributeName="r" values="100; 0" fill="freeze" begin="click" />
      <animate dur="1.0s" attributeName="r" values="0; 100" fill="freeze" begin="reverseAnimation.begin" />
    </circle>
    <text y="240" x="50" font-family="Verdana" text-align="center" font-size="30" textLength="100">Start</text>
  </g>

  <g transform="translate(300,0)">
    <circle cx="100" cy="100" r="100" fill="#b2d4e5">
    </circle>

    <!-- vertical line -->
    <path d="M100 50 l0 100" stroke="white" stroke-width="20" stroke-linecap="round">
      <animate dur="0.5s" begin="startAnimation.begin" attributeName="d" values="M100 50 l0 100; M100 100 l0 0; M100 150 l50 -100" fill="freeze" />
      <animate dur="0.5s" begin="reverseAnimation.begin" attributeName="d" values="M100 150 l50 -100; M100 100 l0 0; M100 50 l0 100" fill="freeze" />
    </path>

    <!-- horizontal line -->
    <path d="M50 100 l100 0" stroke="white" stroke-width="20" stroke-linecap="round">
      <animate dur="0.5s" begin="startAnimation.begin" attributeName="d" values="M50 100 l100 0; M100 100 l0 0; M50 100 l50 50" fill="freeze" />
      <animate dur="0.5s" begin="reverseAnimation.begin" attributeName="d" values=" M50 100 l50 50; M100 100 l0 0; M50 100 l100 0" fill="freeze" />
    </path>
  </g>

  <g transform="translate(600,0)">
    <!--control starts with radius 0 but grows to radius 100 when startanimation runs.  It goes back to 0 clicked-->
    <circle cx="100" cy="100" r="0" fill="#b2d4e5">
      <animate dur="1s" attributeName="r" values="0; 100" fill="freeze" begin="startAnimation.begin" />
      <animate id="reverseAnimation" dur="1s" attributeName="r" values="100; 0" fill="freeze" begin="click" />
    </circle>
    <text y="240" x="25" font-family="Verdana" text-align="center" font-size="30" textLength="150">Reverse</text>
  </g>
</svg>
body {
  text-align: center;
}

svg {
  margin-top: calc(50vh - 100px);
  circle {
     cursor: pointer;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.