<svg width="500" height="500" viewBox="0 0 500 500">
  <defs>
    <marker id="ball" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <circle cx="5" cy="5" r="5" fill="black" />
    </marker>
<!--     arrow head marker -->
    <marker id="arrowhead" orient="auto" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <polygon points="0,0 10,5 0,10" fill="black" stroke="black" />
    </marker>
<!--     arrow head using auto reverse -->
    <marker id="arrowhead_ar" orient="auto-start-reverse" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <polygon points="0,0 10,5 0,10" fill="black" stroke="black" />
    </marker>
<!--     block marker using 90deg orientation -->
    <marker id="block" orient="90deg" refX="5" refY="5" markerWidth="10" markerHeight="10">
      <rect x="0" y="0" width="10" height="10" fill="black" />
    </marker>
  </defs>

  <polyline marker-start="url(#ball)" marker-end="url(#arrowhead)" stroke="black" strokeWidth="2" fill="none" points="50, 100 250,50" />
  
  <polyline marker-start="url(#block)" marker-end="url(#arrowhead)" marker-mid="url(#ball)" stroke="black" strokeWidth="2" fill="none" points="50,150 150,150 250,150 350,150 450,150" />
  
  <polyline marker-start="url(#arrowhead_ar)" marker-end="url(#arrowhead)" stroke="black" strokeWidth="2" fill="none" points="50, 200 250,250" />
  
  <polyline marker-start="url(#ball)" marker-end="url(#arrowhead)" stroke="black" marker-mid="url(#block)" strokeWidth="2" fill="none" points="50,350 250,300 300,400 400,200 450,400" />
</svg>