<svg style="position: absolute; width: 0; height: 0">
  <defs>
    <linearGradient id="grad" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0%" stop-color="#4caf50" />
      <stop offset="33.3%" stop-color="#8bc34a" />
      <stop offset="66.6%" stop-color="#ffeb3b" />
      <stop offset="100%" stop-color="#4caf50" />
    </linearGradient>
  </defs>
</svg>

<ul class="steps">
  <li class="steps__item">
    <svg class="steps__join steps__join--1" viewBox="0 0 117 19" preserveAspectRatio="none">
      <path d="M117,1C66,25,31,26,0,0" fill="none" vector-effect="non-scaling-stroke" />
    </svg>
    <div class="step__num">4</div>
    <div class="step__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus distinctio ex a vitae error deleniti, dignissimos inventore eum temporibus explicabo iusto aliquam ut, voluptatem dicta? Vero provident nemo magni in.</div>
  </li>
  <li class="steps__item">
    <svg class="steps__join steps__join--2" viewBox="0 0 118 22.64" preserveAspectRatio="none">
      <path d="M118,0C87,23,38,34,0,6" fill="none" vector-effect="non-scaling-stroke" />
    </svg>
    <div class="step__num">5</div>
    <div class="step__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus distinctio ex a vitae error deleniti, dignissimos inventore eum temporibus explicabo iusto aliquam ut</div>
  </li>
  <li class="steps__item">
    <svg class="steps__join steps__join--3" viewBox="0 0 330 90" preserveAspectRatio="none">
      <path d="M0,90c84,6,62-25,123-25s70,23,143,23,66.44-43.09,65-54c-7-53-52-70-94-34" fill="none" vector-effect="non-scaling-stroke" />
    </svg>
    <div class="step__num">6</div>
    <div class="step__text">Voluptatibus distinctio ex a vitae error deleniti, dignissimos inventore eum temporibus explicabo iusto aliquam ut, voluptatem dicta? Vero provident nemo magni in.</div>
  </li>
  <li class="steps__item">
    <svg class="steps__join steps__join--4" viewBox="0 0 38.99 147.82" preserveAspectRatio="none">
      <path d="M39,147.82C15,141-33.64,52.87,36,0" fill="none" vector-effect="non-scaling-stroke" />
    </svg>
    <div class="step__num">7</div>
    <div class="step__text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat ad officiis aliquid magni similique possimus error distinctio adipisci voluptate culpa deleniti velit facere debitis quas, labore iste iusto in alias. Voluptatibus distinctio ex a vitae error deleniti, dignissimos inventore</div>
  </li>
  <li class="steps__item">
    <div class="step__num">8</div>
    <div class="step__text">Placeat ad officiis aliquid magni similique possimus error distinctio adipisci voluptate culpa deleniti velit facere debitis quas, labore iste iusto in alias. Voluptatibus distinctio ex a vitae error deleniti, dignissimos inventore</div>
  </li>
  <li class="steps__item">
    <div class="step__num">9</div>
    <div class="step__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, necessitatibus maiores consequatur placeat perferendis quia esse soluta et illo hic alias, quo ducimus deleniti quis. Eveniet dolorem necessitatibus aperiam laudantium.</div>
  </li>
</ul>

body {
  font-family: sans-serif;
  padding: 50px 15px 0;
  line-height: 1.35;
  margin: 0;
}

.steps {
  max-width: 768px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 20px;
  list-style: none;
  margin: 0 auto; 
  padding: 0;
}

.steps__item {
  position: relative;
  z-index: 0;
}

.steps__item:nth-child(4) {
  grid-column: 1 / -1;
}

.steps__item:nth-child(5) {
  grid-column: 1 / 3;
}

.steps__join {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% + 20px);
  height: 32px;
  stroke: url(#grad);
  stroke-width: 3px;
  stroke-dasharray: 0 6;
  stroke-linecap: round;
  filter: drop-shadow(5px 5px 2px #0009);
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}

.steps__join--3 {
  width: calc(300% + 20px);
  height: calc(100% + 40px);
  left: calc(-200% - 20px);
}

.steps__join--4 {
  width: 40px;
  height: calc(100% + 40px);
  left: -20px;
}

.step__num {
  width: 1.25em;
  height: 1.25em;
  margin-bottom: 0.5em;
  line-height: 1.25em;
  text-align: center;
  font-size: 2em;
  border-radius: 50%;
  
  background-color: #4caf50;
  color: #fff;
/*   opacity: 0.5; */
}