Как нарисовать и анимировать реальное небо с облаками?

Question

На создание этого вопроса меня вдохновил вопрос - ответ участника @Alexandr_TT, где он нарисовал простое мультипликационное облако с использованием технологии SVG.

Вот предлагаю посмотреть похожую реализацию простого мультипликационного облака, но только уже с использованием технологии CSS:

body {
  background: lightskyblue;
}
.cloud {
  position: relative;
  margin: 0 auto; margin-top: 80px;
  width: 300px; height: 120px;
  border-radius: 100px;
  transform: rotate(15deg);
  background: white;
}
.cloud:before, .cloud:after {
  content: '';
  position: absolute;
  background: white;
}
.cloud:before {
  top: -30px; right: 10px;
  width: 280px; height: 170px;
  border-radius: 200px;
  transform: rotate(-55deg);
}
.cloud:after {
  top: 0px; left: 30px;
  width: 250px; height: 100px;
  border-radius: 100px;
  transform: rotate(45deg);
}

<div class="cloud"></div>

Вопрос: возможно ли нарисовать и воспроизвести анимацию реального неба с облаками, используя любые средства и технологии для рисования и создания эффекта анимации и трансформации, указанные в метках вопроса?

Answer 1

Вариант с использованием технологий SVG и CSS, с добавлением фильтров и теней:

