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.testing.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs/2.1.18/rx.time.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/rxjs-dom/2.0.7/rx.dom.js"></script>

JavaScript

var canvas, context, subscription;

init();
animate();

function getDrawingInfo (ts) {
    var time = ts.timestamp * 0.002;
    return {
        x: Math.sin( time ) * 192 + 256,
        y: Math.cos( time * 0.9 ) * 192 + 256,
        toggle: ts.value % 2 === 0
    };
}

function createAnimationObservable(scheduler) {
   scheduler || (scheduler = Rx.Scheduler.requestAnimationFrame)
   return Rx.Observable
       .generate(
           0,
           function () { return true; },
           function (x) { return x + 1; },
           function (x) { return x; },
           scheduler)
       .timestamp()
       .map(getDrawingInfo);
}

/* Aliases */
var onNext = Rx.ReactiveTest.onNext,
    onError = Rx.ReactiveTest.onError,
    onCompleted = Rx.ReactiveTest.onCompleted,
    subscribe = Rx.ReactiveTest.subscribe;

/* Test the actual observable */
function testObservable() {
    var scheduler = new Rx.TestScheduler();
    
    var results = scheduler.startWithCreate(function () {
       return createAnimationObservable(scheduler).take(3);
    });
    
    areElementsEqual(
        results.messages,
        [ onNext(201, { 
            x: 92.3242458488109,
            y: 372.52563760429143,
            toggle: true}),
          onNext(202, { 
            x: 381.5912585098488,
            y: 258.57260509359605,
            toggle: false}),
          onNext(203, { 
            x: 381.30057492426016,
            y: 258.22711211233184,
            toggle: true}),
          onCompleted(203)
        ]);        
}

function areElementsEqual(first, second) {
   if (first.length !== second.length) {
        console.log('Lengths are not equal');
        return;
    }
    
    for (var i = 0, len = first.length; i < len; i++) {
        var f = first[i], s = second[i];
        if (f.value.kind !== s.value.kind) {
           console.log('Not the same kind');
        }
        
        if (f.time !== s.time) { 
            console.log('Not the same time');   
        }
        
       ...