Сверстать треугольную инфографику с динамическими данными

* {
  margin: 0;
  padding: 0;
}

.main {
  --thickness: 6px;
  --offset-top: -12px;
  --offset-right: -8px;
  --background-color: #000;
  --size: 40px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  aspect-ratio: 1 / 1;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  border: var(--thickness) solid black;
  border-radius: 100%;
  width: 4rem;
  padding: 1rem;
  aspect-ratio: 1 / 1;
}

.arrow {
  position: relative;
  width: 300%;
  height: var(--thickness);
  background-color: var(--background-color);
}

.arrow::after {
  content: '';
  position: absolute;
  width: var(--size);
  height: var(--thickness);
  top: var(--offset-top);
  right: var(--offset-right);
  background-color: var(--background-color);
  transform: rotate(45deg);
}

.arrow::before {
  content: '';
  position: absolute;
  width: var(--size);
  height: var(--thickness);
  top: calc(-1 * var(--offset-top));
  right: var(--offset-right);
  background-color: var(--background-color);
  transform: rotate(-45deg);
}

.hint {
  position: relative;
  top: -3rem;
  font-size: 2rem;
}

.main>*:nth-child(1) {
  grid-column: 3;
  grid-row: 1;
}

.main>*:nth-child(2) {
  grid-column: 1;
  grid-row: 3;
}

.main>*:nth-child(3) {
  grid-column: 5;
  grid-row: 3;
}

.main>*:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.main>*:nth-child(5) {
  grid-column: 4;
  grid-row: 2;
}

.main>*:nth-child(6) {
  grid-column: 3;
  grid-row: 3;
}

.main>*:nth-child(7) {
  transform: rotate(120deg);
  grid-column: 2;
  grid-row: 2;
}

.main>*:nth-child(8) {
  transform: rotate(60deg);
  grid-column: 4;
  grid-row: 2;
}

.main>*:nth-child(9) {
  transform: rotate(180deg);
  grid-column: 3;
  grid-row: 3;
}

<div class="main">
  <div class="circle">A</div>
  <div class="circle">B</div>
  <div class="circle">C</div>
  <div class="hint">4</div>
  <div class="hint">4</div>
  <div class="hint">2</div>
  <div class="arrow"></div>
  <div class="arrow"></div>
  <div class="arrow"></div>
</div>