JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<script src="http://maroslaw.github.io/rainyday.js/dist/rainyday.0.1.1.min.js"></script>
<img src="http://lorempixel.com/650/400/sports/2/" id="img" alt="" crossorigin="anonymous"/>
<div id="container">
    <canvas id="stage"></canvas>
</div>

<script>
function rainy() {
    var img = document.getElementById('img');
    img.onload = function() {

    var engine = new RainyDay('stage', 'img', window.innerWidth, window.innerHeight);
        
        engine.gravity = engine.GRAVITY_NON_LINEAR;
        engine.trail = engine.TRAIL_DROPS;
        engine.rain([ engine.preset(3, 3, 0.88), engine.preset(5, 5, 0.9), engine.preset(6, 2, 1) ], 100);
        
    };

}

window.onload = rainy();

</script>

CSS

* {
    margin: 0; padding: 0;
}
body {
    overflow: hidden;
}
#img {
    display: none;
}
#container {

}
#stage {
    position: absolute; top: 0; left: 0;
}