JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="600" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative;">      
    
    <image x="111" y="110" width="120" height="120" preserveAspectRatio="none" xlink:href="https://lh3.googleusercontent.com/-0afLqDT73Yk/AAAAAAAAAAI/AAAAAAAAAH0/wf_rwvjAuOY/s120-c/photo.jpg" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" fill="#008000" mask="url(#mask)"></image>
    
</svg>

JavaScript

var mask = document.createElementNS("http://www.w3.org/2000/svg", 'mask');
var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');

circle.setAttribute("cx", "0.5");
circle.setAttribute("cy", "0.5");
circle.setAttribute("r", "0.5");
circle.setAttribute("fill", "white");

mask.setAttribute("maskUnits","objectBoundingBox");
mask.setAttribute("maskContentUnits","objectBoundingBox");
mask.setAttribute("id", "mask");
mask.setAttribute("x", "0");
mask.setAttribute("y", "0");
mask.setAttribute("width", "1");
mask.setAttribute("height", "1");

mask.appendChild(circle);

document.getElementsByTagName("svg")[0].appendChild(mask);