JSFiddle - React, Tailwind, and code Playground

by meatHucker

HTML

<div class="flake s0"></div>
<div class="flake s1"></div>
<div class="flake s2"></div>
<div class="flake s3"></div>

CSS

body{
    background-color: #000;
}
.red{
    background-color: red;
}
.flake{
    background-image:url(http://i.imgur.com/SAan0.png);
    background-repeat: no-repeat;
    height: 128px;
    width: 128px;
    margin: -64px 0 0 -64px;
    position: absolute;
}
.flake.s1{
    background-position: -128px 0;
}
.flake.s2{
    background-position: -256px 0;
}
.flake.s3{
    background-position: -384px 0;
}

JavaScript

var scene = {
    interval: false,
    frameRate: 40,
    q: [],
    update: function(){
        var t = this, i, item;
        for(i = 0; i < t.q.length; i += 1){
            item = t.q[i];
            item.update();
        }            
    },
    start: function(){
        var t = this;
        if (t.interval === false){
            t.interval = setInterval(
                function(){
                    t.update();    
                },
                1000/t.frameRate                
            );             
        }                
                    
    },
    stop: function(){
        clearInterval(this.interval);
    }
};

var Snowflake = function(){
    var t = this, type = 'Snowflake';
    if(t.type !== type){
        throw type + ' constructor requires use of the `new` keyword';        
    }
    t.element = document.createElement('div');
    t.element.className = 'flake red';
    document.body.appendChild(t.element);
    t.pos = {
        x: 0,
        y: 0    
    };        
};

Snowflake.prototype = {
    type: 'Snowflake', 
    update: function(){
        var t = this;
        t.pos.y += 1;
        t.element.style = 'left:' + t.pos.x + '; top:' + t.pos.y + ';';
    }
};