<svg width="200" height="200">
<mask id='pie'>
<circle id="circle" r="15.91" stroke-dasharray="55,100"/>
</mask>
<image width="100%" height="100%" mask="url(#pie)" xlink:href="https://source.unsplash.com/X7UR0BDz-UY/200x200"/>
</svg>
#circle
{
fill: none;
stroke: white;
stroke-width: 32px;
transform: translate(100px, 100px) rotate(-90deg) scale(3.14);
}
View Compiled
const circle = document.getElementById('circle');
document.body.addEventListener('mousemove', (e) => {
const percentage = e.offsetX/2;
circle.setAttribute('stroke-dasharray', `${percentage},100`);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.