Прорисовка отдельных путей между точками на карте с привязкой к прокрутке страницы в зависимости от просматриваемого контента

function rangeCalculator(begin, end, beginRange = 0, endRange = 100) {
  const inputRange = end - begin
  const outRange = endRange - beginRange
  return /*calculate*/(current) => (
    beginRange + (outRange / (inputRange / (current - begin)))
  )
}

// Предоставляет все методы отрисовки path
function Item(path, block, nextBlock, isEndBlock) {
  const pathLength = path.getTotalLength()
  path.style.strokeDasharray = pathLength
  path.style.strokeDashoffset = pathLength
  const other = block.querySelector('.text__other')

  const min = () => path.style.strokeDashoffset = pathLength
  const max = () => path.style.strokeDashoffset = 0

  return {
    draw() {
      // Проверяем подходит ли нам позиция Scroll
      // По условию:
      // + верх нашего `block` должен находится выше низа окна просмотра
      // + а `nextBlock` ниже
      const wh = window.innerHeight
      const selfPosition = block.getBoundingClientRect().top
      const endPosition = nextBlock.getBoundingClientRect().top
      if (wh < selfPosition ||
        // За последним блоком может быть все что угодно,
        // он в любом случае попадает в свой диапазон.
        // endPosition только для НЕ-isEndBlock
        (!isEndBlock && wh > endPosition)) {
        return false
      }
      // Прерываем дальнейшие операции, если уже вышли за пределы endPosition последнего блока
      if (isEndBlock && endPosition < wh) {
        max()
        return true
      }
      // Подходит ли нам диапазон для отрисовки
      const startPosition = other.getBoundingClientRect().top
      if (wh >= startPosition) {
        // const range = startPosition - endPosition
        path.style.strokeDashoffset = pathLength - rangeCalculator(
          startPosition,
          endPosition,
          0,
          pathLength
        )(wh)
      }
      // ... если нет, то мы находимся в мертвой зоне, где path = 0
      else {
        min()
      }
      return true
    },
    min,
    max
  }
}

// Сопоставление информационных блоков и path-ей
function Collector() {
  const paths = Array.from(document.querySelectorAll('.map path'))
  const infoBlocks = Array.from(document.querySelectorAll('.container [class^="item__"]'))
  const map = []
  for (let i = 0; i < paths.length; ++i) {
    map.push(Item(
      paths[i],
      infoBlocks[i],
      infoBlocks[i + 1],
      // Флаг последнего блока
      i === paths.length - 1
    ))
  }
  return map
}

// Главный объект отрисовки - управляет всеми path-ами
function Draftsman() {
  const htmlElem = document.querySelector('html')
  const paths = Collector()

  // Индекс последнего отрисованного path
  let currentIndex = 0
  // Последняя позиция scroll
  let oldScrollPosition = 0

  // Поиск с вызовом отрисовки path
  const find = (i, step, finish) => {
    do {
      if (paths[i].draw()) {
        currentIndex = i
        return
      }
      // Текущий должен быть дорисован в соответствующую стророну
      paths[i][finish]()

    } while ((i = step()) !== false)
  }

  const scroll = () => {
    const top = htmlElem.scrollTop
    // Будем искать путь начиная с последнего currentIndex, чтобы не перебирать все path-и
    // В большинстве случаев, последний path попадется первым
    let i = currentIndex
    // ... и в ту сторону, в которую провернулся Scroll
    if (top > oldScrollPosition) {
      find(i, () => ((i === paths.length) ? false : i++), 'max')
    } else {
      find(i, () => ((i === -1) ? false : i--), 'min')
    }
    oldScrollPosition = top
  }

  let enabled = false
  return {
    enable(status) {
      if (status) {
        if (enabled) return
        enabled = true
        scroll()
        document.addEventListener('scroll', scroll)
      } else {
        if (!enabled) return
        enabled = false
        document.removeEventListener('scroll', scroll)
      }
    }
  }
}

