JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div class="menu menu-cross">
  <svg viewBox="0 0 12 12">
    <path d="M0,2 12,2 M0,6 12,6 M0,10 12,10" />
  </svg>
</div>

SCSS

.menu {
  cursor: pointer;
  display: inline-block;
  height: 30px;
  margin: 10px;
  width: 30px;
  
  svg {
    stroke: currentColor;
    stroke-width: 2;
    transition: 0.25s;
    width: 100%;
  }
  path {
    transition: d 0.25s;
  }
}

.menu-cross:hover {
  path {
    d: path('M0,0 12,12 M6,6 6,6 M0,12 12,0');
  }
}