JSFiddle - React, Tailwind, and code Playground

CSS

rect.dotsPattern {
    mask: url(#mask-dots);
}

JavaScript

var svg = d3.select("body").append("svg");

var dotsPatternDefs = svg.append('defs');
    
dotsPatternDefs.append('pattern')
	    .attr('id', 'dotsPattern')
	    .attr('patternUnits', 'userSpaceOnUse')
	    .attr('width', 10)
	    .attr('height', 10)
	  .append('circle')
	    .attr('cx', 5)
	    .attr('cy', 5)
	    .attr('r', 3)
	    .style('fill', 'black');
 
let mask = dotsPatternDefs.append('mask').attr('id', 'mask-dots')
mask.append('rect')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('x', 0)
      .attr('y', 0)
    	.style('fill', 'white'); 
mask.append('rect')
      .attr('width', '100%')
      .attr('height', '100%')
      .attr('x', 0)
      .attr('y', 0)
    	.style('fill', 'url(#dotsPattern)'); 

    
svg.append('rect')
    .attr('class', 'dotsPattern')
    .attr('width', '200')
    .attr('height', '200')
    .attr('x', 0)
    .attr('y', 0)
    .style('fill', '#F189b2');