JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.binding.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.time.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>

CSS

html { background: #000; }
canvas { display: block; }

JavaScript

(function (global) {
    var canvas, context, subscription;
    
    function init() {

        var host = document.body;

        canvas = document.createElement( 'canvas' );

        canvas.width = 512;
        canvas.height = 512;

        context = canvas.getContext( '2d' );

        host.appendChild( canvas );
    }

    function animate() {
        subscription = Rx.Observable.generate(
                0,
                function (x) { return true; },
                function (x) { return x + 1; },
                function (x) { return x; },
                Rx.Scheduler.requestAnimationFrame
            )
            .timestamp()
            .subscribe(draw);
    }

    function draw(ts) {

        var time = ts.timestamp * 0.002;
        var x = Math.sin( time ) * 192 + 256;
        var y = Math.cos( time * 0.9 ) * 192 + 256;

        context.fillStyle = ts.value % 2 === 0 ? 'rgb('+Math.round(200 * Math.random())+',200,20)' :  'rgb(20,20,200)';
        context.beginPath();
        context.arc( x, y, 10 + 10 * Math.random(), 0, Math.PI * 2, true );
        context.closePath();
        context.fill();
    }

    function main () {
        init();
        animate();
    }

    main();
}(window));