JSFiddle - React, Tailwind, and code Playground

by vooor

HTML

<button id="play">play/stop</button>
<canvas id="canvas" width="800" height="400"></canvas>

CSS

body {
    background-color:#000;
    height: 100%;
    width:100%;
}

JavaScript

var 
    /*$body = $('body')
    ,*/
    $canvas = $('#canvas')//.css({'height':$body.height()+'px','width':$body.width()+'px'})
    ,run = true
    ,iter = 0
    ,iterTxt = 0
    ,words = "Greetings from OrOr to every demomakers !".split('')
    ,charLength = 50
    ,wordsLength = charLength * words.length
    ,dim = { w : $canvas.width(), h : $canvas.height()}
    ,ctx = $canvas[0].getContext('2d')
    ,rnd = function(m){m=m||255;return Math.round(Math.random()*m);}
    ,wave = function(i,freq,phase,width,center){return Math.round(Math.sin(freq*i + phase) * width+center);}
    ,wavec = function(i,freq,phase,width,center){return Math.round(Math.cos(freq*i + phase) * width + center); }
    ,gradiant = function (i,frequency, phase, center, width, len)
    {
        i      = i      || 0;
        center = center || 128;
        width  = width  || 127;
        len    = len    || 50;
        
        return {
            i : ++i
            ,color : {
                r : wave(i,frequency.r,phase.r,width,center)
                ,g :wave(i,frequency.g,phase.g,width,center)
                ,b :wave(i,frequency.b,phase.b,width,center)
            }
        };
    }
    ,drwBg = function()
    {
        var i
//        ,grd = gradiant(iter,{r:.1,g:.1,b:.1},{r:0,g:2,b:4},200)
        ,grd = gradiant(iter,{r:.01,g:.01,b:.01},{r:3,g:2,b:.5},20)
        ;
        iter = grd.i;
        ctx.fillStyle = 'rgba('+grd.color.r+','+grd.color.g+','+grd.color.b+',.1)';//+rnd(100)+')';
        ctx.beginPath();
        //ctx.rect(0, 0, dim.w, dim.h);
        
        for(i=0;i<40;++i)
        {
          ctx.arc(rnd(dim.w), rnd(dim.h), rnd(100), 0, Math.PI*2, true);
          //ctx.rect(rnd(dim.w), rnd(dim.w), rnd(dim.h), rnd(dim.h));
        }
//        ctx.font = "bold 12px sans-serif";
//        ctx.fillText("x", 248, 43);
        ctx.closePath();
        ctx.fill();
    }
    ,drwBgFast = function()
    {
        var i
//        ,grd =...