<div class="circles">
  <div class="circles__item">
    <div class="circles__ancor circles__ancor--1"></div>
    <svg class="circles__icon" viewBox="0 0 24 24" width="18px"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
    <div class="circles__text">1</div>
  </div>
  <div class="circles__item">
    <div class="circles__ancor circles__ancor--21"></div>
    <div class="circles__ancor circles__ancor--22"></div>
    <div class="circles__text">2</div>
  </div>
  <div class="circles__item">
    <div class="circles__ancor circles__ancor--3"></div>
    <div class="circles__text">3</div>
  </div>
  <div class="circles__item">
    <div class="circles__ancor circles__ancor--4"></div>
    <div class="circles__text">4</div>
  </div>
  <div class="circles__item">
    <div class="circles__ancor circles__ancor--5"></div>
    <div class="circles__text">5</div>
  </div>
</div>

.circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;
}

.circles__icon {
  position: absolute;
  fill: #995de3;
  width: 25%;
}

.circles__item {
  position: relative;
  width: 33.333%;
  padding-bottom: 33.333%;
  /*   outline: 1px solid tomato; */
}

.circles__item:nth-child(1) {
  transform: translateY(-10px);
  background: radial-gradient(
    circle closest-side,
    #fde756 70%,
    transparent calc(70% + 1px)
  );
}

.circles__item:nth-child(1) .circles__icon {
  top: 10%;
  right: 20%;
}

.circles__item:nth-child(2) {
  background: radial-gradient(
    circle closest-side,
    #fde756 85%,
    transparent calc(85% + 1px)
  );
}

.circles__item:nth-child(3) {
  transform: translateY(-20px);
  background: radial-gradient(
    circle closest-side,
    #995de3 75%,
    transparent calc(75% + 1px)
  );
}

.circles__item:nth-child(4) {
  transform: translateY(-10px);
  background: radial-gradient(
    circle closest-side,
    #995de3 75%,
    transparent calc(75% + 1px)
  );
}

.circles__item:nth-child(5) {
  background: radial-gradient(
    circle closest-side,
    #fde756 90%,
    transparent calc(90% + 1px)
  );
}

.circles__ancor {
  position: absolute;
  top: 50%;
  left: 50%;
/*   width: 10px;
  height: 10px;
  background-color: green; */
}

.circles__ancor--1 {
  top: 40%;
}

.circles__ancor--21 {
  left: 40%;
}

.circles__ancor--22 {
  top: 0%;
  left: 70%;
}

.circles__text {
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translate(0, -50%);
  position: absolute;
  font: 5vw / 1 sans-serif;
}

.leader-line {
  z-index: -1;
}

const lineOptions = {
  path: "straight",
  startPlug: "behind",
  endPlug: "behind",
  dash: { len: 8, gap: 8 },
  color: '#040404',
  size: 2,
};

new LeaderLine(
  document.querySelector(".circles__ancor--1"),
  document.querySelector(".circles__ancor--21"),
  lineOptions
);

new LeaderLine(
  document.querySelector(".circles__ancor--21"),
  document.querySelector(".circles__ancor--22"),
  lineOptions
);

new LeaderLine(
  document.querySelector(".circles__ancor--22"),
  document.querySelector(".circles__ancor--3"),
  lineOptions
);

new LeaderLine(
  document.querySelector(".circles__ancor--3"),
  document.querySelector(".circles__ancor--5"),
  lineOptions
);