Как реализовать данный эффект?

class DamageIndicator {
  static createIndicator(damage) {
    const indicator = document.createElement('div')
    indicator.className = 'indicator'
    indicator.textContent = String(damage)

    return indicator
  }

  static getSimilarNum(num) {
    return Math.random() * 10 * (Math.random() > 0.5 ? 1 : -1) + num
  }

  static initIndicator(indicator, x, y) {
    x = this.getSimilarNum(x)
    y = this.getSimilarNum(y)

    document.body.appendChild(indicator)
    indicator.style.left = String(x) + 'px'
    indicator.style.top = String(y) + 'px'
    indicator.style.opacity = '1'

    ;(function anim() {
      const opacity = Number(indicator.style.opacity) - 0.025

      indicator.style.left = String(x) + 'px'
      indicator.style.top = String(y) + 'px'
      indicator.style.opacity = String(opacity)

      if (opacity > 0) {
        requestAnimationFrame(anim)
        y += -1
      } else {
        return indicator.remove()
      }
    })()
  }
}

const box = document.querySelector('.box')

box.addEventListener('click', ev => {
  const { pageX, pageY } = ev
  const indicator = DamageIndicator.createIndicator(9)

  DamageIndicator.initIndicator(indicator, pageX, pageY)
})

@import url(//fonts.googleapis.com/css?family=Rubik+Mono+One);

body {
  background-color: rgb(11, 12, 14);
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  width: 100px;
  height: 100px;
}

.indicator {
  color: rgb(255, 255, 255);
  position: absolute;
  font-family: 'Rubik Mono One', 'Segoe UI', Arial, sans-serif;
  pointer-events: none;
}

<div class="box"></div>