JSFiddle - React, Tailwind, and code Playground

JavaScript

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

svg
  .append('defs')
  .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');
  

svg.append("rect")
      .attr("x", 0)
      .attr("width", 100)
      .attr("height", 100)
      .style("fill", 'blue');
  
svg.append("rect")
    .attr("x", 0)
    .attr("width", 100)
    .attr("height", 100)
    .attr('fill', 'url(#dotsPattern)');