<section class="block">
  <div class="container">
    <h3 class="block__title">Lorem ipsum dolor sit, amet consectetur adipisicing elit</h3>
    <div class="block__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio, velit voluptatum. Non voluptatem laboriosam reiciendis similique facere dolor vitae eius natus eligendi dicta, est tempora, odio cupiditate doloremque minus architecto.</div>

    <div class="block__chart chart">
      <svg class="chart__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1078 268">
        <defs>
          <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="100%" y1="100%" x2="100%" y2="0">
            <stop offset="0" stop-color="#6b8bfe" stop-opacity="0.5" />
            <stop offset="1" stop-color="#6b8bfe" stop-opacity="0" />
          </linearGradient>
        </defs>
        <path d="M0,235c145,0,267-24,333-24,111,0,147.487-7.712,180-33,54-42,82-73,179-73,302,0,222-98,386-98V268H0Z" fill="url(#grad)"/>
        <path d="M1078,6.926C914,6.926,994,105,692,105c-97,0-125,31-179,73-32.513,25.288-69,33-180,33C267,211,145,235.3,0,235.3" fill="none" stroke="#6b8bfe" stroke-width="2" vector-effect="non-scaling-stroke" />
        <!--
        <circle cx="80" cy="233" r="5" fill="aqua" />
        <circle cx="386" cy="211" r="5" fill="aqua" />
        <circle cx="692" cy="105" r="5" fill="aqua" />
        <circle cx="998" cy="20" r="5" fill="aqua" /> -->
      </svg>

      <div class="chart__tooltip chart__tooltip--1">
        <div class="chart__dot"></div>
        <div class="chart__text">1</div>
      </div>

      <div class="chart__tooltip chart__tooltip--2">
        <div class="chart__dot"></div>
        <div class="chart__text">2</div>
      </div>

      <div class="chart__tooltip chart__tooltip--3">
        <div class="chart__dot"></div>
        <div class="chart__text">3</div>
      </div>

      <div class="chart__tooltip chart__tooltip--4">
        <div class="chart__dot"></div>
        <div class="chart__text">4</div>
      </div>
    </div>
  </div>

</section>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.35;
}

.block {
  overflow: hidden;
  background: url("https://images.unsplash.com/photo-1517451330947-7809dead78d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80") no-repeat center / cover #f3f6ff;
}

.container {
  max-width: 576px;
  margin: 0 auto;
  padding: 0 15px;
}

.block__chart {
  margin-top: -3%;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.chart {
  position: relative;
}

.chart__svg {
  display: block;
}

.chart__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  z-index: 0;
  cursor: pointer;
}

.chart__tooltip:hover .chart__text {
  transform: translate(-50%, 0);
  opacity: 1;
}

.chart__tooltip--1 {
  top: 86.9402%;
  left: 7.4211%;
}

.chart__tooltip--2 {
  top: 78.7313%;
  left: 35.8070%;
}

.chart__tooltip--3 {
  top: 39.1791%;
  left: 64.1929%;
}

.chart__tooltip--4 {
  top: 7.4626%;
  left: 92.5788%;
}

.chart__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  border: 2px solid #6b8bfe;
  border-radius: 50%;
  background-color: #fff;
}

.chart__text {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 50px;
  height: 30px;
  transform: translate(-50%, -20px);
  background-color: #fff;
  border-radius: 6px;
  text-align: center;
  line-height: 30px;
  opacity: 0;
  transition: all 0.5s;
  z-index: -1;
  user-select: none;
  box-shadow: 5px 5px 5px 0 rgb(200, 211, 253);
}