SVG circle

by Ankit Patidar

HTML

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

CSS

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 30s linear;
}
.another-circle:hover {
  /* stroke-dashoffset: 227; */
}