let trackLength = hypecurve.getTotalLength();
c1.setAttributeNS(null, "transform", "translate(12.967,349.469)");
// the position on the track at the key times: 11 values
let values = [];
// the position on the track at the key times: 101 values
let values1 = [0];
let keyTimes = [0, 19, 36, 51, 64, 75, 84, 91, 96, 99, 100]; //keyTimes * 100
let keyPoints = [0, 0.35, 0.375, 0.4, 0.45, 0.5, 0.6, 0.61, 0.7, 0.8, 1];
// create the values array
keyPoints.map(p => {
values.push(trackLength * p);
});
// create the values1 array
for (let time = 0; time <100; time++) {
//for every value that the #itr can take
for (let k = 0; k < keyTimes.length - 1; k++) {
//the current value
let curr = values[k];
//the target value
let target = values[k + 1];
// the distance between the current value and the target value
let dist = target - curr;
// detect the interval of time we are in
if (time >= keyTimes[k] && time < keyTimes[k + 1]) {
// the increment for this time interval
let increment = dist / (keyTimes[k + 1] - keyTimes[k]);
// add a new value to the values1 array
values1.push(values1[time]+increment);
// break the loop
break;
}
}
}
itr1.addEventListener("input", () => {
let val = itr1.value;
// get the new position on the curve
let pos = hypecurve.getPointAtLength(values1[val]);
c1.setAttributeNS(null, "transform", `translate(${pos.x},${pos.y})`);
});
svg{width:90vh; display:block;border:1px solid;overflow:visible}
#itr1{width:90vh;}
circle.circle1 {fill: rgb(0,0,22);}
circle.circle1:hover {fill: rgb(0,255,255);}
<svg viewBox="0 0 550 400" >
<!-- draw path and circles -->
<path id="hypecurve" d="M12.967,349.469c15.107-87.283,25.932-180.142,54.214-264.61c31.17-93.095,54.138,17.688,65.096,53.934c11.354,37.558,23.177,74.976,34.309,112.6c26.534,89.679,79.275-25.286,92.183-45.57c11.749-18.462,20.938-43.699,69.798-48.289c70.298-6.604,177.054-4.848,224.858-5.774" fill="none" stroke="#444" stroke-width="3"/>
<circle class= "circle1" id="c1" cx="0" cy="0" r="5" fill="#004" />
</svg>
<p>c1:<br><input type="range" id="itr1" min="0" max="100" value="0" step="1" /></p>