// move your mouse around - click to reverse

function attrs(el, a) {

  for (let k in a) el.setAttribute(k, a[k])

  return el

}

document.body.style.margin = '0'

document.body.style.overflow = 'hidden'

document.body.style.background = '#ccc'

const NS = 'http://www.w3.org/2000/svg'

const svg = document.createElementNS(NS, 'svg')

document.body.appendChild(svg)

Object.assign(svg.style, {

  display: 'block',

  background: 'white'

})

function resize() {

  attrs(svg, { width: innerWidth, height: innerHeight })

}

resize()

const line = attrs(

  document.createElementNS(NS, 'line'),

  { stroke: 'black' }

)

svg.appendChild(line)

const circ = attrs(

  document.createElementNS(NS, 'circle'),

  { r: 10, fill: 'red' }

)

svg.appendChild(circ)

let mouseX = 0, mouseY = 0

let bx = 0, by = 0

let x = 0, y = 0

let px = 0, py = 0

const HZ = 60

const DT = 1 / HZ

let accumulator = 0

let lastTime = performance.now()

onmousemove = e => {

  mouseX = e.pageX

  mouseY = e.pageY

}

ontouchmove = e => {

  e.preventDefault()

  const t = e.touches[0]

  mouseX = t.pageX

  mouseY = t.pageY

}

onclick = () => {

  bx *= -1

  by *= -1

}

function update() {

  const now = performance.now()

  let frameTime = (now - lastTime) * 0.001

  lastTime = now

  if (frameTime > 0.25) frameTime = 0.25

  accumulator += frameTime

  while (accumulator >= DT) {

    px = x

    py = y

    x -= bx

    y -= by

    bx = ((x - mouseX) / 17 + bx) / 1.05

    by = ((y - mouseY) / 17 + by) / 1.05

    accumulator -= DT

  }

  render(accumulator / DT)

  requestAnimationFrame(update)

}

function render(alpha) {

  const dx = x * alpha + px * (1 - alpha)

  const dy = y * alpha + py * (1 - alpha)

  attrs(circ, { cx: dx, cy: dy })

  attrs(line, {

    x1: mouseX, y1: mouseY,

    x2: dx,     y2: dy

  })

}

requestAnimationFrame(update)

onresize = resize