I need to position circles on a curve in a HTML page, the number of circles can be variable (a minimum of 3 and a maximum of 7) and these should be spaced equally. Each circle is a clickable element that has some functionality, and also just hovering on these circles should show a thumbnail right beside them.

https://i.stack.imgur.com/jC3gE.png

As shown in the above image. The whole design consists of 2 of these curves one on the left and one on the right(I cannot put the whole design here sorry) one approach I can think of is rendering the curve as an SVG and then position the beads (circles) on them but I cannot think of any way to position those elements exactly on the svg. Any kind of help or code which achieves this functionality is a huge help.

Note: I am using Angular, if there's a nice way to do the same in Angular I'd be pretty delighted. I know that this isn't the right place to ask this but any help would be greatly appreciated.

Thanks in Advance