Как добавить динамическое количество кругов вокруг другого круга, используя css и реагировать

Question

Я сопоставляю свои реквизиты для отображения элементов, отформатированных в виде круга.Каждый элемент имеет имя, изображение и несколько других атрибутов, называемых категориями.Количество категорий отличается для каждого элемента.Я хотел бы отобразить каждую категорию в виде меньшего круга с фиксированной высотой, шириной, начальной точкой, который лежит за пределами круга основного элемента слева от центра.Для каждого нового атрибута я хочу, чтобы они следовали по внешнему пути круга и вверх.Они не должны влиять на размер или положение любого элемента в основном круге.Вы можете видеть фотографии того, чего я пытаюсь достичь, и мой текущий результат внизу.

Основная тема этого вопроса - динамическое положение маленьких кружков для категорий.

Желаемый результат.

То, что у меня пока есть .. JSX

render() {
    return (
      <Fragment>
        <div className="row" id="ads">
          {this.props.items.map(item => (
            <div className="circle rounded-circle col-md-4 col-lg-3 mt-5">
              <div className="card">
                <div className="card-image">
                  <div>
                    {item.flavor.map(flavor => (
                      <div className="card-attribute">{flavor}</div>
                    ))}
                  </div>
                  {item.category.map(category => (
                    <div className="card-attribute">{category}</div>
                  ))}
                  <img
                    className="rounded mx-auto d-block"
                    src="https://img.icons8.com/ios/100/000000/paprika.png"
                    alt=" Text"
                  />
                </div>
                <div className="card-image-overlay m-auto" />
                <div className="card-body text-center">
                  <div className="ad-title m-auto">
                    <h5>{item.item}</h5>
              </div>
            </div>
          ))}
        </div>
      </Fragment>
    );
  }
}

CSS

.circle {
  border-radius: 50%;
  height: 250px;
  width: 250px;
}

.card {
  border-radius: 50%;
  height: 250px;
  width: 250px;
}

.card-attribute {
  position: relative;
  background: #5bc0be;
  border-radius: 50%;
  text-align: center;
  color: #000;
  font-size: 14px;
  width: 50px;
  height: 50px;
  padding: 15px 0 0 0;
}

Это то, что отображается сейчас, как вы можете видетькатегории находятся внутри основного круга и отталкивают другие элементы, они отображаются в виде вертикальной линии, а не вокруг круга.