JSFiddle - React, Tailwind, and code Playground

by cent cent

HTML

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

    <!-- bar 1 -->
	    <path fill="#D8D8D8" d="M0,0 L6,0 L6,16 L0,16 L0,0 Z" id="bar1">
      <animate xlink:href="#bar1"
               attributeName="d"
               from="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               	to="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="startAnimation.begin" />
      <animate xlink:href="#bar1"
               attributeName="d"
               	from="M0,0 L6,3.20001221 L6,12.7999878 L0,16 L0,0 Z"
               to="M0,0 L6,0 L6,16 L0,16 L0,0 Z"
               dur="0.3s"
	               fill="freeze" 
	               begin="reverseAnimation.begin" />
    </path>

    <!-- horizontal line -->
    	<path fill="#D8D8D8" d="M10,0 L16,0 L16,16 L10,16 Z" id="bar2">
      <animate attributeName="d"
	               from="M10,0 L16,0 L16,16 L10,16 Z"
	               to="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
               dur="0.3s"
               fill="freeze" 
               begin="startAnimation.begin" />
      <animate attributeName="d"
	               from="M5.9944458,3.20001221 L15,8 L15,8 L5.9944458,12.7999878 Z"
	               to="M10,0 L16,0 L16,16 L10,16 Z"
               dur="0.3s"
               fill="freeze" 
               begin="reverseAnimation.begin" />
    </path>
  
    <!--  controls -->
    <!-- these are on top of the visible icon. Their radius changes depending on which is active
    Opacity is set to 0 so you can't see them-->
    <circle cx="16" cy="16" r="16" fill-opacity="0">
      <animate dur="0.01s" id="startAnimation" attributeName="r" values="16; 0" fill="freeze" begin="click" />
      <animate dur="0.01s" attributeName="r" values="0; 16" fill="freeze" begin="reverseAnimation.end" />
    </circle>
    <circle cx="16" cy="16" r="0" fill-opacity="0">
      <animate...

CSS

body {
  background: #111;
  text-align: center;
}

svg {
  margin-top: 45vh;
  width: 40px;
  height: 40px;
  cursor: pointer;
}