31:[] 2f:{"title":"Swoopy arrows along a path","cells":[{"id":0,"value":"md`# Swoopy arrows along a path`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`Animating arrows along an arbitrary path. Basically a combination of Seamless animated dash and Animating along a path - tweens the stroke-dashoffset on a loop and computes the translate/rotation of the arrowheads at the same time. Performance is not great, especially in Firefox…\n\nSee also: [Directional arrows](http://bl.ocks.org/veltman/2ffca9dfddbfe67dc8e70a08fa429d6b)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"html`Taken from Noah Veltman's block`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"stylesheet = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"svg = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"path = {\n \tawait svg;\n\treturn document.getElementById(\"swoopy\");\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"totalLength = path.getTotalLength()","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"group = totalLength / 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"{\n path.style.strokeDasharray = \"50,\" + (group - 50);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"arrowheads = d3.select(\"svg\").selectAll(\"use\")\n .data(d3.range(20).map(d => d * group + 50 ))\n .enter()\n .append(\"use\")\n .attr(\"xlink:href\", \"#arrowhead\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"update = {\n\tvar start;\n function update(t) {\n if (!start) {\n start = t;\n }\n\n var offset = -group * ((t - start) % 900) / 900;\n\n path.style.strokeDashoffset = offset;\n\n arrowheads.attr(\"transform\", d => {\n let l = d - offset;\n\n if (l < 0) {\n l = totalLength + l;\n } else if (l > totalLength) {\n l -= totalLength;\n }\n\n const p = pointAtLength(l);\n return `translate(${p}) rotate(${angleAtLength(l)})`;\n });\n\n requestAnimationFrame(update);\n\t}\n return update;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"function pointAtLength(l) {\n\n var xy = path.getPointAtLength(l);\n return [xy.x, xy.y];\n\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// Approximate tangent\n function angleAtLength(l) {\n\n var a = pointAtLength(Math.max(l - 0.01,0)), // this could be slightly negative\n b = pointAtLength(l + 0.01); // browsers cap at total length\n\n return Math.atan2(b[1] - a[1], b[0] - a[0]) * 180 / Math.PI;\n\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"requestAnimationFrame(update)","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}