<div class="container">
<svg width="600" height="400" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<path id="cloud1" d="M-24.205 89.653c-.048-.858-.072-1.723-.072-2.593 0-25.167 20.438-45.568 45.65-45.568 7.987 0 15.495 2.047 22.026 5.645C49.733 20.12 74.025 0 103.024 0c30.752 0 56.21 22.625 60.577 52.108 1.56-.16 3.143-.243 4.745-.243 25.21 0 45.65 20.4 45.65 45.568C214 122.6 193.56 143 168.35 143H-24.278C-39.038 143-51 131.058-51 116.326c0-14.73 11.964-26.673 26.723-26.673h.072z" opacity=".4" fill="#FFF" fill-rule="evenodd"/>
<path id="cloud2" d="M128.42 62.694c.033-.6.05-1.205.05-1.813 0-17.596-14.293-31.862-31.924-31.862-5.585 0-10.835 1.43-15.402 3.947C76.712 14.07 59.724 0 39.446 0 17.942 0 .14 15.822-2.916 36.44c-1.09-.113-2.197-.17-3.317-.17-17.63 0-31.924 14.266-31.924 31.865C-38.157 85.733-23.864 100-6.233 100H128.47c10.32 0 18.687-8.35 18.687-18.653 0-10.302-8.366-18.653-18.687-18.653h-.05z" opacity=".3" fill="#FFF" fill-rule="evenodd"/>
<g id="rocket" fill="none" fill-rule="evenodd">
<g id="flame" fill="none" fill-rule="evenodd">
<path d="M37.957.898s24.385 33.987 18.18 35.765c-6.203 1.78-15.15-12.215-15.174-3.03-.025 9.183 15.664 23.193 6.74 21.14-12.786-2.946-17.86-21.3-18.36-9.46-.5 11.838 3.24 24.093-7.87 13.83C10.36 48.88 12.706 29.31 10.8 36.675c-1.905 7.365-1.388 22.79-5.82 16.2C.55 46.282.147 14.62.147 14.62L37.957.9z" fill="#FF5B0D"/>
<path d="M30.482 3.97s17.482 18.04 13.224 18.796c-4.257.754-11.3-4.462-10.826 1.15.476 5.614 6.177 13.274.1 8.923-6.076-4.354-10.003-13.51-9.718-6.3.285 7.21 5.17 18.003-1.024 10.335C16.045 29.21 11.93 17.89 10.988 22.29c-.94 4.4.25 13.86-3.213 9.592-3.464-4.268-1.732-19-1.732-19l24.44-8.912z" fill="#FFD03D"/>
</g>
<path d="M96.008 81.165c-1.11-6.988-2.935-13.838-5.446-20.39C78.54 29.41 51.78 6.25 20.735.347c-.876-.167-1.78.18-2.322.89C-.722 26.373-5.145 61.487 6.876 92.85c2.433 6.348 5.528 12.494 9.213 18.276-1.78 3.96-3.277 8.263-4.458 12.817-.187.698-.035 1.45.42 2.024l31.82 40.84c.536.69 1.405 1.02 2.263.878.842-.153 1.55-.755 1.838-1.578 2.097-6.12 6.06-11.85 11.304-16.364l.934 2.44c.465 1.21 1.82 1.82 3.038 1.355l25.793-9.886c1.227-.47 1.83-1.833 1.366-3.04l-.715-1.865c6.92-.135 13.694 1.468 19.348 4.63.61.342 1.358.386 2.003.14.14-.055.284-.135.413-.22.734-.466 1.146-1.287 1.1-2.152l-3.634-51.657c-.038-.708-.427-1.37-1.026-1.78-3.918-2.586-7.91-4.79-11.89-6.543z" fill="#FFF"/>
<path d="M55.53 62.857c-3.134 5.73-9.136 9.295-15.68 9.295-6.22 0-11.89-3.165-15.172-8.447-1.73-2.807-2.652-6.017-2.652-9.295 0-9.776 7.996-17.73 17.823-17.73 9.83 0 17.82 7.954 17.82 17.73 0 2.955-.746 5.88-2.14 8.447z" fill="#75C9EC"/>
<path d="M27.543 59.59c1.013 2.168 2.63 4.02 4.66 5.35 3.84 2.504 8.6 2.838 12.73.91 4.363-2.038 7.255-6.273 7.56-11.07.14-2.15-.276-4.32-1.197-6.294-3.046-6.497-10.846-9.317-17.393-6.26-6.544 3.055-9.4 10.85-6.36 17.363z" fill="#0096D5"/>
</g>
</svg>
</div>
.container{
position: relative;
width: 600px;
height: 400px;
background: #0096D5;
background-image: linear-gradient(0deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
}
#rocket {
transform: translate(260px,200px);
}
#flame{
transform: translate(55px,135px);
}
#cloud1{
-webkit-animation: fall 1s linear infinite;
}
#cloud2{
-webkit-animation: fall-2 2s linear infinite;
}
@-webkit-keyframes fall {
from{
transform: translateY(-100px);
}
to {
transform: translateY(1000px)
}
}
@-webkit-keyframes fall-2 {
from{
transform: translate(200px,-100px);
}
to {
transform: translate(200px,1000px)
}
}