circle stroke hover

by Grzegorz Matyszewski

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="220px" height="220px" viewBox="0 0 220 220" enable-background="new 0 0 220 220" xml:space="preserve">
    <circle id="bg" fill="#EEEEEE" cx="110" cy="110" r="110"/>
    <circle id="outer" fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" cx="110" cy="110" r="100"/>
    <circle id="inner" fill="none" stroke="#333333" stroke-width="20" stroke-miterlimit="10" cx="110" cy="110" r="80"/>
    <text x="60" y="115" font-family="'Lucida Grande', sans-serif" font-size="22">Hover me!</text>
</svg>

CSS

svg {
    cursor: pointer;
}
svg circle {
    -webkit-transition: stroke-dashoffset 0.5s ease;
     -moz-transition: stroke-dashoffset 0.5s ease;
       -o-transition: stroke-dashoffset 0.5s ease;
          transition: stroke-dashoffset 0.5s ease;
    
    
}
svg circle#outer {
    stroke-dasharray: 628;
    stroke-dashoffset: 628;
}
svg circle#inner {
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    transition-delay: 0.1s;
}
svg:hover circle#inner {
    stroke-dashoffset: 100;
}
svg:hover circle#outer {
    stroke-dashoffset: 50;
}