JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 40 40" >
    <path stroke="#751" fill="#751" stroke-width="1" d="M0 10 h 10 v -10 h 10 v 10 h 10 v 10 h -10 v 10 h -10 v -10 h -10 z" />
          
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 40 40" >
    <path stroke="#751" fill="#751" stroke-width="1" d="M0 10 h 10 v 0 h 10 v 0 h 10 v 10 h -10 v 0 h -10 v 0 h -10 z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 40 40" >
    <path id="shape" fill="#751" stroke="#751" stroke-width="1" d="M0 10 h 10 v -10 h 10 v 10 h 10 v 10 h -10 v 10 h -10 v -10 h -10 z">
          <animate begin="shape.mouseover" attributeName="d" dur="200ms" fill="freeze" to="M0 10 h 10 v 0 h 10 v 0 h 10 v 10 h -10 v 0 h -10 v 0 h -10 z" />
          <animate begin="shape.mouseout" attributeName="d" dur="200ms" fill="freeze" to="M0 10 h 10 v -10 h 10 v 10 h 10 v 10 h -10 v 10 h -10 v -10 h -10 z" />
    </path>
</svg>