JSFiddle - React, Tailwind, and code Playground

by arcm111

CSS

.cloud {
    position: absolute;
}
body {
    overflow: hidden;
    background: #29ABE2;
}

JavaScript

var h = 100;
var w = 200;
var svg = function (w, h) {
    var img = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="' + w + 'px" height="' + h + 'px" viewBox="0 0 518.551 235.021" enable-background="new 0 0 518.551 235.021" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="259.2759" y1="232.0215" x2="259.2759" y2="3.0005">	<stop  offset="0" style="stop-color:#CCCFE9"/>	<stop  offset="0.0237" style="stop-color:#CFD2EA"/>	<stop  offset="0.2044" style="stop-color:#E4E6F4"/>	<stop  offset="0.4057" style="stop-color:#F3F4FA"/>	<stop  offset="0.6422" style="stop-color:#FCFCFE"/>	<stop  offset="1" style="stop-color:#FFFFFF"/></linearGradient><path fill="url(#SVGID_1_)" stroke="#0071BC" stroke-width="6" stroke-miterlimit="10" d="M490.408,232.021	c13.886,0,25.143-11.258,25.143-25.144c0-13.886-11.257-25.143-25.143-25.143c-2.235,0-4.401,0.295-6.465,0.843	c0.244-1.839,0.383-3.712,0.383-5.619c0-23.387-18.959-42.347-42.347-42.347c-16.629,0-31.012,9.59-37.939,23.536	c-4.282-1.99-9.051-3.107-14.083-3.107c-3.802,0-7.452,0.643-10.858,1.811c-1.323-28.126-24.543-50.526-52.997-50.526	c-6.244,0-12.231,1.087-17.795,3.068c0.814-4.902,1.245-9.935,1.245-15.068C309.551,43.888,268.663,3,218.225,3	c-43.784,0-80.365,30.813-89.257,71.937c-19.153,6.653-32.907,24.849-32.907,46.267c0,6.756,1.368,13.191,3.842,19.046	c-7.648,1.577-14.623,4.912-20.445,9.557c-8.096-6.875-18.575-11.032-30.029-11.032C23.787,138.775,3,159.562,3,185.204	c0,25.642,20.787,46.429,46.429,46.429L490.408,232.021z"/></svg>';
    return img;
};

var clouds = 4,
    cloudSpeed = 20,
    browserWidth = window.innerWidth,
    browserHeight = window.innerHeight,
    int = 5;

for (i = 0; i < clouds; i++) {
    createCloud(cloudSpeed, i, int);
}


function moveCloud(cloud) {
    var posX = (cloud.offsetLeft < -250) ? browserWidth : cloud.offsetLeft;
    posX--;
    cloud.style.left = posX + "px";
}

function...