Placing some offset directional arrows along a path, take 1.
marker-segment and marker-pattern should make this easier eventually.
-
-
Save git-ashish/424fa5f3dc9059a210e9a587e3ad243f to your computer and use it in GitHub Desktop.
Directional arrows
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke: #fc0; | |
| stroke-width: 2px; | |
| } | |
| #arrow path { | |
| stroke-width: 1px; | |
| stroke: #444; | |
| } | |
| #arrow .arrowhead { | |
| stroke: none; | |
| fill: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="960" height="500"> | |
| <defs> | |
| <g id="arrow"> | |
| <path d="M-10,0 L10,0" /> | |
| <path class="arrowhead" d="M10,0 L2.5,-3 L2.5,0 Z"/> | |
| </g> | |
| </defs> | |
| <path id="loop" d="M636.5,315c-0.4-18.7,1.9-27.9-5.3-35.9 | |
| c-22.7-25-107.3-2.8-118.3,35.9c-7,24.4,20.6,37.2,16,71c-4,29.6-30.8,60.7-56.5,61.1c-30.8,0.4-32.9-43.8-81.7-70.2 | |
| c-50.9-27.6-110.1-12.9-125.2-9.2c-66.1,16.4-82.2,56.9-109.2,47.3c-38-13.6-55.9-112.1-19.8-143.5c39-34,121.2,27.7,148.1-3.8 | |
| c18-21.1,3.1-74.3-25.2-105.3c-31.1-34.1-70.1-32.4-105.3-76.3c-8.2-10.2-16.9-23.8-15.3-39.7c1.2-11.4,7.5-23.3,15.3-29 | |
| c33.8-25,101.6,62.6,193.1,59.5c40.1-1.3,38.7-18.5,99.2-38.9c126.2-42.6,242.4-4.9,297.7,13c54.7,17.7,105.4,35,129.8,82.4 | |
| c13,25.3,22.9,67.7,4.6,87c-11.6,12.3-25.1,5.1-46.6,20.6c-2.8,2-28.9,21.4-32.1,49.6c-3.1,27.4,18.7,35,29,70.2 | |
| c8.8,30.1,8.5,77.8-18.3,99.2c-32.3,25.8-87,0.6-100-5.3c-69.6-32-67.2-88.4-73.3-109.2z"/> | |
| </svg> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var path = document.getElementById("loop"), | |
| length = path.getTotalLength(); | |
| d3.select("svg").selectAll("use") | |
| .data(d3.range(25)) | |
| .enter() | |
| .append("use") | |
| .attr("xlink:href", "#arrow") | |
| .each(draw); | |
| function draw(d) { | |
| var l = length * d / 25, | |
| angle = angleAtLength(l), | |
| point = pointAtLength(l); | |
| point[0] = point[0] + 6 * Math.cos(angle - Math.PI / 2); | |
| point[1] = point[1] + 6 * Math.sin(angle - Math.PI / 2); | |
| d3.select(this) | |
| .attr("transform", "translate(" + point + ") rotate(" + (angle * 180 / Math.PI) + ")"); | |
| } | |
| function pointAtLength(l) { | |
| var xy = path.getPointAtLength(l); | |
| return [xy.x, xy.y]; | |
| } | |
| // Approximate tangent | |
| function angleAtLength(l) { | |
| var a = pointAtLength(Math.max(l - 0.01,0)), // this could be slightly negative | |
| b = pointAtLength(l + 0.01); // browsers cap at total length | |
| return Math.atan2(b[1] - a[1], b[0] - a[0]); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment