🏠 back to Observable

Arrowhead Puzzle

Why can’t I get the arrowhead in this picture to:

  • have a rounded line join so it has a round “tip”
  • have rounded ends

And why is the upper branch of the arrow truncated slightly?

<marker> elements have their own viewBox. Because your path coordinates start right at the edge of the marker’s viewBox, part of the stroke width (and its caps) gets cut off.

Either try offsetting your path coordinates so that they lie within the viewBox, or add a viewBox attribute to the marker in which you slightly increase the visible area.