Как нарисовать такую фигуру на D3?

shape(35, 100, 30, 60);     
shape(125, 100, 30, 90);   
shape(235, 100, 50, 60); 
shape(325, 100, 10, 60);  
shape(375, 100, 10, 160);  
shape(475, 100, 35, 110);  
 
// x центра, y центра, радиус, общая высота 
function shape(cx, cy, r, h) { 
   
  let dy = cy + r/2 - h/2; 
   
  let d = ` 
    M${cx+r},${dy} 
    v${h} h${-r*2} v${-h} 
    a${r},${r},0,0,1,${r*2},0  
  `; 
 
  svg = d3.select('svg'); 
 
  svg.append("path")       
      .attr("stroke", "green") 
      .attr('fill', 'none') 
      .attr('stroke-width', 3) 
      .attr('d', d); 
   
  // все ниже нужно только для подсказок 
  svg.append('path') 
     .attr("stroke", "red") 
     .attr('fill', 'none') 
     .attr('marker-start','url(#triangle2r)') 
     .attr('marker-end','url(#triangle1r)') 
     .attr('d', `M${cx},${dy},v${h}`) 
   
  svg.append('path') 
     .attr("stroke", "blue") 
     .attr('fill', 'none') 
     .attr('marker-end','url(#triangle1b)') 
     .attr('marker-start','url(#triangle2b)') 
     .attr('d', `M${cx},${dy},l${Math.cos(1)*r},-${Math.sin(1)*r}`) 
   
  svg.append('circle') 
     .attr('cx', cx) 
     .attr('cy', cy) 
     .attr('r', 2) 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
<svg viewBox="0 0 600 200" height="90vh"> 
   <defs> 
    <marker id="triangle1r" viewBox="0 0 10 10" refX="9" refY="5"  
          markerWidth="5" markerHeight="5" orient="auto"> 
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/> 
    </marker> 
    <marker id="triangle2r" viewBox="0 0 10 10" refX="1" refY="5"  
          markerWidth="5" markerHeight="5" orient="auto"> 
      <path d="M 10 0 L 0 5 L 10 10 z" fill="#f00"/> 
    </marker> 
    <marker id="triangle1b" viewBox="0 0 10 10" refX="9" refY="5"  
          markerWidth="5" markerHeight="5" orient="auto"> 
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#00f"/> 
    </marker> 
    <marker id="triangle2b" viewBox="0 0 10 10" refX="1" refY="5"  
          markerWidth="5" markerHeight="5" orient="auto"> 
      <path d="M 10 0 L 0 5 L 10 10 z" fill="#00f"/> 
    </marker> 
</defs>  
</svg>