A simple canvas animation...

<!DOCTYPE html>
<html lang="en">

drawPoint = () => {
      ctx.fillStyle = '#b2182b'
      ctx.beginPath()
      ctx.arc(init.x, init.y, 5, 0, 2 * Math.PI)
      ctx.fill()
    }

canvas = document.getElementById("myCanvas")
    ctx = canvas.getContext("2d")
    const width = canvas.width
    const height = canvas.height

ctx.strokeRect(0, 0, width, height);

const init = { x: width / 2, y: height / 2 }

const anim = setInterval(() => {
      // Clear the canvas
      ctx.clearRect(0, 0, width, height)

// Fill in the canvas in grey
      ctx.fillStyle = '#4d4d4d'
      ctx.fillRect(0, 0, width, height);

// Draw a white circle that contains the point
      const radius = Math.sqrt(Math.abs(init.x - width / 2) ** 2 + Math.abs(init.y - height / 2) ** 2) + 5
      ctx.beginPath()
      ctx.arc(width / 2, height / 2, radius, 0, 2 * Math.PI)
      ctx.fillStyle = 'white'
      ctx.fill()

// Draw the point
      drawPoint()

// Update the center of the point
      init.x += getRandomInt(-5, 5)
      init.y += getRandomInt(-5, 5)

// Stop the animation if the point touches an edge of the canvas
      if (init.x <= 0 || init.x >= width || init.y <= 0 || init.y >= height) {
        clearInterval(anim)
      }
    }, 80)
  </script>
</body>

</html>