Как заполнить SVG при прокрутке

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

by akogch

HTML

<svg
  class="filling"
  width="500"
  height="10"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
>
  <line
    x1="90"
    y1="5"
    x2="500"
    y2="5"
    stroke="#e2e2e2"
    fill="transparent"
    stroke-width="4"
  />
  <line
    x1="90"
    y1="5"
    x2="90"
    y2="5"
    stroke="blue"
    fill="transparent"
    stroke-width="4"
    id="scrollprogress"
  />
</svg>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget lectus eu
  felis finibus sollicitudin vitae nec purus. Cum sociis natoque penatibus et
  magnis dis parturient montes, nascetur ridiculus mus. Suspendisse id elit
  dictum nibh commodo vehicula. Nullam vitae elit condimentum, pulvinar nibh id,
  dignissim quam. Pellentesque eu condimentum lacus, at scelerisque tortor.
  Vivamus condimentum magna quis porta dignissim. Aenean ornare mi a metus
  sollicitudin tincidunt. Sed maximus dolor eget nulla facilisis, sit amet
  euismod dolor maximus. Aenean tristique neque a aliquet luctus. Aenean magna
  ligula, accumsan eget arcu at, pharetra fringilla est. Donec finibus sapien
  quis sodales dapibus. Nulla aliquet libero a orci interdum, sed rutrum leo
  ullamcorper. Vivamus sem est, gravida efficitur interdum vel, tristique vitae
  nibh. Nulla ornare porttitor orci, a venenatis nulla dapibus ut.
</p>
<p>
  Praesent eget orci sem. Donec eget nisi sit amet nisi ultricies facilisis.
  Quisque ut magna suscipit elit feugiat pellentesque quis quis neque. Mauris
  sit amet dolor viverra, sollicitudin felis eget, vulputate risus. Quisque nec
  nisl at dui consequat faucibus. Suspendisse fringilla, mi eget sagittis
  pretium, lorem leo fringilla massa, vulputate facilisis risus neque ac ante.
  Cras commodo ut libero eu rhoncus.
</p>
<p>
  Curabitur ut auctor dolor. Nam rutrum turpis eu purus accumsan rhoncus. Sed
  facilisis nec eros at cursus. Sed elementum eget magna pharetra ullamcorper.
  Nunc facilisis dolor sit amet tristique molestie. Morbi luctus lorem ac
  ullamcorper...

CSS

svg {
  position: fixed;
}

JavaScript

window.onscroll = function (event) {
  var offset = window.pageYOffset
  var wheight = window.innerHeight
  var html = document.documentElement
  var docheight = Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight,
  )
  var progress = offset / (docheight - wheight)

  // Give the line a CSS gradient based on scroll position
  document
    .getElementById("scrollprogress")
    .setAttribute("x2", 90 + progress * 410)
}