Skip to content

Instantly share code, notes, and snippets.

@Azgaar

Azgaar/svg-arrowhead.html

Forked from redblobgames/svg-arrowhead.html
Created April 16, 2018 18:33
Show Gist options
  • Save Azgaar/f6c3c3961106e36ec701688b4371aa0f to your computer and use it in GitHub Desktop.
Save Azgaar/f6c3c3961106e36ec701688b4371aa0f to your computer and use it in GitHub Desktop.
Download ZIP
SVG arrowhead example
Raw
svg-arrowhead.html
<!DOCTYPE html>
<html>
<svg width="80%" height="80%" viewBox="-100 -100 200 200">
<!-- Need this definition to make an arrowhead, from https://www.w3.org/TR/svg-markers/ -->
<defs>
<marker id="red-arrowhead" viewBox="0 0 10 10" refX="7" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" stroke="none" fill="red"/>
</marker>
</defs>
<!-- example of lines with arrowheads: the size of the arrowhead will vary but you need a separate def per color -->
<path d="M -50,50 Q -50,-50 50,20" stroke="red" fill="none" marker-end="url(#red-arrowhead)"/>
<path d="M 50,-50 Q 80,0 40,80" stroke="red" stroke-width="3" fill="none" marker-end="url(#red-arrowhead)"/>
</svg>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment