JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
    <defs>
        
        <symbol id="rack">
        <rect height="50" width="50" rx="5" ry="5" fill="#C9CFD6" stroke="#505356" stroke-width="3" />
        <line x1="8"  y1="8" x2="36" y2="40" stroke="#505356" />
        <line x1="36"  y1="8" x2="8" y2="40" stroke="#505356" />
        </symbol>
        
        <!-- using this pattern looks blurry!!! -->
        <pattern id="rack_pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
        <use xlink:href="#rack" />
        </pattern>
    
    </defs>
</svg>

JavaScript

// blurry using fill
var svg = d3.select("body").style("background-color", "black")
    .append("svg")
    .attr("width", 900)
    .attr("height", 500)
    .attr("viewBox", "0 0 3700 500")

svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("height", 300)
    .attr("width", 3500)
    .attr("fill", "url(#rack_pattern)");


var data = [];
for (var r=0; r<7 ;r++) {
    for (var c=1; c<71; c++) {
        data.push(
            {
                x: 3500 - (c * 50),
                y: (r * 50) + 320
                
            }
        );
    };
};

// clearer adding iteratively
var clear_section = svg.selectAll("use")
    .data(data).enter()
    .append("use")
    .attr("xlink:href", "#rack")
    .attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; });