<svg class='line-example' viewBox='0 0 100 100'>
    <path
          stroke-width='2'
          stroke-linecap='round'
          fill='none'
          d='m6.33 14.9s-2.94-10.7 6.38-6.58c9.9 4.4-9.67 42.1 2.28 46.2 12 4.04-1.81-47.3 9.11-43.7 10.9 3.65-13.2 19.7 14.7 12.1 27.9-7.53 36.1-1 6.99 20.8-29.1 21.8 1.48 48.9 3.13 29.9 1.99-22.7 41.2-25.3 33-17.9-3.44 3.1-12.4 2.64-14.5 16.6-2.16 14 12.7 12.8 12 2.78-1.42-20 24-9.39 13.2-0.282-8.44 7.12-13.3 19.5-6.65 18.2 6.92-1.31 8.04-8.57 8.04-8.57'
          />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
    <circle r='3' />
</svg>

body {
    background: #0d1b2a;
}

.line-example {
    display: block;
    height: 80vmin;
    width: 80vmin;
    margin: 10vmin auto;
}

.line-example path {
    stroke: #415a77;
}

.line-example circle {
    fill: #778da9;
    cursor: pointer;
    transition: fill .2s ease-in-out;
}

.line-example circle:hover {
    fill: #e0e1dd;
}

function putCircleOnPath(path, circle, percent) {
    const length = path.getTotalLength();
    const point = path.getPointAtLength(length * percent / 100);

    circle.setAttribute('cx', point.x);
    circle.setAttribute('cy', point.y);
}

function main() {
    const example = document.querySelector('.line-example');
    const path = example.querySelector('path');
    const circles = example.querySelectorAll('circle');

    circles.forEach((circle, index) => {
        putCircleOnPath(path, circle, index * 10);
    });
}

main();