<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- arrowhead marker definition -->
<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>
<!-- simple dot marker definition -->
<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>
</defs>
<!-- Coordinate axes with a arrowhead in both direction -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black"
marker-start="url(#arrow)" marker-end="url(#arrow)" />
<!-- Data line with polymarkers -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="blue"
marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" />
</svg>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.