JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    
    </head>
    <body bgcolor="#fff">
        <canvas id="myCanvas" width="1000" height="1000"></canvas>
    </body>
</html>

JavaScript

$(document).ready(function() {
    var canvas = $('#myCanvas');
    var ctx = canvas.get(0).getContext("2d");
    var context = new webkitAudioContext();

    var canvasWidth = canvas.width();
    var canvasHeight = canvas.height();

    $(window).resize(resizeCanvas);

    function resizeCanvas() {
        canvas.attr("width", $(window).get(0).innerWidth - 2);
        canvas.attr("height", $(window).get(0).innerHeight - 2);
        canvasWidth = canvas.width();
        canvasHeight = canvas.height();
    };

    resizeCanvas();

    ctx.strokeStyle = "rgb(255, 0, 0)";
    ctx.lineWidth = 2;

    var playAnimation = true;

    var Ring = function(x, y, radius, vx, vy) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.vx = vx;
        this.vy = vy;
    };

    var rings = [];

    for (var i = 0; i < 10; i++) {
        var x = Math.random() * ctx.canvas.width;
        var y = Math.random() * ctx.canvas.height;
        var vx = Math.random() * 6 - 3;
        var vy = Math.random() * 6 - 3;
        rings.push(new Ring(x, y, 40, vx, vy));
    };

    function animate() {
        var ringsLength = rings.length;
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        for (var i = 0; i < ringsLength; i++) {
            var tmpRing = rings[i];

            for (var j = i + 1; j < ringsLength; j++) {
                var tmpRingB = rings[j];

                var dx = tmpRingB.x - tmpRing.x;
                var dy = tmpRingB.y - tmpRing.y;

                var dist = Math.sqrt((dx * dx) + (dy * dy));

                if (dist < tmpRing.radius + tmpRingB.radius) {
                    var sinewave = new SineWave(context);

                    var angle = Math.atan2(dy, dx);
                    var sine = Math.sin(angle);
                    var cosine = Math.cos(angle);

                    var x = 0;
                    var y = 0;
                    var xb = dx * cosine + dy * sine;
                    var yb = dy *...