Div align on the curve path (SVG) / css or react.js

enter image description here

How to arrange icons along the curve..

As you can see (image description), if I click plus button on the bottom bar, I could add like new "adrina" icon (it is contained in the div box)

I want these aligned on the curve 1 // I used flex-wrap css so that it showed aligned vertically on one screen. And when the icon is added continuously, if the height is full, the icon is moved to the next column due to flex wrap. but i want to aligned them on the next new curve 2...curve3...

curve.1

<svg width="100%" height= "100%" viewBox=" 0 0 200 200" className="graph">
      <circle 
      cx="0"
      cy="100"
      r="196"
      fill="none"
      stroke="#707070"
      strokeWidth="0.4"
      strokeDasharray={`${2 * Math.PI * 196 * 0.4} ${2 * Math.PI * 196 * 0.6}`}
      strokeDashoffset={2 * Math.PI * 196 * 0.2}/></svg>

curve.2

<svg width="100%"  viewBox=" 0 0 200 200" className="graph">
      <circle 
      cx="0"
      cy="100"
      r="104"
      fill="none"
      stroke="#707070"
      strokeWidth="0.2"
      strokeDasharray={`${2 * Math.PI * 104 * 0.2} ${2 * Math.PI * 104 * 0.8}`}
      strokeDashoffset={2 * Math.PI * 104 * 0.1}/>
        </svg>

curve.3

<svg width="100%"  viewBox=" 0 0 200 200" className="graph">
      <circle 
      cx="-10"
      cy="100"
      r="68"
      fill="none"
      stroke="#707070"
      strokeWidth="0.2"
      strokeDasharray={`${2 * Math.PI * 68 * 0.4} ${2 * Math.PI * 68 * 0.6}`}
      strokeDashoffset={2 * Math.PI * 68 * 0.2}/>
        </svg>