It's cool and hard to see the effect of others on the Internet before, but it's not that hard to really understand how to do it. It uses canvas.

Let's see the effect first

Maybe it's not very nice.

1. Create a canvas first (size and style can be defined at will)

<canvas id="canvas" width="300" height="300"></canvas>

2. Get the current canvas and prepare to draw.

 let canvas = document.getElementById('canvas'),
     context = canvas.getContext('2d');

3. circles

context.arc(x, y, size, startAngle, endAngle); //Here we don't write clockwise or anticlockwise

Let's see how to do it. I create circles as objects.

• Circular constructor

function Circle(x, y, size, speed) {
    this.x = x; //x coordinates
    this.y = y; //y coordinates
    this.size = size; //Size
    this.color = getRandomCokor(); //Random colors
    this.X = getRandom(speed); //Random moving speed of x-axis
    this.Y = getRandom(speed); //Random moving speed of y-axis
    circleArr.push(this); //Put it in an array and save it
}

• Create graphics

Circle.prototype.createCircle = function () {
    context.beginPath();
    context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
    context.fillStyle = this.color; //Color of fill
    context.fill(); 
    context.stroke(); 
    this && this.move(); //Shift function
}

• move

Circle.prototype.move = function () {
    this.x += this.X; //x-axis displacement
    this.y += this.Y; //Y-axis displacement
    this.r -= 1; //The size of the radius reduction (here I fix the size directly)
    if(this.r <= 0){
        this.delCircle(); //If the radius is less than 0, delete the element
    }
 }

• delete

Circle.prototype.delCircle = function () {
    for (let i = circleArr.length - 1; i >= 0; i--) {
        if(circleArr[i] === this){
            circleArr.splice(i, 1); //Delete that element
        }
    }    
}

• Create a circle as the mouse moves

canvas.onmousemove = function mousemove(e) {
    let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
        context.clearRect(0, 0, canvas.width, canvas.height); //Clean the canvas every time
        circleArr.forEach( function(element, index) {
            element.createCircle(); //Create each element
        });
}

• Get random color function

function getRandomCokor() {
    let colorR = getRandom(255),
        colorG = getRandom(255),
        colorB = getRandom(255),
        rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;
    return rgb;
}
function getRandom(num) {
    return Math.floor( Math.random(0, 1) * (num) + 1);
}

• Clear the canvas and current array when the mouse leaves or clicks

canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
    circleArr.length = 0;
    context.clearRect(0, 0, canvas.width, canvas.height);
}

• Let's expand the function

First look at the effect:

It can customize the size and displacement of the ball.

• HTML structure

<div class="app">
    <canvas id="canvas" width="300" height="300"></canvas>
    <h3>Current radius:</h3>
    <input type="text" id="rText">
    <input type="range" min="1" max="20" id="rRange">
    <h3>Current speed:</h3>
    <input type="text" id="speedText">
    <input type="range" min="1" max="20" id="speedRange">
</div>

• Get each size and assign

let rRange = document.getElementById('rRange'), //Size
    rText = document.getElementById('rText'), //Size display box
    speedRange = document.getElementById('speedRange'), //speed
    speedText = document.getElementById('speedText')， //Speed size display box
    rValue = +rRange.value, //Size
    speedValue = +speedRange.value; //speed
 rText.value = rValue; //Assignment Display
 speedText.value = speedValue; //Assignment Display

• Reassign when changed

rRange.onchange = function valueChange(e) { //Size
    rValue = + this.value;
    rText.value = rValue;
}

speedRange.onchange = function valueChange(e) { //speed
    speedValue = + this.value;
    speedText.value = speedValue;
}

+Overall code

let canvas = document.getElementById('canvas'), //Get canvas
    rRange = document.getElementById('rRange'), //Size
    rText = document.getElementById('rText'), 
    speedRange = document.getElementById('speedRange'), //speed
    speedText = document.getElementById('speedText'),
    context = canvas.getContext('2d'),
    circleArr = [],
    rValue = +rRange.value,
    speedValue = +speedRange.value;
rText.value = rValue; //Assignment Display
speedText.value = speedValue;
function Circle(x, y, size, speed) { //Constructor
    this.x = x;
    this.y = y;
    this.size = size;
    this.color = getRandomCokor();
    this.X = getRandom(speed);
    this.Y = getRandom(speed);
    circleArr.push(this);
}

Circle.prototype.createCircle = function () { //Create graphics
    context.beginPath();
    context.arc(this.x, this.y, this.size, 0, 2*Math.PI);
    context.fillStyle = this.color;
    context.fill();
    context.stroke();
    this && this.move();
}

 Circle.prototype.move = function () { //move
    this.x += this.X;
    this.y += this.Y;
    this.r -= 1;
    if(this.r <= 0){
        this.delCircle();
    }
 }

Circle.prototype.delCircle = function () { //delete
    for (let i = circleArr.length - 1; i >= 0; i--) {
        if(circleArr[i] === this){
            circleArr.splice(i, 1);
        }
    }    
}

rRange.onchange = function valueChange(e) { //Reassign when size changes
    rValue = + this.value;
    rText.value = rValue;
}

speedRange.onchange = function valueChange(e) { //Reassign when speed changes
    speedValue = + this.value;
    speedText.value = speedValue;
}

canvas.onmousemove = function mousemove(e) {  //Mouse over canvas
    let circle = new Circle(e.clientX, e.clientY, rValue, speedValue);
        context.clearRect(0, 0, canvas.width, canvas.height); 
        circleArr.forEach( function(element, index) {
            element.createCircle();
        });
}

canvas.onmouseleave = canvas.onmousedown = function mouseDown() {
    circleArr.length = 0;
    context.clearRect(0, 0, canvas.width, canvas.height);
}

function getRandomCokor() { //Generate random colors
    let colorR = getRandom(255),
        colorG = getRandom(255),
        colorB = getRandom(255),
        rgb = `rgb(${colorR}, ${colorG}, ${colorB})`;
    return rgb;
}
function getRandom(num) {
    return Math.floor( Math.random(0, 1) * (num) + 1);
}

I only draw in canvas size area, you can modify the drawing on the whole document.