<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 200" width="400" height="200" version="1.1">
  
  <!--  control element-->
  <g>
    <circle cx="100" cy="100" r="100" fill="#b2d4e5">
      
      <animate id="startAnimation" dur="2.0s" attributeName="r" values="100; 100" fill="freeze" begin="click" />
    </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 of cross-->
    <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 of cross -->
    <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>
  
  <!--  control element-->
  <g transform="translate(600,0)">
    <circle cx="100" cy="100" r="100" fill="#b2d4e5">
      <animate id="reverseAnimation" dur="2.0s" attributeName="r" values="100; 100" 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.