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', 'white');
    
dotsPatternDefs.append('mask')
		.attr('id', 'mask-dots')
	  .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');