JSFiddle - React, Tailwind, and code Playground

JavaScript

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

svg
  .append('defs')
  .append('pattern')
    .attr('id', 'diagonalHatch')
    .attr('patternUnits', 'userSpaceOnUse')
    .attr('width', 10)
    .attr('height', 10)
  .append('path')
    .attr('d', 'M-1,1 l2,-2 M0,10 l10,-10')
    .attr("fill","none") 
    .attr("stroke","#666") 
    .attr("stroke-width","1") 
    .attr("stroke-miterlimit","10");

svg.append("rect")
    .attr("x", 0)
    .attr("width", 50)
    .attr("height", 500)
    .attr('fill', 'url(#diagonalHatch)')
    .attr("stroke-width","0.7")
    .attr("stroke","#000");