Circle Stroke Animation

by Chris LaFrombois

HTML

<div class="circle"> 
    
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="80px" height="80px" viewBox="0 0 16 16" preserveAspectRatio="none">
    <circle cx="8" cy="8" r="6.215" transform="rotate(-90 8 8)"></circle>
    </svg>

</div>

<h1>Click me</h1>

CSS

.circle {
    width: 80px;
    height: 80px;
    margin: 50px auto;
}
circle {
    fill: none;
    stroke: #000;
    stroke-width: .5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 39 39;
    stroke-dashoffset: -39;
    transition: stroke-dashoffset 0.3s;
}
.animation circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.3s;
}

JavaScript

$('h1').click(function() {
    $('.circle').toggleClass('animation');
});