SOURCE

const input = document.getElementsByTagName('input')[0];
const label = document.getElementsByTagName('label')[0];
const autoToggle = setInterval(() => {
  input.checked = !input.checked;
}, 3000);
label.onclick = (e) => clearInterval(autoToggle);
input.checked = !input.checked;

const settings = {
  debug: false,
};

const gui = new dat.GUI();
gui.add(settings, 'debug').onChange(function() {
  if (settings.debug) {
    document.body.classList.add('enable-debug');
    document.all.icon.viewBox.baseVal.y = 0;
    document.all.icon.viewBox.baseVal.width = 128;
    document.all.icon.viewBox.baseVal.height = 64;
  } else {
    document.body.classList.remove('enable-debug');
    document.all.icon.viewBox.baseVal.y = 16;
    document.all.icon.viewBox.baseVal.width = 32;
    document.all.icon.viewBox.baseVal.height = 32;
  }
});
gui.close();

<label>
  <input type="checkbox" />
  <svg id="icon" width="192px" height="192px" viewBox="0 16 32 32">
    <g class="icon">
      <g class="debug">
        <path class="top" d="
          M 96, 0
          L 72,24
          C 68,28 60,32 56,32
          L 40,32
          C 36,32 28,24 24,24
          L  0,24
        "></path>
        <path class="middle" d="
          M 56,32
          L  0,32
        "></path>
        <path class="bottom" d="
          M 96,64
          L 72,40
          C 68,36 60,32 56,32
          L 40,32
          C 36,32 28,40 24,40
          L  0,40
        "></path>
      </g>
      <path class="top" d="
        M 96, 0
        L 72,24
        C 68,28 60,32 56,32
        L 40,32
        C 36,32 28,24 24,24
        L  0,24
      "></path>
      <path class="middle" d="
        M 56,32
        L  0,32
      "></path>
      <path class="bottom" d="
        M 96,64
        L 72,40
        C 68,36 60,32 56,32
        L 40,32
        C 36,32 28,40 24,40
        L  0,40
      "></path>
    </g>
    <defs>
      <filter id="gooey">
        <feGaussianBlur
          in="SourceGraphic"
          result="blur"
          stdDeviation="3"
        />
        <feColorMatrix
          in="blur"
          mode="matrix"
          values="
            1 0 0 0 0
            0 1 0 0 0
            0 0 1 0 0
            0 0 0 18 -7
          "
          result="gooey"
        />
        <feBlend
          in2="gooey"
          in="SourceGraphic"
          result="mix"
        />
      </filter>
    </defs>
  </svg>
</label>

html {
  margin: 0;
  padding: 0;
  background: #272a36;
}
label {
  cursor: pointer;
}
label input {
  display: none;
}
svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url("#gooey");
}
path {
  fill: none;
  stroke-linecap: round;
  stroke: #70bd6f;
  stroke-width: 3.5px;
}
.icon {
  transition: all 1000ms cubic-bezier(0.4, 0, 0.6, 1);
  transform: translateX(0px);
}
.top,
.bottom {
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  transition-duration: 1000ms, 1000ms, 500ms;
  transition-property: stroke-dasharray, stroke-dashoffset, transform;
  transition-delay: 0ms;
  stroke-dasharray: 16px 110.21px;
  stroke-dashoffset: -86.21px;
  transform: translateY(0px);
}
.middle {
  transition: all 600ms cubic-bezier(0.5, -0.1, 0.5, 1.1);
  stroke-dasharray: 16px 56px;
  stroke-dashoffset: -32px;
  transition-delay: 300ms;
}
input:checked + svg .icon {
  transform: translateX(-66px);
}
input:checked + svg .top,
input:checked + svg .bottom {
  stroke-dashoffset: -9.9px;
  stroke-dasharray: 19.8px 110.21px;
  transition-delay: 0ms, 0ms, 500ms;
}
input:checked + svg .top {
  transform: translateY(18px);
}
input:checked + svg .bottom {
  transform: translateY(-18px);
}
input:checked + svg .middle {
  stroke-dashoffset: 16px;
  transition-delay: 0ms;
}
.debug {
  display: none;
}
.debug path {
  stroke-dasharray: none !important;
  stroke: #000 !important;
}
.enable-debug .debug {
  display: inherit;
}
.enable-debug .icon {
  transform: translateX(0) !important;
}
.enable-debug svg {
  filter: none;
}