HTML
<div class="circle">
<img src="https://en.gravatar.com/userimage/8283692/4c9d9ec1cd3fd02acb5ac9572e3583da?size=200" alt="" />
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" style="enable-background:new -580 439 577.9 194;"
xml:space="preserve">
<circle cx="50" cy="50" r="40" />
</svg>
</div>
LESS
body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.circle{
position:relative;
width:100px;
height:100px;
svg{
fill:none;
stroke:#8a3ab9;
stroke-linecap: round;
stroke-width:3;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: stroke-draw 6s ease-out infinite alternate;
// animation: stroke-draw 6s cubic-bezier(0.77, 0, 0.175, 1) infinite alternate;
}
img{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
width:70px;
border-radius:50%;
}
}
@keyframes stroke-draw {
from{
stroke:#8a3ab9;
stroke-dasharray: 1;
}
to{
stroke:#cd486b;
transform:rotate(180deg);
stroke-dasharray: 8;
}
}
