const svg = document.querySelector("svg");
const path = document.querySelector("#targetPath");

// Calculate 15 equally spaced points along #targetPath and loop through them
pointsInPath(path, 15).forEach((point) => {
  // Create a circle with a random radius between 2 and 14
  const circleEl = circle(point.x, point.y, 2 + Math.random() * 12, svg);
  // Give the circle a random fill
  circleEl.setAttribute("fill", `hsl(${170 + Math.random() * 60}, 85%, 75%)`);
});

// Create an SVG <circle>
function circle(cx, cy, r, target) {
  const el = document.createElementNS("http://www.w3.org/2000/svg", "circle");

  el.setAttribute("cx", cx);
  el.setAttribute("cy", cy);
  el.setAttribute("r", r);

  target.appendChild(el);

  return el;
}

// Return n equally spaced points plotted along an SVG <path>
function pointsInPath(path, numPoints = 10) {
  const pathLength = path.getTotalLength();
  const step = pathLength / numPoints;
  const points = [];

  for (let i = 0; i < pathLength; i += step) {
    points.push(path.getPointAtLength(i));
  }

  return points;
}