JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg id="mySvg" width="10" height="100">
      <defs id="mdef">
        <pattern id="image1" x="0" y="0" height="10" width="10">
          <image x="0" y="0" width="110" height="110" xlink:href="https://lh5.googleusercontent.com/-UvnfkYbS9is/U9WsLwacZcI/AAAAAAAAW3k/2sRFWRLfWms/w1116-h628-no/IMG_20140727_125757788_HDR.jpg"></image>
        </pattern>
        <pattern id="image2" x="0" y="0" height="10" width="10">
            <image x="-39" y="-45" width="200" height="200" xlink:href="https://lh5.googleusercontent.com/-UvnfkYbS9is/U9WsLwacZcI/AAAAAAAAW3k/2sRFWRLfWms/w1116-h628-no/IMG_20140727_125757788_HDR.jpg"></image>
        </pattern>
        <pattern id="image3" x="0" y="0" height="10" width="10">
            <image x="0" y="0" width="110" height="110" xlink:href="https://lh5.googleusercontent.com/-UvnfkYbS9is/U9WsLwacZcI/AAAAAAAAW3k/2sRFWRLfWms/w1116-h628-no/IMG_20140727_125757788_HDR.jpg"></image>
        </pattern>
  </defs>
</svg>
</body>

JavaScript

var svg = d3.select("body").append("svg").attr("height", "450px").attr("width", "450px")

svg.append("circle")
         .attr("cx", 100)
         .attr("cy", 200)
         .attr("r", 55)
         .style("fill", "transparent")       // this code works OK
         .style("stroke", "black")     // displays small black dot
         .style("stroke-width", 0.25)
         .style("fill", "url(#image1)");

svg.append("circle")
         .attr("cx", 100)
         .attr("cy", 335)
         .attr("r", 55)
         .style("fill", "transparent")       // this code works OK
         .style("stroke", "black")     // displays small black dot
         .style("stroke-width", 0.25)
         .style("fill", "url(#image2)");

svg.append("rect")
         .attr("x", 45)
         .attr("y", 5)
         .attr("height", 110)
         .attr("width", 110)
         .style("fill", "transparent")       // this code works OK
         .style("stroke", "black")     // displays small black dot
         .style("stroke-width", 0.25)
         .style("fill", "url(#image3)");