draw diagonal pattern using d3.js using typescript

I want to display diagonal patterns for UTR3. To create bars I have created includeSpotn function.

includeSpotn(feature:string, startPosition: number, endPosition: number, yaxis: number,min:number,max:number) {
let x1 = ((startPosition - min)/(max-min))*100
let x2 =  ((endPosition - min)/(max-min))*100
console.log(feature + " : " + this.pickColorn(feature) + " " + startPosition + " : " + x1 + "|| " + endPosition + " : " + x2)
this.svg
  .append('line') // attach a line
  .style('stroke',  this.pickColorn(feature)) // colour the line
  .style('stroke-width', 10)
  .style("stroke-linecap", "butt")
  .attr('x1', x1*this.scalingFactor) // x position of the first end of the line
  .attr('y1', yaxis) // y position of the first end of the line
  .attr('x2', x2*this.scalingFactor) // x position of the second end of the line
  .attr('y2', yaxis);}

To fill color in those blocks I created pickColorn function

 pickColorn(feat:any) {
pattern.generate(['#1f77b4'])
let colors_feature:any = { UTR5:'red', CDS:'green', Intron:'blue', UTR3: 'orange'}
  return colors_feature[feat]}