<canvas id="custom-cursor"></canvas>

body
{
  background: #000;
}
canvas#custom-cursor
{
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

var canvas = document.getElementById("custom-cursor");
                var ctx = canvas.getContext("2d");
                var trailLength = 10;
                var trail = [];

                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

                document.addEventListener("mousemove", function(e) {
                    var x = e.clientX;
                    var y = e.clientY;
                    trail.push({
                        x: x,
                        y: y
                    });
                    if (trail.length > trailLength) {
                        trail.shift();
                    }
                });

                function drawCursor() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    if (trail.length > 1) {
                        for (var i = 0; i < trail.length - 1; i++) {
                            var startPoint = trail[i];
                            var endPoint = trail[i + 1];
                            var alpha = 1 - i / trail.length;
                            ctx.beginPath();
                            ctx.moveTo(startPoint.x, startPoint.y);
                            ctx.lineTo(endPoint.x, endPoint.y);
                            ctx.strokeStyle = "rgba(255, 255, 255, " + alpha + ")";
                            ctx.lineWidth = 2;
                            ctx.stroke();
                        }
                    }
                    requestAnimationFrame(drawCursor);
                }

                drawCursor();