SVG clip-path Hover Effect

jsbin - SVG clip-path Hover Effect

*{
  margin: 0;
  padding: 0;
}

svg {
  border: 1px dashed tomato;
  border-radius: 5px;
  cursor: pointer;
}
circle {
  transition: all .3s;
}
svg:hover circle {
  transition: initial;
}

window.onload = function(){
  const imageSvg = document.getElementById("image");
  const circle = document.getElementById("circle");
  imageSvg.addEventListener("mouseover", function(e){
    circle.setAttribute("r", 150);
  })
  imageSvg.addEventListener("mousemove", function(e){
    circle.setAttribute("cx", e.clientX);
    circle.setAttribute("cy", e.clientY);
  });
  imageSvg.addEventListener("mouseout", function(e){
    circle.setAttribute("r", 0);
  })
}