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

    <circle  cx="100" cy="100" r="100" fill="#b2d4e5" >
      <animate
      dur="0.3s" begin="startAnimation.begin" attributeName="r" values="100; 85; 100" fill="freeze"  keyTimes:"0; 0.5; 1"  />
      <animate
      dur="0.3s" begin="reverseAnimation.begin" attributeName="r" values="100; 85; 100" fill="freeze"  />
    </circle>

    <!-- vertical line -->
    <path d="M100 50 l0 100" stroke="white" stroke-width="20" stroke-linecap="round" >
      <animate
        dur="0.3s" begin="startAnimation.begin" attributeName="d" values="M100 50 l0 100; M100 100 l0 0; M100 150 l50 -100" fill="freeze"   />
      <animate
        dur="0.3s" 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.3s" begin="startAnimation.begin" attributeName="d" values="M50 100 l100 0; M100 100 l0 0; M50 100 l50 50" fill="freeze" />
        <animate
        dur="0.3s" begin="reverseAnimation.begin" attributeName="d" values=" M50 100 l50 50; M100 100 l0 0; M50 100 l100 0" fill="freeze" />
    </path>
  
    <!--  controls -->
    <!-- these are on top of the visible circle.  Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="100" cy="100" r="100" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="100; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 100" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="100" cy="100" r="0" fill-opacity="0">
      <animate dur="0.001s" id="reverseAnimation" attributeName="r" values="100; 0" fill="freeze" begin="click" />
      <animate dur="0.001s" attributeName="r" values="0; 100" begin="startAnimation.end"  fill="freeze"  />
    </circle>
  </svg>
body {
  text-align: center;
}

svg {
  margin-top: calc(50vh - 50px);
  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.