Create a hover circle with rotating stroke animation

by phloe

HTML

<svg stroke="#333" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <style>
    :root {
      --l: 70.6;
    }
    circle, g {
      transition: cubic-bezier(.2,0,.2,1) 0.3s all;
    }
    circle {
      stroke-dasharray: calc(var(--l) / 4) 0 calc(var(--l) / 4) calc(var(--l) / 2);
      stroke-dashoffset: calc(var(--l) / 4);
    }
    :hover circle {
      stroke-dasharray: calc(var(--l) / 4) calc(var(--l) / 2) calc(var(--l) / 4) 0;
      stroke-dashoffset: calc(var(--l) / 2);
    }
    :hover g {
      transform: translateX(6px);
    }
  </style>
		<circle cx="12" cy="12" r="11.25" fill="none" stroke-width="0.75" stroke-linecap="round">
		</circle>
    <g stroke-width="0">
      <rect x="3" y="10.5" width="12" height="3" rx="1.5" fill="#333333"/>
      <rect x="9.26123" y="5.64014" width="9" height="3" rx="1.5" transform="rotate(45 9.26123 5.64014)" fill="#333333"/>
      <rect x="7.14014" y="16.2339" width="9" height="3" rx="1.5" transform="rotate(-45 7.14014 16.2339)" fill="#333333"/>
    </g>
</svg>