marker

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // path based version version
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)

svg.append("path")
    		.attr('d', generatePath(200, 200, 45, 63, 80))
    		.attr('fill', 'red')
    		//.attr('transform', `rotate(180 200 200)`);
    
    
    
    // area based version version
    let area = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);
    
     // area based version version
    let area2 = d3.area()
                    .x((d) => { return d.x; })
                    .y1((d) => { return d.y; })
                    .y0((d) => { return 0; })
                    .curve(d3.curveBasis);
    
    let dx = 43;
    let dy = 42;
    let s = 80;
    
    let x = 200;
    let y = 81;
    
    let points = [{x: x, y: y}, {x: x + dx, y: y - dy}, {x: x, y: y - s}, {x: x - dx, y: y -dy}, {x: x, y: y} ];
    
    svg.append('path')
    	//.datum(points)
    	.attr('d', area(generateD3AreaPoints(35)))
    	.style('fill', '#35a993')
    	.attr('transform', `translate(180 200 )`);
    
    
    svg.append('path')
    	.attr('d', area2(points))
    	.style('fill', '#35a993')
    	.attr('transform', `translate(300 200 )`);
    
    
    function generateD3AreaPoints (ySize) {
            //Reference marker : 51, 46, 25 - that's a good shape found by Mohamed
            //which gives a 102px marker

var refXExtend = 51;
            var refYExtend = 46;
            var refYTail = 25;
            var refYSize = 102;

var xExtend = refXExtend * ySize / refYSize;
            var yExtend = refYExtend * ySize / refYSize;
            var yTail = refYTail * ySize / refYSize;
            return generateAreaPoints(xExtend, yExtend, yTail);
        };
    
    function generateAreaPoints(xExtend, yExtend, yTail) {
            var x = 0;
            var y = 0;
            var yCenter = y - yTail - yExtend;
            var yTop = y - yTail - 2 * yExtend;

</script>
</body>

https://d3js.org/d3.v4.min.js