<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`);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.