Skip to content

Instantly share code, notes, and snippets.

@redblobgames

redblobgames/svg-arrowhead.html

Created March 7, 2017 22:34
Show Gist options
  • Save redblobgames/385e4ef4e3ff743e8fae9cb65364f23a to your computer and use it in GitHub Desktop.
Save redblobgames/385e4ef4e3ff743e8fae9cb65364f23a 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