Marker-based arrow
The arrowhead is defined as an SVG marker, so the output demonstrates the standard marker-end pattern.
Use cases
Use it in diagrams, callouts, onboarding illustrations, and documentation examples.
Generate a curved SVG arrow with a reusable marker arrowhead.
Page context
SVG Arrow Generator creates a curved arrow SVG with a reusable marker arrowhead.
The arrowhead is defined as an SVG marker, so the output demonstrates the standard marker-end pattern.
Use it in diagrams, callouts, onboarding illustrations, and documentation examples.
Generate a curved SVG arrow with a reusable marker arrowhead.
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="120" viewBox="0 0 360 120" role="img" aria-label="Generated SVG arrow"><defs><marker id="arrowhead" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto"><path d="M2 2 L10 6 L2 10 Z" fill="#0f766e"/></marker></defs><path d="M32 72 C104 24 218 24 320 72" fill="none" stroke="#0f766e" stroke-width="10" stroke-linecap="round" marker-end="url(#arrowhead)"/><circle cx="32" cy="72" r="8" fill="#f59e0b"/></svg>