JSFiddle - React, Tailwind, and code Playground

by polm23

JavaScript

var r = Raphael(10,10,800,600);
var c = r.circle(50,50,30);
c.attr('fill','#fcc');

var drawLine = function(shift, sx, sy, ex, ey){
    var line = [['M', sx, sy],
                ['s', shift, shift, 30, 30],
                ['s', -shift, shift, 150+shift, 50],
                ['s', 2*shift, -shift, -10 + shift, 2*shift],
                ['s', shift, shift, -30, -shift],
                ['s', -shift, -shift, 10, 50],
                ['S', 10, 10+shift, ex, ey]];
    return r.path(line);
};

window.lines = [];

var drawWave = function(){
    
    for (var ii = 0; ii < 20; ii++){
        //drawLine(ii*3,10, 10, 50, 0);
        if (window.lines[ii]) window.lines[ii].remove();
        window.lines[ii] = 
            drawLine(2*ii*(((new Date())/1000) % 10),
                     10, 10,
                     780, 350);
    }
}

setInterval(drawWave,1000/30);