This SVG example illustrates how to create curved arrows with oriented arrowhead markers.

ArrowPaths.svg

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200">
  <defs>
    <marker id="idArrowhead" viewBox="0 0 10 10" refX="1" refY="5"
        markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
      <!-- It appears that "context-stroke" is not implemented in Chrome yet. -->
      <path d="M 0 0 L 10 5 L 0 10 z" fill="context-stroke" />
    </marker>
  </defs>
  <g fill="none" stroke-width="10" marker-end="url(#idArrowhead)">
    <path stroke="lightgray" d="M 50,150 C 200,150 200,50 350,50" />
    <path stroke="gray" d="M 350,150 C 200,150 200,50 50,50" />
  </g>
</svg>

Output