JSFiddle - React, Tailwind, and code Playground

by pixeline

HTML

<p>Hello world welcome to the <a href="http://2flamingos.com" target="_blank">2flamingos</a></p>

CSS

html { background: #FFF; }

JavaScript

/*
tweaked out of jake archibald 's https://gist.github.com/4338551
*/
(function() {
    var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
    function(func) {
        setTimeout(func, 17);
    };

    var html = document.documentElement;

    function Snowflake(maxX) {
        this.reset(maxX);
    }
    Snowflake.prototype.tick = function() {
        var sidePhase = this.sidePhase += this.sideVel;
        this.y -= this.vel;
        this.x += this.sideVel;
    };
    Snowflake.prototype.reset = function(maxX) {
        var rand = Math.random();
        var chanceOfLargeSnowflake = 0.15;

        this.size = 2 + Math.random() * 5;
        this.vel = 3 + Math.random() * 3;
        this.alpha = 0.5 + Math.random() * 0.8;

        // random x position
        this.x = Math.random() * maxX;
        this.y = +this.size;

        // side-to-side movement
        this.sideVel = (0.5 - Math.random()) * this.vel;


        return this;
    };

    (function() {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var settleCanvas = document.createElement('canvas');
        var settleContext = context && settleCanvas.getContext('2d');
        var canvasStyle = canvas.style;
        var settleCanvasStyle = settleCanvas.style;
        var windowResized;
        var activeFlakes = [];
        var snowflakesPerPixelPerSecond = 0.015;
        var PIx2 = Math.PI * 2;
        var assumedFps = 30;
        var settlePoint;
        var snowflakePool = [];

        function resizeCanvas() {
            settlePoint = Array(html.clientWidth);
            settleCanvas.width = canvas.width = html.clientWidth;
            settleCanvas.height = canvas.height = html.clientHeight;
        }

        function updateSettlePoints(flake) {
            var size = flake.size * 0.8; // reduce coral effect
            var xStart = Math.floor(flake.x - size);
  ...