Animated SVG circle stroke on hover

    0

    0

    <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>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.