// Запускаем
Draftsman().enable(true)

* {
  margin: 0;
  padding: 0;
}

.map {
  z-index: -1;
  position: fixed;
  left: 200px;
  top: 0;
}

.container {
  z-index: 1;
  width: 200px;
  padding: 0 50px;
  background: rgba(105, 105, 105, 0.5);
}

<!--Контейнер с картой-->
<div class="map">
  <svg id="svg__map" viewBox="0 0 2000 1200" width="1066" height="674">

      <!--Карта-->
      <g x="0" y="0">
        <image width="1066" height="674" href="https://i.imgur.com/XJuEphL.jpg"></image>
      </g>

      <!--Путь от A до B-->
      <path id="path1" class="path1" fill="none" stroke="#663300" stroke-width="5px"
        d="m 1006.6935,300.78037 c -13.55545,29.46202 -27.11017,58.92249 -67.74599,70.14934 -40.63581,11.22686 -108.35019,4.21965 -147.13455,11.65573 -38.78435,7.43609 -48.63328,29.31505 -58.48177,51.19306" />

      <!--Путь от B до C-->
      <path id="path2" class="path2" fill="none" stroke="#663300" stroke-width="5px"
        d="m 733.33119,433.7785 c -82.33315,24.09565 -164.66581,48.19116 -211.78405,77.70384 -47.11823,29.51267 -59.0192,64.44082 -70.91984,99.368" />

      <!--Путь от C до D-->
      <path id="path3" class="path3" fill="none" stroke="#663300" stroke-width="5px"
        d="m 450.6273,610.85034 c -40.2612,17.04533 -80.51892,34.08919 -105.72098,31.21185 -25.20205,-2.87734 -35.34421,-25.6782 -45.48659,-48.47955" />

      <!--Путь от D до E-->
      <path id="path4" class="path4" fill="none" stroke="#663300" stroke-width="5px"
        d="m 299.41973,593.58264 c -3.42221,-25.74545 -6.84463,-51.49251 15.38407,-59.43661 22.2287,-7.94411 70.10773,1.91513 103.14042,-11.8242 33.0327,-13.73933 51.21935,-51.07636 69.40684,-88.41511" />

      <!--Путь от E до F-->
      <path id="path5" class="path5" fill="none" stroke="#663300" stroke-width="5px"
        d="m 487.35106,433.90672 c -28.94353,0.82098 -57.88415,1.64188 -84.24414,-21.98436 -26.35998,-23.62623 -50.13229,-71.6952 -78.04729,-85.49903 -27.91501,-13.80383 -59.96879,6.66336 -92.02183,27.13006" />

    </svg>
</div>

<!--Контейнер с текстом-->
<div class="container">

  <!--Пунк A-->
  <div class="item__a">
    <h2>Пунк A</h2>
    <div class="text__about">
      <p>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a<br>пунк a
        <br>пунк a<br>пунк a</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк B-->
  <div class="item__b">
    <h2>Пунк B</h2>
    <div class="text__about">
      <p>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b
        <br>пунк b<br>пунк b<br>пунк b<br>пунк b<br>пунк b</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк C-->
  <div class="item__c">
    <h2>Пунк C</h2>
    <div class="text__about">
      <p>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c<br>пунк c
        <br>пунк c</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк D-->
  <div class="item__d">
    <h2>Пунк D</h2>
    <div class="text__about">
      <p>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d
        <br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d
        <br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d<br>пунк d</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк E-->
  <div class="item__e">
    <h2>Пунк E</h2>
    <div class="text__about">
      <p>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e
        <br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e
        <br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e<br>пунк e</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

  <!--Пунк F-->
  <div class="item__f">
    <h2>Пунк F</h2>
    <div class="text__about">
      <p>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f
        <br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f
        <br>пунк f<br>пунк f<br>пунк f<br>пунк f<br>пунк f</p>
    </div>
    <div class="text__other">
      <p>
        текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст<br>текст
      </p>
    </div>
  </div>

</div>