<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
<marker id="square" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="5" markerHeight="5">
<rect width="10" height="10"
style="fill:rgb(0,0,0);stroke-width:1;
stroke:rgb(0,0,0)"/>
</marker>
</defs>
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#arrow)" marker-end="url(#arrow)" />
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#square)" marker-mid="url(#dot)" marker-end="url(#arrow)" />
</svg>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.