score:1

I'm not entirely sure what you're trying to achieve, but maybe the following code snippet will help you out.

Keep in mind that pattern does exactly what it says, it creates a pattern. So when you fill your circle with the pattern, and then move the circle, it's as if the circle is revealing the tiled pattern of images below. Hopefully that makes more sense once you run my snippet.

d3.select("#cv")
 .attr("height",300)
 .attr("width", 300)
 .style("border", "1px solid red")
 .append("circle")
 .attr("r", 100)
 .attr("cx", 100)
 .attr("cy", 100)
 .attr("stroke", "black")
 .style("fill", "#000")
 .style("fill", "url(#image)")
 .transition()
 .duration(4000)
 .attr("cx", 300)
#cv{
    width: 100%;
  }
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg id="cv">
<defs>
 <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
      <image x="0" y="0" href="https://i.stack.imgur.com/skwGx.jpg" width="200" height="200"></image>
    </pattern>
</defs>
</svg>


Related Query

More Query from same tag