JSFiddle - React, Tailwind, and code Playground

by hakim

HTML

<!-- 309 bytes -->
<script>
    var a=document,b=a.body.appendChild(a.createElement("canvas")),c=b.getContext("2d"),d=0,e=b.width=window.innerHeight,f=b.height=window.innerHeight,g=Math.cos,h=Math.sin,j=Math.PI;setInterval(function(){b.width=b.width,d+=.1;for(i=1e4;i--;)r=(e+f)/2*(g((d+i)*(.05+.2*(h(d/1e5)/j)))/j),c.fillRect(h(i)*r+e/2,g(i)*r+f/2,1.5,1.5)},16)
</script>

JavaScript

/* Original code:

var d = document,
    canvas = d.body.appendChild( d.createElement( 'canvas' ) ),
    context = canvas.getContext( '2d' ),
    time = 0,
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    cos = Math.cos,
    sin = Math.sin,
    PI = Math.PI

// The main animation loop
setInterval( function() {
    // Clear
    canvas.width = canvas.width;

    time += .1

    // The number of particles to generate
    i = 10000

    while( i-- ) {
        // The magic
        r =  (w+h)/2 * ( cos( ( time + i ) * ( .05 + ( sin(time/100000) / PI  * .2 ) ) ) / PI )

        context.fillRect( sin(i) * r + w/2, 
                          cos(i) * r + h/2, 
                          1.5, 
                          1.5 )        
    }
}, 16 )
*/