<div class="grid">
  <div class="grid__item grid__item--1">
    <div class="grid__marker"></div>
    <div class="grid__text">1</div>
  </div>
  <div class="grid__item grid__item--2">
    <div class="grid__marker"></div>
    <div class="grid__text">2 Lorem ipsum dolor sit amet consectetur, adipisicing elit</div>
  </div>
  <div class="grid__item grid__item--3">
    <div class="grid__marker"></div>
    <div class="grid__text">3 Totam, commodi? Facilis atque voluptatem minima.</div>
  </div>
  <div class="grid__item grid__item--4">
    <div class="grid__marker"></div>
    <div class="grid__text">4 Totam minima porro iure unde perferendis consequuntur! Quisquam culpa odit alias vel dignissimos.</div>
  </div>
  <div class="grid__item grid__item--5">
    <div class="grid__marker"></div>
    <div class="grid__text">5 Blanditiis eligendi laborum id saepe asperiores nihil adipisci in reprehenderit?</div>
  </div>
</div>

body {
  margin: 50px;
  font-family: sans-serif;
  line-height: 1.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23969696' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
}

.grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 30px;
}

.grid__item {
  position: relative;
  outline: 1px dashed tomato;
  grid-column-end: span 2;
  padding: 0 5px 0 25px;
}

.grid__item--1 {
  grid-column-start: 6;
  grid-row-start: 1;
}

.grid__item--2 {
  grid-column-start: 4;
  grid-row-start: 2;
}

.grid__item--3 {
  grid-column-start: 8;
  grid-row-start: 2;
  transform: translate(-50px, -25px);
}

.grid__item--4 {
  grid-column-start: 7;
  grid-row-start: 3;
  transform: translate(-50px, 0);
}

.grid__item--5 {
  grid-column-start: 9;
  grid-row-start: 3;
  transform: translate(0, -25px);
}

.grid__marker {
  position: absolute;
  top: -21px;
  left: -21px;
  width: 42px;
  height: 42px;
  background-color: #ffe118;
  border-radius: 50%;
}

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

const lineOptions = {
  path: "straight",
  startPlug: "disc",
  startPlugColor: "transparent",
  startPlugSize: 5,
  endPlug: "disc",
  endPlugColor: "transparent",
  endPlugSize: 5,
};

const anchor1 = LeaderLine.pointAnchor(
  document.querySelector(".grid__item--1 > .grid__marker"),
  { x: "50%", y: "50%" }
);
const anchor2 = LeaderLine.pointAnchor(
  document.querySelector(".grid__item--2 > .grid__marker"),
  { x: "50%", y: "50%" }
);
const anchor3 = LeaderLine.pointAnchor(
  document.querySelector(".grid__item--3 > .grid__marker"),
  { x: "50%", y: "50%" }
);
const anchor4 = LeaderLine.pointAnchor(
  document.querySelector(".grid__item--4 > .grid__marker"),
  { x: "50%", y: "50%" }
);
const anchor5 = LeaderLine.pointAnchor(
  document.querySelector(".grid__item--5 > .grid__marker"),
  { x: "50%", y: "50%" }
);

new LeaderLine(anchor1, anchor2, lineOptions);
new LeaderLine(anchor1, anchor3, lineOptions);
new LeaderLine(anchor3, anchor4, lineOptions);
new LeaderLine(anchor3, anchor5, lineOptions);