JSFiddle - React, Tailwind, and code Playground

by scruffles

HTML

<div id="sky"></div>

<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="372.435px" height="174.741px" viewBox="0 0 372.435 174.741" enable-background="new 0 0 372.435 174.741"
	 xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M53.732,146.614C-0.616,170.527-23.442,69.44,34.167,65.092
	c-9.782-57.18,81.589-85.498,107.677-46.368c25-32.608,96.802-18.938,104.995,21.019c35.154-18.129,72.111-5.085,84.067,35.132
	c86.957,12.464,18.479,135.87-46.739,70.652c-45.521,42.391-94.99,32.877-128.976,3.53
	C130.481,176.231,65.688,185.745,53.732,146.614z"/>
</svg>

CSS

body {
    background-color: #96CDFF
}

JavaScript

var $svg = $('svg')
    .css({
        position:'absolute',
        left: '-400px',
        top: '30px',
    })
    .hide();

function cloneAndRun(top, left, time) {
    $svg.clone()
        .css({
            top: top + 'px',
            left: left + 'px',
            fill: 'blue'
        })
        .appendTo($('#sky'))
        .show()    
        .animate({
            left: '+=5050'
        }, time * 1000);
}

cloneAndRun(80, -400, 23);                  
cloneAndRun(150, -600, 22);                  
cloneAndRun(150, -300, 22);