Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow
Created February 14, 2026 09:37
Show Gist options
  • Select an option

  • Save softmarshmallow/07a72ac90a5328e70dd860b790d506b1 to your computer and use it in GitHub Desktop.

Select an option

Save softmarshmallow/07a72ac90a5328e70dd860b790d506b1 to your computer and use it in GitHub Desktop.
Demonstration of SVG marker refX is not arc-length aware
Display the source blob
Display the rendered blob
Raw
<svg width="460" height="200" viewBox="0 0 460 200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Small arrow marker -->
<marker id="arrow"
viewBox="0 0 10 10"
refX="0"
refY="5"
markerWidth="8"
markerHeight="8"
orient="auto">
<!-- HUGE refX sweep while marker stays tiny -->
<animate attributeName="refX"
values="-40; 40; -40"
dur="3s"
repeatCount="indefinite" />
<path d="M0,0 L10,5 L0,10 Z" fill="black"/>
</marker>
</defs>
<!-- Curved path -->
<path d="M40,150 C150,10 310,10 420,150"
fill="none"
stroke="black"
stroke-width="4"
marker-end="url(#arrow)" />
</svg>
@softmarshmallow
Copy link
Author

This demo animates a small arrow marker’s refX across a large range on a curved path.
The arrow visibly detaches from the endpoint instead of sliding along the curve, proving that:

refX is applied as a simple post-translation in marker space after orientation is solved,
not as a geometric movement along the path’s arc length or local frame.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment