<div class="statistic">
                    <div class="statistic__ciricleFirst"></div>
                    <svg class="line line-0">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    
                    <div class="statistic__happyClient">225 <p class="statistic__nameblock">happy client</p>
                    </div>
                    <svg class="line line-1">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    <div class="statistic__complitedProjects">430 <p class="statistic__nameblock">completed projects</p>
                    </div>
                    <svg class="line line-2">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    <div class="statistic__bestshots">362 <p class="statistic__nameblock">best shots</p>
                    </div>
                    <svg class="line line-3">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    <div class="statistic__ciricleSecond"></div>
                    <svg class="line line-4">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    <div class="statistic__coffesmade">1570 <p class="statistic__nameblock">coffees made</p>
                    </div>
                    <svg class="line line-5">
                        <line x1="0" y1="0" x2="200" y2="200" />
                    </svg>
                    <div class="statistic__winningawards">122 <p class="statistic__nameblock">winning awards</p>
                    </div>



                </div>
body{
  height: 100vh;
  background: orange;
position: relative;
}
  .line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #3f3b48;
    stroke-width: 1px;
    z-index: -1;
  }
  .statistic {
    // .statistic__ciricle

    &__ciricleFirst {
      position: absolute;

      border-radius: 50%;
      width: 32px;
      height: 32px;
      background-color: #3f3b48;
      bottom: 15%;
      left: 30%;
      z-index: 1;
    }

    // .statistic__line

    // .statistic__happyClient

    &__happyClient {
      position: absolute;
      border-radius: 50%;
      bottom: 20%;
      left: 35%;
      z-index: 1;
      width: 112px;
      height: 112px;
      background-color: #3f3b48;
      color: #ffffff;
      font-family: Montserrat;
      font-size: 38px;
      font-weight: 700;
      line-height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    &__nameblock {
      position: absolute;
      bottom: -60px;
      color: #333333;
      font-family: Montserrat;
      font-size: 12px;
      font-weight: 700;
      line-height: 25px;
      text-transform: uppercase;
      overflow: visible;
      white-space: nowrap;
    }

    // .statistic__complitedProjects

    &__complitedProjects {
      position: absolute;
      border-radius: 50%;
      bottom: 10%;
      left: 45%;
      z-index: 1;
      color: #ffffff;
      font-family: Montserrat;
      font-size: 26px;
      font-weight: 700;
      line-height: 25px;
      width: 82px;
      height: 82px;
      background-color: #3f3b48;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // .statistic__bestshots

    &__bestshots {
      position: absolute;
      border-radius: 50%;
      bottom: 25%;
      left: 50%;
      z-index: 1;
      color: #ffffff;
      font-family: Montserrat;
      font-size: 38px;
      font-weight: 700;
      line-height: 25px;
      width: 112px;
      height: 112px;
      background-color: #3f3b48;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // .statistic__ciricleSecond

    &__ciricleSecond {
      position: absolute;
      border-radius: 50%;
      bottom: 45%;
      left: 45%;
      z-index: 1;
      width: 32px;
      height: 32px;
      background-color: #3f3b48;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // .statistic__coffesmade

    &__coffesmade {
      position: absolute;
      border-radius: 50%;
      bottom: 50%;
      left: 60%;
      z-index: 1;
      color: #ffffff;
      font-family: Montserrat;
      font-size: 21px;
      font-weight: 700;
      line-height: 15.85px;
      width: 71px;
      height: 71px;
      background-color: #3f3b48;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    // .statistic__winningawards

    &__winningawards {
      position: absolute;
      border-radius: 50%;
      bottom: 20%;
      left: 65%;
      z-index: 1;
      color: #ffffff;
      font-family: Montserrat;
      font-size: 72px;
      font-weight: 700;
      line-height: 42.41px;
      width: 190px;
      height: 190px;
      background-color: #3f3b48;
      display: flex;
      justify-content: center;
      align-items: center;
    }
}
View Compiled
const statisticCiricleFirst = $(".statistic__ciricleFirst");
const statisticHappyClient = $(".statistic__happyClient");
const statisticComplitedProjects = $(".statistic__complitedProjects ");
const statisticBestshots = $(".statistic__bestshots");
const statisticCiricleSecond = $(".statistic__ciricleSecond");
const statisticCoffesmade = $(".statistic__coffesmade");
const statisticWinningawards = $(".statistic__winningawards");
const line0 = document.querySelector('.line-0').getElementsByTagName('line')[0];
const line1 = document.querySelector('.line-1').getElementsByTagName('line')[0];
const line2 = document.querySelector('.line-2').getElementsByTagName('line')[0];
const line3 = document.querySelector('.line-3').getElementsByTagName('line')[0];
const line4 = document.querySelector('.line-4').getElementsByTagName('line')[0];
const line5 = document.querySelector('.line-5').getElementsByTagName('line')[0];
const statistic = document.querySelector(".statistic")

let linePaint = (firstObject, secondObject, linenumber) => {
  let firstPos = $(firstObject).position();
  let secondPos = $(secondObject).position();
  let posFirstObjectTop = firstPos.top + ($(firstObject).height() * 0.5)
  let posFirstObjectLeft = firstPos.left + ($(firstObject).width() * 0.5)
  let posSecondObjectTop = secondPos.top + ($(secondObject).height() * 0.5)
  let posSecondObjectLeft = secondPos.left + ($(secondObject).width() * 0.5)
  linenumber.setAttribute('x1', posFirstObjectLeft);
  linenumber.setAttribute('y1', posFirstObjectTop);
  linenumber.setAttribute('x2', posSecondObjectLeft);
  linenumber.setAttribute('y2', posSecondObjectTop);
}

window.onresize = function(event) {
  linePaint(statisticCiricleFirst, statisticHappyClient, line0);
  linePaint(statisticHappyClient, statisticComplitedProjects , line1);
  linePaint(statisticBestshots, statisticCiricleSecond, line2);
  linePaint(statisticBestshots, statisticCoffesmade, line3);
  linePaint(statisticComplitedProjects, statisticBestshots, line4);
  linePaint(statisticBestshots, statisticWinningawards, line5);
}
linePaint(statisticCiricleFirst, statisticHappyClient, line0);
linePaint(statisticHappyClient, statisticComplitedProjects , line1);
linePaint(statisticBestshots, statisticCiricleSecond, line2);
linePaint(statisticBestshots, statisticCoffesmade, line3);
linePaint(statisticComplitedProjects, statisticBestshots, line4);
linePaint(statisticBestshots, statisticWinningawards, line5);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js