Draw arrows between two circles using svg

Question

I am using svg to draw several arcs with arcs on the end between 2 circles with the help of Bezier quadratic path. Here is the final effect I want to achieve. http://www.apcjones.com/arrows/

I already had some idea about how to draw several arcs(without arrows) between two circles.

But when I tried to draw several arcs(with arrows on the end) between 2 circles, something weird happened. I am using here and I set refX to "radius" of the circle to offset the line inside the circle. But I soon realized that simply using refX does not solve the problem, the angle of the marker should also be adjusted(I do not know how).

current effect

Thanks for the help!

Answer 1

In this case you may need to use markers .

 <svg width="200" height="100" viewBox="0 0 200 100"> <defs> <desc>Define the marker</desc> <marker id="arrow" refX="4" refY="3" markerWidth="6" markerHeight="6" orient="auto" stroke="black"> <path d="M 0 0 L 4 3 L 0 6 Z"></path> </marker> </defs> <desc>Use the markers</desc> <circle cx="160" cy="50" r="20" /> <circle cx="50" cy="50" r="20" /> <line x1="70" y1="50" x2="140" y2="50" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)"></line> </svg> 

If you need more help please edit your question and add your SVG code