Published
Edited
Mar 12, 2020
vsw1 = {
let p0 = svg1.getElementById("path");
let T = p0.getTotalLength();
let dash = T / n; // basic dash unit
let SW = p0.getAttribute("stroke-widths").match(/\d+/g); // grab stroke-widths into an array
let n_1 = n - 1;
for (let i = 0; i < n; i++) {
let p = i / n_1;
let sw = lerp(p, SW[0], SW[1]); // current stroke width
let da = (i + 1) * dash + "," + T; // current dash array
let c = toCss(lerpA(p, [0, 0, 255], [0, 255, 255])); // current colour to trace dashes
let newP = p0.cloneNode(true);
newP.setAttribute(
"style",
`stroke-width:${sw};stroke-dasharray:${da};stroke:${c}`
);
svg1.getElementById("g").appendChild(newP);
}
}
vsw2 = {
let p0 = svg2.getElementById("path");
let T = p0.getTotalLength();
let dt = T / n; // basic dash unit
let dash = dt + 1 + "," + T; // basic dash unit increase by 1 to cover seams
let SW = p0.getAttribute("stroke-widths").match(/\d+/g); // grab stroke-widths into an array
p0.setAttribute('stroke-dasharray', dash);
let n_1 = n - 1;
for (let i = 0; i < n; i++) {
let p = i / n_1;
let sw = lerp(p, SW[0], SW[1]); // current stroke width
let off = -i * dt; // current dash offset
let c = toCss(lerpA(p, [0, 0, 255], [0, 255, 255])); // current colour to trace dashes
let newP = p0.cloneNode(true);
newP.setAttribute(
"style",
`stroke-width:${sw};stroke-dashoffset:${off};stroke:${c}`
);
svg2.getElementById("g").appendChild(newP);
}
}
lerp = (p, a, b) => Number(a) + (b - a) * p
lerpA = (p, a, b) => a.map((x, i) => lerp(p, x, b[i]));
toCss = a => "rgb(" + a.map(d => Math.round(d)).join() + ")"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
