JSFiddle - React, Tailwind, and code Playground

by Piotr Zalewa

HTML

<canvas id="c" width="400" height="300"></canvas>
<ul>
    <li>Hover and some will follow</li>
    <li>Click and all will come</li>
</ul>

JavaScript

(function($) {
    var canvas = document.getElementById('c'),
        c = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        p = [],
        clr, n = 500;

    clr = ['red', 'green', 'blue', 'yellow', 'purple'];

    for (var i = 0; i < n; i++) {
        p.push({
            x: w / 2,
            y: h / 2,
            vx: Math.random() * 6,
            vy: Math.random() * 6,
            r: Math.floor(Math.random() * 4 + 3),
            clr: Math.floor(Math.random() * clr.length)
        });
        if (Math.floor(Math.random() * 2)) {
            p[i].vx = -p[i].vx;
        }
        if (Math.floor(Math.random() * 2)) {
            p[i].vy = -p[i].vy;
        }
    }

    function frame() {
        c.fillStyle = 'rgba(0,0,0,0.5)';
        c.fillRect(0, 0, w, h);

        for (var i = 0; i < n; i++) {
            c.fillStyle = clr[p[i].clr];

            p[i].vx *= 0.99;
            p[i].vy *= 0.99;

            p[i].x += p[i].vx;
            p[i].y += p[i].vy;

            if (p[i].x < p[i].r) {
                p[i].vx = -p[i].vx;
                p[i].x = p[i].r;
            } else if (p[i].x > w - p[i].r) {
                p[i].vx = -p[i].vx;
                p[i].x = w - p[i].r;
            }
            if (p[i].y < p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y = p[i].r;
            } else if (p[i].y > h - p[i].r) {
                p[i].vy = -p[i].vy;
                p[i].y = h - p[i].r;
            }

            c.beginPath();
            c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI * 2, false);
            c.fill();
        }
    }

    $('#c').mousemove(function(e) {
        var o = $(this).offset(),
            x = (e.pageX - o.left),
            y = (e.pageY - o.top),
            vx, vy;

        for (var i = 0; i < n; i++) {
            if (Math.abs(x - p[i].x) < 20 && Math.abs(y - p[i].y) < 20) {
                vx = (x - p[i].x) / 3;
                vy = (y - p[i].y) / 3;
                p[i].vx =...