body {
  background-color: gray;
}
#cloud {
  position: relative;
  top: -360px; left: -360px;
  width: 90%; height: 100px;
  filter: url(#filter);
  box-shadow: 400px 400px 60px 0px white;
}
.moon {
  z-index: -1;
  position: absolute;
  top: 50px;
  right: 24%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #777;
  background: radial-gradient(#fff, #000 0, #fff 100%);
  box-shadow: 3px 3px 20px 6px rgba(0,0,0,0.3);
}

<div id="cloud">
<svg width="0" height="0">
<filter id="filter">
<feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
<feDisplacementMap in="SourceGraphic" scale="100" />
</filter>
</svg>
</div>
<div class="moon"></div>

Предлагаю доработать (улучшить) это решение и дать самостоятельный ответ. А также приветствуются любые другие индивидуальные варианты ответов.

Answer 2

Не реальные облака

const images = document.querySelectorAll('.clouds img');
images.forEach((elem, i) => {
  elem.addEventListener('load', () => {
    const str = `animate ${8*(i+1)}s linear infinite`;
    elem.style.animation = str;
  });
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', sans-serif;
}
img {
  max-width: 100%;
  display: block;
  pointer-events: none;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(https://picsum.photos/2000/1000) no-repeat center;
  -webkit-background-size: cover;
  background-size: cover;
}
.banner .clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.banner .clouds img {
  position: absolute;
  bottom: 0;
}
@keyframes animate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
section {
  position: relative;
  padding: 50px 0;
}
section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

<div class="banner">
  <div class="clouds">
    <img src="https://lh3.googleusercontent.com/HYOFIdSEozedbPcCO08K_ksED3OL4r8VeVbSvlWNerPtzykQxc-l1f_0Q7LvEm874Xszt04wqKdMpedVv0zIanR7BkWuYijyphP0rU5npsPY8qjcJaDUjwWo74GEfk5sWZrmGTBc8uB94HaRV6rbbiKjZxef5_nQu-4BykY_MU4_Tcejwb77aY36AN1IUu9K2ZF2rvedSh0VglhZTytvXCt4NU5AE4AUYu6As3DYkJG-f7hMNOWF03irvYTLMy_MmXFn-6WjVyedVQ6NMO7wY85_nMbu2OVdzQ-7DBXP9IQiue2RRQQ6hQSTQXGudgYPKp_AiaK__JWDsfjgls40qZGkEOx1pri36HuWdDSAEZ9Ph8qWl9VuFugquHanSctyjFOp5-3xNagxvzpVmfu_vt8tmCzasKfr9F0MUQTfmy6WimG6ViSt_KO_fOTb25CruzFZujvCL3At7JsAz4MAfz8dazhCeVVJJp3hwz5wuJS5Yd1Qn9CX_KOlmlXc2pS7zS88_S2Zs8znFfSCfUryZr92JZyUGYuJ6Vni8chKGEO4g13OOG-dn9t5Qetk-S_SiCqCrrBbWrJLHDICMb7wC1pc_rd3LBUk2n08Y5P1CJa-hhzbUHM-j0650CyCXcezF0HgRK86agV1WMTklCl1UwAwlatYWrNcyl_07IQ0hMnjn1K9_BQeoLVnSC5XQIanIbnA=w1919-h947-ft">
    <img src="https://lh3.googleusercontent.com/5mvan3wmp-w1vWlq8c9Jv_dlU7HTNpdrayWJm5Cjm6Z9i2znsG9nE1GCZ4gk5m6cxZcEq3IQ5z5mhiAc_MEWLQpoJMZcE9VNqZJCxUD-85NAKHbHFFLGZHbiCJPAcTMT7qiBOXP490NQ2nVXG6wYVnN6Ry5sY4jhSpAD05UDKuqeH1a1otp2kEGWV8_DhW80Qk3GxPQ65tXsHSl975O8CacDqv4lOCC0ZMvVavluryPOIIjOzB_zCa3GEwyVnOvFdre7IRkWur-Cytxtpbrhqaybs_GL2_H5X-7wj0b3ryNsCFQyrRrvrIQZP0DIS8QDyj_HmDlzUBPa4WKPH6bn3RdDawE7OLCncHMd8bGHHnzb6anhU5iXnmsQPliNlzPhnpsbNUzCcFRH6wZ4u-ilYJcIL1J8vNPeAlhq-SjNiYKEe-n1BmijrdC-arH8vwGhQYz_GrIOznmDoxq8q0oRhDpktyw7GtGNIqdE9OoFz_emC97xz8EQ7XsfdKve_BVMy8lxXnEe8Kdbw6E0_a9bIHIajzuElyNqejXCW6yZnz45VHfzKyLGraN06JCQGYbSKMUCbk3maoVxccjb38NjfZVb4m3Zu571dW8-4KeIWdVoWRFe4Iw8l_sb5YD4MbZ_M3X277Ctp1CL21H4HlsJTtWbqnuBYUUoyTJpcm8vigM4uWYN5e71yl6aDCdjbGu6l-_D=w1919-h947-ft">
    <img src="https://lh3.googleusercontent.com/3I_RWn8GmvbZk-rRJx0-AQNld6WowOKrLP-FPffpWTo--TQwBgT3aUikrsupsFEtl86cuohBlhUXY7PIPkXZTVqXxy7HdSc-cugH9fGJinNQchJFaWhKDPXBK-XZhFOGGemcBh8zddI4e1OVXAv2YwXTYxMCXsOO8AxGvYJHYL8r4eHokxV0ZC_et5cU21c3HlWjZK-R6QCNFU21hkacNRczBbQ2JCPrfoRbo3dFm1y2Ibczl326ExcTzrUVY7y4AtBjFuNJW195rbajdwGSBBKxfcymVHmQ9j5owovdX5lrGjIm2BYTfs4uMDwPKOh6hIVaAo8jCqkAjGd9shiJxnDUuClYYq6JcwKGBTyDsftMTaDWtKJbGy3ayT6cZ_OmlvafkrsNfAaPu1yTFVWWMcaRij8yZTO74S5qQzNiQAiugD8_Mfn5lobl1kI8Q6ZfV6nMVLFGYPXiR2dw-l-BcyYu6-G-PCuk1TXx1w9BLZnuMLnh30pzJGbxL_YI2zk1B__mwbt_Olzl98gmQRGB6H5FH0vuRqkqv9zjszJI-44aJUHELFawUBAZNxdYEGss26iTGeDL_zHtn2-QBgfa1WGrAXqVZio8IaE6LvXz1jnoPmT_CLEs1ZHJXxlIxnbYiSt53oa-7GI9hoqULUqfQzVtjE0wjpbU-GaJjGO-TNQq4ffUh5rHRzYZFQVX9m7nhqGn=w830-h947-ft">
    <img src="https://lh3.googleusercontent.com/uLultoDSQUnW41gQzV3Y1ZUv-iHApQ_jVcvn6_sAOAWTYdHxk1VBGRIC-PVZXk7woUc0Q0AErWMNqTf5IGc0VLY_U2lrvFTKE8ic2mLafQOCLRSv9qiwic5NE1qrqYMpO5_Kbx9gfVS6PduQtx1SX_nm7BjyLJpW_0cXRaMR9r-4XilrILw3wQD7jmSAQGJzdNS_VWyIFHIa7GaGyDHLFMD06q_WCVWhd7i0H3EvT35-HMa9eGP_jYJPOBlGJSSvw_ht1jTCXo8AXY-yYeRnbj5smEQGj6AHvscrETYTLh9PJhy7iJ9YQKknvxGPn4Za3ZFM0do_FvQ-bogDMn3G6WrkZ8Q9UAyOfU_OlLOkDs4h0tkklpuZOMLhiHWnq9lh9P7APgpxFiqodDY5MOEtl8Lweli3ca2IvyweQgEuQ4VNL3A1csVwiMd8ufGWPzsdJFUuVSzY-NE9VojmNO5CpvQ91K2sLQZVQCIRJIcRwgTsIgd6zS7Xwlgtwmdbx-4RsWbU_nRl5YebyDf1hENT9-epY8Jyy-Vk87QeydXIL2oqrRhtyaMAgciSBSlyow12ElD_pl58Kz7_9OfluLzqy7wcL0EkM62GltYubrhyFKKlIefcIqjbIaNYyKlVHoqmKyz1cy4Xy4e5PwNYlhiifYwifWCz51ydeRaUwnxtyZCMq4kVzi_wqGb2qa1GuXJDFNbu=w830-h947-ft">
    <img src="https://lh3.googleusercontent.com/ovV6xb41xzr9EOIQPqKbh-F33WmvxLOM9Af1gmJBYUmwLaB-fjc_O_6Ld19lOM4MfVf4Xcmouj1uPXJB4nFmRk3bv49cjB93qOZYKtXKQYySsaYwwYtivM3EA3UHCIIYEkca6TKGUHdC4_piEIsRTk40XPrRlhjQlodvvNXRI8A5h4agIbKyURemWfReUMColrBYlxHHAlTuUlx8uDe1_l2OhXq2mFfeb-FZ_iJGNyjZ3Rh4GpqCY0yPqItye92kwuWzM2e4K3OPQFukkyFmaH30nYYYFMc24pCOStFcL7Xzz1KbfitFs9DEh0l74wkrJW4qpic-P4vVgYpKh11f7wpmRj5W2KQRnibnq4jz3Rh-NxKTuF8RZW7x_0C9xp0tg0NWV7wZKJtiQ28mtwd_4X1oRRznk4Ron_8mpyCRf98nf5B8PpLh8XJNyCE4lUOihEKYRvO-6zrxOQ244GbHLS0SPNbNk5by6ji5TjB-yt21z7iag4XbtQZSpYXMqeI2bGl-znOGZAeAwAKiO_0BAPh3YQQC5NKHAGRcmsvUI0aXZRcR0hrfc8YfZ6JJ_tFDLHEdDFCS_H-em3LTbnXjjNaaLeHUmWg2geqACPjllaytmKL2g8UNTXtwhlPUXumBF1ZicDDsiP6pavWxiWmFJHKgBlt3Xb1xihnbfynu5ndjyTx0xFSZnmskE3ZRdpwUBt0U=w830-h947-ft">
  </div>
</div>

<section>
  <div class="container">
    <h2>CSS Cloud Banner Animation Effects</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, quisquam asperiores inventore laudantium ea! Deserunt repudiandae quas ex. Velit accusantium ratione voluptas saepe repellat. Ducimus blanditiis dolorem, inventore similique aspernatur.
    </p>
  </div>
</section>