function twoXmodMap(start = 0.2) {

  const seed = () => Math.random() * Math.random() * start

  let xn = seed()

  let xn1

  let iter = 0

  return () => {

    iter++

    if (iter > 50) {

      xn = seed()

      iter = 0

    }

    // this is the key part:

    xn1 = (2 * xn) % 1

    xn = xn1

    return xn1

  }

}

const el = document.body.appendChild(document.createElement('div'))

el.innerHTML = `

  <svg>

    <path d="M 0 0 L 1 1" fill="none" stroke="red" />

  </svg>

  <style>

    svg, body, html {

      width: 100%;

      height: 100%;

      overflow: visible;

    }

  </style>

`

const path = el.querySelector('path')

let pathStr = ''

const map = twoXmodMap()

let x = 0

let yo = 0

let y;

function loop() {

  y = map()

  x += 2

  if (pathStr == '' || x > 300) {

    x = 10

    yo += 50

    pathStr += `M 10 ${yo}`

  } else {

    pathStr += ` L ${x} ${yo + y * 30} `

  }

  path.setAttribute('d', pathStr)

  window.requestAnimationFrame(loop)

}

loop()