JSFiddle - React, Tailwind, and code Playground

JavaScript

var canvas, context;
var particles = [];
var lastPosition = null;

var dampingFactor = 0.05;
var springConstant = 0.0275;
var playerInfluenceFactor = 0.2;

var particleTexture = null;

init();
animate();

function createParticleTexture() {


    var particleTextureCanvas = document.createElement('canvas');
    particleTextureCanvas.width = 100;
    particleTextureCanvas.height = 100;
    var context = particleTextureCanvas.getContext('2d');
    var gradient = context.createRadialGradient(50, 50, 0, 50, 50, 50);
    var green = 'rgba(138,226,226,0.12)';
     var transparent = 'rgba(138,226,226,0)';
    gradient.addColorStop(0, green);
    gradient.addColorStop(0.4, green);
    gradient.addColorStop(0.4, green);
    gradient.addColorStop(1, transparent);

    context.beginPath();
    context.arc(50, 50, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = gradient
    context.fill();
    var imageData = particleTextureCanvas.toDataURL();
    var texture = new Image();
    texture.src = imageData;
    return texture;
}

function init() {
    document.body.style.backgroundColor = "#519B9B";
    particleTexture = createParticleTexture();
    canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;

    context = canvas.getContext('2d');

    document.body.appendChild(canvas);
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            var particle = {
                velocity: {
                    x: 0,
                    y: 0
                },
                position: {
                    x: 50 +(x * 20 + (Math.random() * 5)),
                    y: 50 + (y * 20 + (Math.random() * 5))
                }
            }
            particle.origin = {
                x: particle.position.x,
                y: particle.position.y
            };
            particles.push(particle);
        }
    }
    document.onmousemove = mouseMove;
}

function animate() {
   ...