JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js"></script>
<canvas id="parchment" width="500" height="500"></canvas>

JavaScript

(function($) {
			bubbles = new Array();
		    context = document.getElementById('parchment').getContext("2d");

			$('#parchment').bind('mousemove', function(e) {
				bubble(e);
		    });

		    function bubble(e) {
				var bubble = {
					size:  Math.random()*25,
					x: e.pageX,
					y: e.pageY,
					riseRate: 10,
					riseDistance: 150,
					riseY: function() {
						return parseInt( e.pageY - this.riseDistance )
					},
					alpha: 1,
					fade: function () {
						if ( this.alpha <= 0 ) {
							this.alpha = 0;
						} else {
							this.alpha = this.alpha - ( ( 1 / this.riseDistance ) * this.riseRate );
						}
					},
					rise: function () {
						if ( this.y <=  this.riseY() ) {
							this.y = this.y;
						} else {
							this.y = this.y - this.riseRate;
						}
					},
				}
				bubbles.push( bubble );
		    }

			function bubbleUp() {
				var canvas = document.getElementById('parchment');
				canvas.width = canvas.width;
			    context.save();
			    for(var i = 0; i < bubbles.length; i++){
			        bubbles[i].rise();
			        bubbles[i].fade();
			        draw( bubbles[i].x, bubbles[i].y, bubbles[i].size, bubbles[i].alpha );
			    }
			    context.restore();
			}

			function draw( x, y, radius, alpha ){
			    context.save();
			    context.strokeStyle = "hsla( 0, 50%, 50%, " + alpha + ")";
			    context.lineWidth = 1;
			    context.beginPath();
			    context.arc(x, y, radius, 0, Math.PI*2, true);
			    context.closePath();
			    context.stroke();
			}
			window.setInterval(bubbleUp, 30);
		})(jQuery);