JSFiddle - React, Tailwind, and code Playground

HTML

<svg></svg>

JavaScript

var dotSize = 20;

var urls = [
    'https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png'
]

d3.select('svg')
    .append('defs')
        .selectAll('pattern')
        .data(urls)
        .enter()
            .append('pattern')
                .attr({
                    'id': function(d, i){return 'my_pattern_' + i;},
                    'patternUnits':'userSpaceOnUse',
                    'width': dotSize,
                    'height': dotSize
                }).append('image')
                    .attr({
                        'xlink:href': function(d){return d;},
                        'x': 0,
                        'y': 0,
                        'width': dotSize,
                        'height': dotSize
                     })

d3.select('svg').selectAll('circle')
    .data(urls)
    .enter()
        .append('circle')
            .attr('cx', dotSize/2)
            .attr('cy', dotSize/2)
            .attr('r', dotSize/2)
            .attr('fill', function(d, i){return 'url(#my_pattern_'+i+')'})