Animated SVG circle stroke on hover

Audrius K
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="blue" stroke-width="1" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent"
    stroke="red" stroke-width="2" />
</svg>

<style>
  .another-circle {
    stroke-dasharray: 227;
    stroke-dashoffset: 227;
    transition: stroke-dashoffset 0.5s ease-in-out;
  }

  .another-circle:hover {
    stroke-dashoffset: 0;
  }
</style>