<div class="waves">
    <svg height="90vh" fill="none" viewbox="-50,-50,500,500" style="outline: 3px dashed" preserveAspectRatio="none">
      <defs>
        <mask id="myMask" x="0" y="0">
          <g transform="rotate(45,200,200) translate(20,0)">
          <circle cx=100 cy=100 r=75 fill="white" >
            <animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate>
            </circle>
          <circle cx=300 cy=100 r=75 fill="white"><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
          <circle cx=100 cy=300 r=75 fill="white"><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
          <circle cx=300 cy=300 r=75 fill="white"><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
          <rect x=100 y=75 width=200 height=50 fill="white"></rect>
          <rect x=75 y=100 width=50 height=200 fill="white"></rect>
          <rect x=100 y=275 width=200 height=50 fill="white"></rect>
          <rect x=275 y=100 width=50 height=200 fill="white"></rect>
          </g>
          <text x=-20 y=420 fill="white">ПР0Х0ДИТ</text>
          <text x=270 y=420 fill="white" transform="rotate(-15,10,10) translate(-70,0)">З0ГРУЗКА...</text>
        </mask>
      </defs>
      
      <g transform="rotate(45,200,200) translate(20,0)">
        <circle fill="gray" class="circle" cx=100 cy=100 r=75 >
          <animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate>
        </circle>
        <circle class="circle" cx=300 cy=100 r=75 ><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
        <circle class="circle" stroke="black" cx=100 cy=300 r=75 ><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
        <circle class="circle" cx=300 cy=300 r=75 ><animate repeatCount="indefinite" attributeName="r" values="75;80;75" dur="3s"></animate></circle>
        <rect class="circle" x=100 y=75 width=200 height=50 ></rect>
        <rect class="circle" x=75 y=100 width=50 height=200 ></rect>
        <rect class="circle" x=100 y=275 width=200 height=50 ></rect>
        <rect class="circle" x=275 y=100 width=50 height=200 ></rect>
      </g>
      <path mask="url(#myMask)" id="wave" d="m 131.31983,-22.782869 c 14.25725,39.6487 14.93458,109.631081 -29.94667,134.584029 -34.685077,37.02761 -31.662302,78.11375 -6.859602,108.48066 30.444722,43.78578 27.059962,82.13295 9.551202,116.25003 -24.321902,44.74714 35.61432,44.55094 39.79892,81.00536 -43.76563,20.62213 -100.997664,-1.25535 -149.9245952,2.79094 L -7.0710678,-30.537309 c 46.1302978,2.58481 92.2605958,5.16964 138.3908978,7.75444 z" fill="lightblue" stroke="none">
        <animate repeatCount="1" attributeName="d" fill="freeze" dur="18s"
                 values="M 8.0812154,-82.381869 C 22.338465,-42.733169 9.8838215,-21.23811 -34.997428,3.7148352 -69.682508,40.742443 -102.01508,105.06209 -77.212378,135.429 c 72.4011395,43.78578 93.701882,161.93501 55.008062,196.05209 -24.3219,44.74714 -10.852681,30.4088 -6.668081,66.86322 -43.76563,20.62213 -72.713403,37.13045 -121.640333,41.17674 l 39.39595,-452.885766 c 46.130298,2.58481 73.067695,-71.601953 119.1979954,-69.017153 z;m 131.31983,-22.782869 c 14.25725,39.6487 14.93458,109.631081 -29.94667,134.584029 -34.685077,37.02761 -31.662302,78.11375 -6.859602,108.48066 30.444722,43.78578 27.059962,82.13295 9.551202,116.25003 -24.321902,44.74714 35.61432,44.55094 39.79892,81.00536 -43.76563,20.62213 -100.997664,-1.25535 -149.9245952,2.79094 L -7.0710678,-30.537309 c 46.1302978,2.58481 92.2605958,5.16964 138.3908978,7.75444 z; m 131.31983,-22.782869 c 14.25725,39.6487 -7.28878,75.285894 -52.170029,100.238844 -34.685074,37.027605 -9.438943,112.458935 15.363757,142.825845 30.444722,43.78578 -8.295377,79.10249 -25.804137,213.21957 -24.321902,44.74714 70.969659,47.5814 75.154259,84.03582 -43.76563,20.62213 -100.997664,-1.25535 -149.9245952,2.79094 L -7.0710678,-30.537309 c 46.1302978,2.58481 92.2605958,5.16964 138.3908978,7.75444 z;m 131.31983,-22.782869 c 14.25725,39.6487 79.58434,79.326505 34.70309,104.279453 -34.68507,37.027606 -99.342519,84.174666 -74.53982,114.541576 72.40114,43.78578 116.9354,95.26493 78.24158,129.38201 -24.32191,44.74714 -30.0456,55.66262 -25.861,92.11704 -43.76563,20.62213 -100.997664,-1.25535 -149.9245952,2.79094 L -7.0710678,-30.537309 c 46.1302978,2.58481 92.2605958,5.16964 138.3908978,7.75444 z;m 251.52798,-28.843784 c 14.25725,39.6487 -40.62381,85.38742 -85.50506,110.340368 -34.68507,37.027606 48.13975,91.245726 72.94245,121.612636 72.40114,43.78578 34.10289,95.26494 -4.59093,129.38202 -24.3219,44.74714 -33.07605,74.85552 -28.89145,111.30994 C 161.71736,464.42331 42.866016,416.28186 -6.0609152,420.32815 L -7.0710678,-30.537309 c 46.1302978,2.58481 212.4687478,-0.891275 258.5990478,1.693525 z;m 359.61431,-24.803174 c 14.25725,39.6487 -63.85732,112.661539 -108.73857,137.614484 -34.68508,37.02761 -18.53032,58.92085 6.27238,89.28776 72.40114,43.78578 -18.42505,76.07204 -57.11887,110.18912 -24.3219,44.74714 50.76661,115.26162 54.95121,151.71604 C 211.21483,484.62636 42.866016,416.28186 -6.0609152,420.32815 L -7.0710678,-30.537309 C 39.05923,-27.952499 313.484,-27.387974 359.61431,-24.803174 Z;m 428.30468,-29.853937 c 14.25725,39.6487005 -82.04006,83.367115 -126.92131,108.32006 -34.68508,37.027607 -26.61155,115.489387 -1.80885,145.856297 72.40114,43.78578 27.03183,117.4883 -11.66199,151.60538 -24.3219,44.74714 56.82752,114.25147 61.01212,150.70589 C 305.15902,547.25582 42.866016,416.28186 -6.0609152,420.32815 L -7.0710678,-30.537309 c 46.1302978,2.58481 389.2454478,-1.901428 435.3757478,0.683372 z;M 469.72093,-51.06714 C 483.97818,-11.41844 400.81286,39.371043 355.93161,64.323988 321.24653,101.3516 166.6855,176.78292 191.4882,207.14983 263.88934,250.93561 421.56068,307.46553 382.86686,341.58261 358.54496,386.32975 181.09534,471.99652 185.27994,508.45094 141.51431,529.07307 42.866016,416.28186 -6.0609152,420.32815 L -7.0710678,-30.537309 C 39.05923,-27.952499 423.59063,-53.65194 469.72093,-51.06714 Z;m 499.01535,-88.442784 c 14.25725,39.6487 109.88893,130.844285 65.00768,155.79723 -34.68508,37.027604 -33.68261,100.337104 -8.87991,130.704014 72.40114,43.78578 -20.44536,167.99592 -59.13918,202.113 -24.3219,44.74714 84.10166,109.20071 88.28626,145.65513 C 540.52457,566.44872 4.4802192,436.48491 -44.446712,440.5312 L -55.55839,-51.750513 c 46.1302977,2.58481 508.44344,-39.277071 554.57374,-36.692271 z"
                 
                 ></animate>
        </path>
        
    </svg>
</div>
.circle{
  fill: gray;
}
text{
  
  font-size: 30px;
  font-weight: 600;
  font-family: sans-serif;
}
// 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.