Как сделать баннер с капающим краном

134

23 июня 2019, 01:50

Как сделать баннер с капающем краном.

У меня есть изображение капающего крана

Сценарий анимации

Водопроводный кран, из которого тянется и падает капелька воды.
Цикл повторяется несколько раз
Кран медленно исчезает
Появляется надпись: Из капающего крана, за сутки убегает 10 вёдер воды.
Не хотите платить лишние деньги за ЖКХ, позвоните нам.
Номер телефона сантехника
Переход к первому пункту анимации

Вот так, по списку, должны идти этапы анимации, далее зацикливание,- переход к первому пункту.

Для реализации анимации допустимы SVG, CSS, Javascript, jquery или их совместное использование.

Update 21.12.2018

Добавляю несколько векторных изображений водопроводных кранов. Делаю это по запросу в комментариях. Можете их использовать или свои. Полная свобода для творчества.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 1222.9 1649.7" enable-background="new 0 0 1222.852 1649.688" xml:space="preserve"><path d="M799.6 1608.7c129.9 0 259.8-0.2 389.7 0.1 0 3.7-0.1 7.4-0.1 11.1 -129.9 0.1-259.7 0-389.6 0C799.5 1616.2 799.5 1612.5 799.6 1608.7z"/><path d="M799.5 1583.7c49.6-0.2 362.1-0.2 389.8 0 0 3.8-0.1 7.5-0.1 11.3 -129.9-0.2-259.8-0.2-389.6 0C799.5 1591.2 799.5 1587.4 799.5 1583.7z"/><path d="M799.6 1533.5c129.9 0.1 259.7 0.1 389.6 0 0 3.8 0.1 7.5 0.1 11.3 -56.5 0.3-365.3 0.2-389.8 0C799.5 1541 799.5 1537.2 799.6 1533.5z"/><path d="M799.4 1558.7c50.3-0.2 376-0.6 390 0.1 -0.2 3.7-0.2 7.4 0 11.1 -56.4 0.4-362 0.3-390 0C799.5 1566.1 799.5 1562.4 799.4 1558.7z"/><path d="M1189.3 1608.8c-129.9-0.3-259.8-0.1-389.7-0.1 -0.1 3.7-0.1 7.5 0 11.3 129.9 0 259.7 0.1 389.6 0C1189.2 1616.2 1189.3 1612.5 1189.3 1608.8zM795 1604.1c50.6-0.4 366.2-0.3 398.9 0 0.3 6.9 0.2 13.7 0.1 20.6 -51 0.3-374 0.2-399 0.1C794.8 1617.8 794.8 1610.9 795 1604.1z"/><path d="M1193.9 1574.6c-132.9 0-265.8 0.2-398.8-0.1 -0.4-6.8-0.3-13.7 0-20.5 133 0 265.9 0 398.9 0C1194.2 1560.9 1194.3 1567.8 1193.9 1574.6zM799.4 1558.7c0.1 3.7 0.1 7.4 0 11.1 28.7 0.3 335 0.4 390 0 -0.1-3.7-0.1-7.4 0-11.1C1175.3 1558.1 850.3 1558.4 799.4 1558.7z"/><path d="M799.6 1595c129.9-0.2 259.8-0.2 389.6 0 0-3.8 0-7.5 0.1-11.3 -27.5-0.2-339.8-0.2-389.8 0C799.5 1587.4 799.5 1591.2 799.6 1595zM1194 1599.7c-133 0.2-265.9 0.2-398.9 0 -0.1-7-0.5-14 0.3-20.9 132.8 0.1 265.6 0.1 398.5 0C1194.4 1585.7 1194.2 1592.7 1194 1599.7z"/><path d="M795 1529c133-0.1 266-0.1 399 0 0.1 6.8 0.1 13.6-0.1 20.5 -50.1 0.3-367 0.3-398.9 0C794.8 1542.7 794.9 1535.8 795 1529zM799.5 1544.8c25.9 0.2 333.9 0.3 389.8 0 0-3.8 0-7.5-0.1-11.3 -129.9 0.1-259.7 0.1-389.6 0C799.5 1537.2 799.5 1541 799.5 1544.8z"/><path d="M799.6 1508.3c129.9-0.1 259.8-0.1 389.7 0 0 3.8 0 7.6 0 11.5 -54.7 0.2-364.2 0.2-389.7 0C799.5 1516 799.5 1512.2 799.6 1508.3z"/><path d="M83.3 1417.4c-18.1-0.2-36.2-0.2-54.3 0 -0.5-137.4 0-274.8-0.3-412.2 18.3-0.1 36.6-0.2 54.8 0.1C83.2 1142.7 83.7 1280 83.3 1417.4z"/><path d="M588.8 90.7c74.3 1 183.3 3.1 183.3 3.1 27.5 67.3 1.6 119.6-11.6 131.9 -36.1-5.5-173-22.5-183.4-22.9 2.9-7.1 10.9-19 10.5-46.5C590 108.1 587.1 110.8 588.8 90.7z"/><path d="M393.4 34.5c31.7 27.2 13.3 144.2-18.3 178.5 -25.3 25.3-46.2-12.9-53.2-19.6 -9.5-10.7-24.8-12.7-38.2-13.9 -45.4-5.5-99.1-7.8-129.9-7.2 -11.8 1.2-23.8 1.9-35.6 0.1 -2.5 3-3.5-0.2-4.3-1.8l2.2 2.4c32.8-26.1 26.3-125.1-4.1-132.8 70-51.6 144.4 45.7 219.8 4.3C367.1 27.6 374.8 18.6 393.4 34.5z"/><path d="M129.9 76.3c12.3 57.8-13.6 120.1-34.7 80.6C65.1 95.3 108.8-7 129.9 76.3z"/><path d="M238.4 941.8c155.5 0.3 311.1 0.1 466.6 0.1 0.2 11.6 0.2 23.2 0 34.8 -155.5 0-311-0.1-466.6 0.1C238.1 965.1 238 953.4 238.4 941.8z"/><path d="M608.5 706.7c-147.9 0.1-269.9 0.7-269.9 0.7 0-1.3-8.4-247.7-8.4-247.7 143.4-12.1 237.7-3.4 266.7-3.5C597.2 457.8 608.4 705.6 608.5 706.7z"/><path d="M696.2 851.1c-0.4 27.9-0.1 55.7-0.1 83.6 -51.8 0.2-406.3 0.2-448.1 0 -0.1-27.9 0.2-55.7-0.1-83.6C266.4 850.6 675.4 850.7 696.2 851.1z"/><path d="M609.5 800.2c-83.2-5.8-96.6-17.3-297 0.5 -1.8-22.3-0.9-44.6-2.7-66.9 6.3 0.2 280.3 2.8 320.7 3.7 -0.4 21.4 0 42.8-0.2 64.2C623.4 800.9 616.3 801.9 609.5 800.2z"/><path d="M583.9 88c-2 26.2 4.5 81.3-8.5 107.2 -20.9 41.1-35.3 48.2-47.8 54.6 -1.1-16.2-1.2-32.5-1-48.7 -7.5-2.9-64.7-2.6-65.7-2.6 -25.2-0.3-28.3 17.6-39.4 23.3 -13.5 7.1-35.4 1.7-49.7-0.3 -2-0.8 2.5-1.3 2.4-1.2 35.3-27.5 57.5-157.2 23.3-188.6C585.3 45 581.6 29.4 583.9 88z"/><path d="M696.5 845.9c-149.6-0.1-299.1 0.3-448.7 0.1 0.2-10.8-0.2-21.6 0.2-32.4 339.1-29.1 188.8-11.2 332-10.4 0 0 115.1 9.8 116.3 9.8C696.6 824 696.6 835 696.5 845.9z"/><path d="M394.8 447.7c-0.1-0.8-8.2-210.2-8.1-218.7 12.7 0.6 26.7 3.3 38.3-3.8 8.8-4.6 12.1-15.7 21.8-18.9 15.7-7.4 59.6-1.3 75.1-1.5 0.6 50.2 7.7 240.9 7.8 242.6C529.6 447.4 394.8 447.7 394.8 447.7z"/><path d="M613.2 714.6c4.9 6.2 10.5 11.9 15.3 18.1 -179.9-2.8-274.7-2.7-314.3-3.3 27.8-20.3 19.6-16.6 28.9-17.1C407.5 713.3 605.1 707 613.2 714.6z"/><path d="M1172.7 1477c6.1 4.5 2 12.7 4.6 26.7 -20.6 0-337.7-0.2-360.9 0.4 7.4-0.2 17.8-13.5 21.5-18.9 6.3-9.1 8.3-17.2 8.8-28.2 0.8-18.3-3.1-36.8-11.4-53.1 -8.1-16-23.9-25.2-39.8-32.5 -43.4-19.1-76.3-17.4-178.5 23.9 -52.4 20.4-184 42.8-357.4-0.9 -57.9-14.1-83.2-33.4-120.5-31.3 -41.7 3.4-29.4 38.7-43 53.6 -2.9 0.7-6 2.5-9 1.4 0 0 0.6 24.3 0.9-389.7 0.9-1.5-2.5-5.2-0.6-5.2 20.5 56.4 93.4 61.8 137.3 28.3 36-26.8 33.5-66.1 35-70.4 143.4 0.3 286.8 0 430.2 0.1 24.8 55.4 75.8 42.7 197.7 144.4 73.4 60.6 168.5 169.4 202.3 263.2C1107.7 1439.7 1146.5 1453.4 1172.7 1477z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 552 712" version="1.1"><path d="m268.4 22.5c-7 0-12.6 5.6-12.6 12.6v9c-2.3-2.4-5.5-3.9-9.1-3.9h-94.7c-7 0-12.6 5.6-12.6 12.6v7.8c0 7 5.6 12.6 12.6 12.6h94.7c3.6 0 6.8-1.5 9.1-3.9v36.7c-11.2 3.3-19.3 13.5-19.3 25.8v40.4h-15.1c-14.9 0-26.9 12-26.9 26.9v23.6h-85.2c-25.5 0-46.4 19-49.3 43.7h-0.3v121.7h-9.3c-15.4 0-27.7 12.4-27.7 27.8s1.8 15.8 1.8 15.8h195.2s1.8-0.4 1.8-15.8-12.9-31.6-27.7-27.7h-7.7v-66.2h291.9v67.3c0 14.9 12 26.9 26.9 26.9 1 0 2.1-0.1 3.1-0.2v0.2h21.8v-282.6h-21.8v0.2c-1-0.1-2-0.2-3.1-0.2-14.9 0-22.3 12.7-26.9 26.9v62.3h-135.2v-23.6c0-14.9-12-26.9-26.9-26.9h-15.2v-40.4c0-12.3-8.1-22.6-19.3-25.8v-36.8c2.3 2.5 5.6 4.1 9.3 4.1h94.6c7 0 12.6-5.6 12.6-12.6v-7.8c0-7-5.6-12.6-12.6-12.6h-94.6c-3.7 0-7 1.6-9.3 4.1v-9.2c0-7-5.6-12.6-12.6-12.6z" fill="#000"/><path d="m122.2 456.3c-21.4 94.7-74 104.2-72.7 164.2 1 50 37.3 68.5 69 69 34.9 0.5 67.6-17 67.3-69.1-0.3-48.2-47.7-69.5-63.5-164zm-6.7 37.8s-10.1 39.9-14.9 45.8c-4.8 5.9-11.9 17.8-11.9 17.8l-4.8-3s17.8-25.6 20.8-33.3c3-7.7 10.7-27.4 10.7-27.4zm-43.3 75.4 7.8 1.9s-3.2 8.3-4.4 12.4c-2.5 8.4 0 44.6 0 44.6l-16 1.7s-1.7-1.7-1.7-19.3 14.3-41.2 14.3-41.2z" fill="#06f"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" height="818.4" viewBox="0 0 897.2 818.4" width="897.2" version="1.1"><path d="m0 11.1h897.2v804.2h-897.2zM0 804.1" fill="#fff"/><path d="m0 804.1v-14.4l4.5-2.4c20.8-11.3 74-12.2 128.2-2.1 15.5 2.9 36.4 7.1 55.3 11.3 29.5 6.5 31.4 6.8 44.5 8.4 22.3 2.6 48.2 1.1 76.9-4.5 6.4-1.3 14-2.6 16.9-2.9 2.8-0.4 8.7-1.2 13.1-1.9 44.6-7.3 82.3-6.7 123.8 1.9 47.1 9.8 49.4 10.1 74.1 10 26.2-0.1 40-1.4 53.9-4.9 40.3-10.3 42.3-10.7 75-15.9 28.4-4.5 58-0.2 106.4 15.4 36 11.6 70.9 12.9 112.1 4.4l12.6-2.6v7.3 7.3h-448.6-448.6zm249.4-8.2c-3.4-0.5-10.7-1.5-16.4-2.3-5.7-0.8-13.3-2-16.9-2.7-10.2-2-18.3-3.5-23.9-4.5-6.4-1.1-22.4-5.4-36.6-9.7-27.1-8.3-37.6-10.8-59.2-14-33.8-5.1-47.4-5.1-71.1 0.2-5.9 1.3-12 2.6-13.6 2.8-1.5 0.3-3.2 0.8-3.7 1.2-0.5 0.4-2.5 1.4-4.5 2.2l-3.5 1.5v-10.1-10.1l5.9-2c36.5-12.7 69-9.9 134.8 11.5 25.9 8.4 48.9 14.7 62.3 16.9 2.1 0.3 8.5 1.6 14.3 2.9 20.4 4.4 43 5.1 65 1.8 16.4-2.4 66.1-12.1 89.1-17.4 41.2-9.4 81.3-10 125.4-1.8 8.7 1.6 18.1 3.3 20.9 3.7 2.8 0.4 9.4 1.4 14.5 2.3 5.2 0.8 12.8 1.9 16.9 2.4 4.1 0.5 10.9 1.3 15 1.9 19.5 2.4 49.9-0.1 73.6-6.1 60.3-15.4 98.1-17 152-6.5 40.8 7.9 84.4 9.8 105.6 4.5l2.1-0.5v12.7 12.7l-5.4 0.6c-3 0.3-7.3 1-9.6 1.5-32.8 6.8-86.5 4.6-126.2-5.1-9.2-2.2-41.2-7.8-57.7-10.1-15.1-2.1-36.1-0.2-63.6 5.6-13.5 2.9-29.2 5.9-32.3 6.2-1.5 0.2-5.8 0.7-9.4 1.3-34.9 5.3-69.2 3.5-122.3-6.3-39.7-7.4-66.6-7.8-102.7-1.9l-16.4 2.7c-2.8 0.5-8.1 1.3-11.7 1.9-3.6 0.5-8 1.4-9.8 1.8-4.8 1.2-29.1 4.8-39.4 5.7-4.9 0.5-12.9 1.3-17.8 1.8-4.9 0.5-10.8 1.1-13.1 1.3-2.3 0.2-7 0-10.3-0.5zm-15.1-19.6c-11.9-0.8-32.8-7-50.6-15-4.5-2-8.3-3.6-8.6-3.6-0.3 0-4.6-1.9-9.7-4.3-29.7-13.9-44.3-18.6-66-21.4-31.8-4.2-52.8-2.6-87.4 6.3l-12 3.1v-370.6-368.3l897.2-0.4-0.2 374.3-0.2 374.3-5.2 1.1c-2.8 0.6-9.4 1.9-14.5 3-21 4.3-52.1 2.7-73.1-3.6-3.1-0.9-10.7-3-16.9-4.7-6.2-1.6-12.7-3.5-14.5-4.2-37.2-13.6-71.6-16.8-95.6-9-2.8 0.9-11.3 3.5-18.7 5.6-22.6 6.6-54.5 16.3-60.2 18.4-15 5.5-48.6 8.7-63.4 6-27-4.9-32.4-6.1-40.8-9.3-12.7-4.8-14.5-5.5-25.3-9-15.1-4.9-20.3-6.3-26.2-7.2-3.1-0.5-8-1.2-10.8-1.7-12.5-2.1-37.1 0.3-53.4 5.2-2.3 0.7-10.1 2.9-17.3 5-7.2 2.1-16.7 5-21.1 6.5-4.4 1.5-11.8 3.9-16.4 5.3-8.6 2.5-20.5 6.3-27.2 8.5-2.1 0.7-10.8 3-19.3 5-13.9 3.3-18.2 4.1-28.5 5.1-1.5 0.2-7.7 0-13.7-0.5zm219.2-49.8c8.3-7.9 8.5-15.1 0.8-30.1-6-11.7-6.1-11.7-9.4-3.3-1.4 3.7-3.8 8.7-5.3 11-11.5 18.3-0.5 36 13.9 22.3zm-6.3-3.1c0.5-1.4 0.9-3.5 0.9-4.7 0-1.2 1-3.4 2.3-4.9l2.3-2.6 0.6 2.6c0.8 3.2-3 11.3-5.4 11.8-1.4 0.3-1.5 0-0.7-2.2zm-132.8-34.4c-4.1-4.6-20.3-16.7-28.9-21.7-5.2-3-10-5.8-10.8-6.3-16.1-10.1-43.2-18.5-61-19-21.5-0.5-26.6 5.2-12.1 13.7 8.3 4.9 42.6 14.3 59 16.2 12.1 1.4 29.4 6.9 39.4 12.5 15.5 8.6 19 9.8 14.4 4.6zm75-14.1c-11-48.1-62.5-96.9-108.9-103.3-17.2-2.4 3.3 17.3 34 32.6 29.9 14.9 57.1 42.5 70.9 71.8 4.6 9.7 6.3 9.2 3.9-1.1zm108 4.9c11.5-16.7 41.9-38.8 70.7-51.7 7-3.1 16.5-7.3 21.1-9.4 21.4-9.6 41.7-24.1 41.7-29.7 0-11.3-37.1-2.5-59.1 14.1-1.3 1-5.9 4.4-10.3 7.5-26.7 19.3-68.4 63.2-68.4 72.1 0 1.8 1.8 0.6 4.3-3zm83.3-9.2c5.5-6.1 39.5-23 60.2-30 8.2-2.8 30.9-7 48.1-9.1 10-1.2 28.1-8 28.1-10.6 0-10.4-36-12.3-63.3-3.3-20.7 6.8-68.9 40.7-75.6 53.1-1.2 2.2 0.4 2.1 2.4-0.1zm-150.9-6.8c10.5-4.8 18.2-49.5 8.6-49.5-0.6 0-1.9 1.4-2.8 3-1 1.7-3.7 5.2-6.2 7.7-10.4 11-16.7 26.4-13.5 33 2.7 5.6 8.8 8.1 13.9 5.8zm-3.2-6.2c0.1-3.7 2.5-10.7 4.4-12.6l2-2 0.6 2.5c1 3.8-0.3 8.2-3.1 11.1-2.9 3-4 3.3-4 1zm-121-32c0-3.5-11.8-15.5-24.3-24.8-32.5-24.2-73.5-23.4-49.1 1 6.4 6.4 15.3 9 36.6 10.5 14 1 29.9 7.3 33.6 13.2 0.7 1.1 3.3 1.2 3.3 0.1zm239.5-36.6c19-19.7 36.1-30.3 74.1-45.9 26.8-11 32.5-14.3 39.5-23.6 17-22.2-51.5 2-76.6 27.1-0.8 0.8-4.2 3.7-7.5 6.5-10.9 9-35.4 34.8-41.2 43.5-6.9 10.2-7.2 12.6-0.7 5.5 2.7-2.9 8.3-8.9 12.4-13.2zm-96.5-20.2c5.9-5.9 5.1-16.2-2-27.7-7.6-12.2-8.8-14.7-10.1-21.2-1.7-8.3-2.5-8.9-5.5-4.5-6.8 10-9.4 33.4-4.6 42.1 6.3 11.5 16.8 16.8 22.3 11.4zm-11.1-5.1c-2.4-2.7-3.8-9.6-2.3-11.1 2.4-2.4 9.4 5.9 7.7 9.2-1.7 3.2-3.6 4-5.4 2zm11.1-88.4c2.1-1 6.1-3.3 8.9-5.1l5.1-3.3 14.4 0.1c11 0.1 14.7-0.2 15.6-1.2 1.4-1.4 1.5-21 1.1-115.2l-0.3-53-2.9-8c-5-14-6.5-16.2-18-26.1-26.8-23.1-70-7.3-80.6 29.4-2.4 8.3-3.6 21.6-2.1 23.5 0.6 0.7 0.8 1.8 0.4 2.4-1 1.6-1.4 25.1-0.4 25.7 0.5 0.3 0.6 1.2 0.3 2-0.4 0.9 0.2 2.1 1.4 3 1.6 1.2 2 2.6 2.2 6.5 0.1 4.4 0.5 5.1 2.5 5.9 1.6 0.6 2 1.2 1.4 2-0.5 0.6-1 4.3-1.1 8.2-0.1 3.9-0.3 9.3-0.5 12-0.2 2.7 0.1 5.2 0.6 5.5 0.5 0.3 0.4 1.1-0.3 2-1 1.2-0.9 1.7 0.6 2.7 1.8 1.3 1.8 1.3 0 2.7-1.8 1.3-1.8 1.4 0.1 2.7 1.7 1.3 1.8 1.4 0.2 2-2 0.8-2.2 4.2-0.2 4.2 1.9 0 1.8 0.8-0.6 2.7-2.3 1.9-1.7 3.5 1.9 4.9l2.5 1-2.3 0.6c-3.4 0.9-3.6 3.6-0.3 4.4l2.6 0.7-3.1 1.3c-3.4 1.4-3.5 3-0.3 4.5 2.6 1.2 2.6 2.1 0 2.5-3.2 0.5-3.1 2.6 0.1 3.7 3.6 1.2 3.7 2.5 0.3 2.9-3.6 0.4-4 3.3-0.5 4.6l2.6 1-2.6 1.4c-2.6 1.4-3.4 3.5-1.6 4.6 0.7 0.4 0.7 1-0.1 1.9-1.3 1.6-0.4 3.2 1.7 3.3 1.2 0 1.1 0.4-0.8 1.9-2.4 1.9-1.6 3.7 1.6 3.7 1.7 0 1.5 1.6-0.3 2.3-0.8 0.3-1.2 1-0.8 1.6 0.4 0.6-0.1 1.7-1.1 2.4-3.1 2.3-0.3 3 13.4 3.3l13.3 0.3 4.5 4.3c7.3 7.1 12.3 7.9 21.4 3.5zm-7-2.5c0-1.6 5.3-5.8 7.3-5.8 2.7 0 2.6 1.4-0.2 4.3-2.2 2.2-7.1 3.2-7.1 1.5zm37.3-19c-0.9-0.5-1.6-1.5-1.6-2.2 0-0.7-0.7-1.4-1.6-1.6-3.4-0.7-1.7-123.8 1.7-126.9 4.9-4.4 4.8-5.7 4.5 63.6-0.3 67.5-0.3 68.6-3 67.2zm-82.8-153.9c2.4-12.1 16.5-30 25.7-32.5 9.9-2.8 15.7-0.5 10.2 4-1.9 1.5-3.4 3.6-3.4 4.6 0 1.1-3.1 5.2-7 9.4-3.9 4.1-7 7.9-7 8.3 0 0.5-0.8 0.9-1.7 0.9-0.9 0-2.7 1-3.9 2.3s-2.5 2.1-2.9 1.9c-0.4-0.2-2 0.6-3.5 1.9-4.2 3.5-7.1 3.2-6.4-0.7zm77.7-0.9c-1.6-1.7-3.2-4.3-3.5-5.8-1.8-7.6-7-15.4-13.9-20.6-8.7-6.7-4.4-9.3 6.4-3.8 15 7.6 25.7 23.2 20 29.3-1 1.1-1.9 2.5-1.9 3 0 2.1-4.5 0.8-7.2-2.1zm27.8 111.3c0.6-0.8 1.8-1.4 2.5-1.4 2.7 0 12.2-5.6 31.6-18.6 2.6-1.7 9-7.3 14.2-12.4 5.3-5.1 9.9-9.3 10.4-9.3 7.5-0.1 31.2-46.1 34.1-66.1 0.5-3.6 1.4-9.3 1.9-12.5 5.2-33.6-2.8-72.8-20.7-102.5-15.4-25.5-51.9-57.2-67.1-58.4-2.4-0.2-9.2-0.7-14.9-1-9.5-0.6-10.7-0.9-12.7-3l-2.1-2.3 2.8 0.7c6.5 1.6 26.2 2 27.5 0.5 1.3-1.6 0.7-9.9-0.9-11.9-1.9-2.3-20-2.6-23.6-0.4-4 2.5-5.4 1-2.1-2.3 1.7-1.7 3.4-2.4 6.1-2.4 6.7 0 6.9-0.4 3.4-6.9-1.7-3.2-3.6-7.5-4.2-9.5-4.3-14.5-7.7-17.3-20.4-17.3-7.6 0-9.4 0.8-6.1 2.7 1.4 0.8 1.5 1.1 0.2 1.9-1.2 0.8-1.2 1.1 0.4 2.2 1 0.7 1.5 1.8 1.2 2.3-0.3 0.6-0.2 1.3 0.2 1.5 0.5 0.3 0.7 1.3 0.4 2.3-0.3 1 0 2.1 0.6 2.4 1.2 0.8 1.4 4.9 0.1 5.6-0.5 0.3-0.8 1.3-0.8 2.2 0 0.9-0.2 2.3-0.5 3-0.8 1.9 2.7 7.5 4.7 7.5 1.8 0 5 2.6 5 4 0 0.5-0.7 0.6-1.6 0.1-0.9-0.4-13.4-1-27.8-1.3-25-0.4-26.1-0.5-24.5-2.1 1.5-1.5 3.2-1.6 18.8-1 18.2 0.7 19.4 0.4 16.7-3.5-0.9-1.2-1.5-3.2-1.3-4.3 0.1-1.1-0.2-2.3-0.7-2.6-0.5-0.3-0.7-1.2-0.5-1.9 0.3-0.7-0.4-1.8-1.5-2.4-1.1-0.6-1.7-1.4-1.4-1.9 0.3-0.5-0.3-1.6-1.3-2.5-1-0.9-1.7-1.9-1.4-2.3 0.2-0.4-0.8-1.4-2.3-2.1-1.5-0.8-3-2.1-3.3-2.9-0.3-0.8-1.2-1.4-2-1.4-0.8 0-2.7-1.4-4.3-3-8.5-9.2-26.6-1.9-32.8 13.3-2 4.8-4.7 9.5-7.2 12.3-4.6 5.1-4.9 6-1.7 5.2 2.8-0.7 7.4 0.9 6.6 2.3-0.4 0.7-3.1 0.8-7.8 0.4-9.7-0.8-15.3 7.9-10.1 15.9 3.5 5.4 2 9.6-4.6 13-7.6 3.9-18 12.3-34.3 27.9-3.6 3.4-15.4 18.7-17.3 22.4l-1.6 3.1 2.4-1.7c1.3-1 2.7-2.6 3-3.5 2.4-7.1 48.5-47.5 51.2-44.8 2.6 2.6 0.4 8.1-4.1 10.5-8.3 4.5-37.1 33.4-35.1 35.3 0.3 0.3 6.6-5.5 14-13 7.4-7.4 16.5-15.8 20.4-18.5l7-5 14.6 0.6c21.7 0.8 107.2 1.1 108.4 0.3 0.6-0.4 1.4-3.4 1.7-6.8 0.6-5.6 0.8-6.1 2.2-4.9 0.9 0.7 3.9 2.5 6.7 4 20.3 10.7 39.1 30.1 52.7 54.4 12 21.4 24.6 63.8 17.1 57.6-1.2-1-1.4-0.8-1.4 0.8 0 2.5-1.5 2.6-2.8 0.1-0.6-1-1.6-1.9-2.2-1.9-0.7 0-1.9-1.7-2.8-3.9-1.3-3.3-1.7-3.7-2.9-2.7-1.2 1-1.5 0.9-2-0.3-0.8-2.1-2.3-1.9-2.3 0.4 0 2-1.4 2.5-2.4 0.8-0.5-0.7-0.8-0.7-1.4 0.1-0.5 0.8-1 0.6-1.8-0.8-1.3-2.4-2.6-2.6-3.1-0.4-0.2 1.2-0.9 0.6-2.6-2.1-1.9-3.1-2.3-3.4-2.6-1.8-0.4 2.7-3.8 4.7-4.6 2.8-0.4-1-1.2-1.3-2.4-0.9-3 0.9-6.4 1.1-6.4 0.4 0-1.4-2.6-1.7-5-0.4-2.1 1.1-2.6 1.1-3.3-0.3-0.8-1.4-1.2-1.3-3.4 1-2 2-2.8 2.3-3.8 1.5-1.8-1.5-1.7-0.1 0.5 6.4 9.9 30.2 4.6 57.2-15.4 77.9-4.1 4.3-7.4 7.9-7.2 8.1 0.2 0.2-1 1.1-2.6 2.1-3.5 2.1-4.1 4-3.4 11.8 0.6 7.4 0.6 6.9 0 12.7-0.6 5.8 0.4 6.2 6.7 3.1 6.2-3.2 3.6 0.2-4.6 5.9-2.4 1.7-3.4 6.5-1.7 7.6 1.1 0.7 8.2-2.7 13.2-6.3 7.1-5.1 9.5-6.4 9.5-5.4 0 1.2-3.2 4.1-6.3 5.8-1.4 0.7-2.8 1.5-3 1.8-0.3 0.3-3.5 2.3-7.3 4.6-6.5 3.9-10.3 11.3-5.8 11.3 1.1 0 15-7.3 20.8-10.9 1.9-1.2 3.7-2.2 4-2.2 0.3 0 1.8-0.9 3.3-2 1.5-1.1 3-1.8 3.4-1.4 1.8 1.8-10.6 10.9-23.3 17-9 4.3-9.1 4.4-9.1 7.7 0 1.9-0.4 3-0.9 2.7-0.5-0.3-0.9 0.4-0.9 1.7 0 3.3 3.5 4.6 5.6 2zm-61.2-280.7c-21.6-0.5-23.4-0.6-24.6-2.3-1.8-2.5-1.7-3.7 0.3-2.8 0.9 0.4 12.8 0.9 26.5 1.1 14.8 0.2 25.2 0.7 25.8 1.3 1 1-1.9 3.8-3.7 3.4-0.5-0.1-11.5-0.4-24.3-0.7zm-53.9-2.6c0.4-2.2 17.6-3.1 17.6-0.8 0 2-2.1 2.5-10.5 2.5-6.6 0-7.5-0.2-7.2-1.6zm-5.1 277.7c0.4-3.8-1-5.3-8.7-9.4-7-3.8-14-8.8-13.2-9.5 0.3-0.3 2.9 1 5.9 2.8 16.7 10.1 24.9 7.1 9-3.3-3.3-2.2-5.9-4.3-5.9-4.7 0-0.8 0.2-0.7 5.9 2.8 7.5 4.6 11.3-0.6 5.2-7-3.1-3.2-3.1-3.2-0.6-2.6 3.4 0.8 3.4 0.8 4.1-14.6l0.6-13.6-6.7-6c-21.3-19-30.4-45.7-24.4-71.6 0.6-2.4 0.5-3.3-0.2-2.9-0.7 0.4-0.7 0-0.3-1.2 0.4-1 1-2.6 1.2-3.7 2.6-9.4 21.1-37.2 21.6-32.4 0.3 3.2-3.4 9.6-8.8 15.5-1.2 1.3-2.3 2.7-2.3 3.1 0 1.4-4.3 9.3-5.8 10.8-5.8 5.7-5.8 34.1 0 48.9 3.2 8.3 14.5 22.7 17.1 21.9 0.6-0.2 2.5 0.8 4.1 2.3l2.9 2.7 0.3-3.5c0.2-2.9-0.1-3.9-2.1-5.5-1.3-1.1-2.1-2.2-1.8-2.6 0.4-0.4 1.3-0.1 2.1 0.5 1.2 1 1.3 0.9 0.9-0.9-0.3-1.3 0-2.2 0.8-2.6 1.1-0.4 1.1-0.8 0.1-2.5-1-1.7-0.9-2.1 0.4-2.9 1.3-0.7 1.6-2.2 1.7-6.3 0.1-23.4 20.7-51.3 41.8-56.5 2.5-0.6 4.8-1.6 5.2-2.1 1-1.5 11.2-1.9 18.4-0.7 26 4.4 48.9 31.9 48.9 58.9 0 2.7 0.4 4.9 1 4.9 0.5 0 0.8 1.8 0.6 4.2-0.2 2.5 0.1 4.3 0.7 4.6 0.7 0.3 0.7 0.8-0.1 1.6-1.7 1.8-1.4 2.6 0.7 2.1 1.3-0.3 1.9 0 1.9 1 0 1.9 0.2 1.9 5-0.5 29.8-15.1 28.5-54.5-3.3-99-11.8-16.6-15.6-23.8-17.4-33.8-1.6-8.8 0.7-7.7 15.2 7 5.4 5.5 10.1 9.8 10.5 9.4 2.8-2.8-7.8-14.8-18.7-21.2l-7.6-4.5-0.3-4.4c-0.6-9.6 6.9-5.2 30.3 17.4 5.7 5.5 8.9 7.6 8.9 5.8 0-2-3.6-6.5-9.1-11.3-3.5-3.1-6.9-6-7.5-6.6-0.6-0.6-5.6-4-11-7.5-10.7-6.9-11.3-8-8.4-13.6 1.7-3.3 1.9-3.3 10.4 2.6 15.9 11 22.9 17.2 36.2 32 3.4 3.8 6.3 5.1 6.3 2.9 0-2.4-6-10.3-11.1-14.5-2.9-2.5-6-5.1-6.7-6-2.4-2.6-11.4-9.8-18.3-14.7-14.2-10-25.8-10.6-25.8-1.4 0 1.6-0.4 3.1-0.9 3.4-3.1 1.9-4.3 17.3-2.3 28.3 0.8 4.5 1.7 9.4 2 10.8 0.4 2.4 0.3 2.6-3 2.6-1.9 0-5 0.7-6.9 1.4-3.8 1.6-8.3 0.3-7.3-2 0.2-0.6-0.2-1.7-0.9-2.3-0.7-0.6-1.1-1.5-0.8-1.9 0.3-0.5 0.2-1.4-0.2-2-0.4-0.6-0.7-2-0.8-3 0-1.1-0.8-2-1.9-2.2-2.8-0.5-4-2-1.6-2 2.8 0 3.5-1.6 1.3-3-1.7-1.1-1.7-1.2-0.3-2.3 2.1-1.5 0.7-2.9-4.1-4-3.1-0.7-3.3-0.9-1.1-1 3.1-0.1 5.2-4.2 3.6-6.8-0.6-1-0.7-1.8-0.1-2.2 0.6-0.4 0.6-1.2 0-2.2-0.5-0.9-0.7-2.6-0.4-3.7 0.4-1.7 0.1-2-1.7-2-1.2 0-2.9-0.4-3.6-0.9-1-0.7-0.5-0.9 2.1-0.9 3.8 0 5.2-1.3 3.7-3.2-0.7-0.9-0.7-1.5 0.1-2.3 2.4-2.4-1.6-2.9-29-3.5l-28.3-0.7-0.9 2.3c-0.5 1.3-2.6 3.5-4.8 5-5.4 3.8-18.7 18.2-18.7 20.3 0 3.4 3 1.6 12.4-7.6 5.3-5.2 10-9.2 10.5-9.1 2.6 0.8 1.5 4.8-2.6 9-9.6 10-9.7 16.9 0 7.4l4-3.9v2.6c0 3.3-5.7 17.4-10.5 26.3-4.3 7.9-5.7 9.5-5.3 6.2 0.4-2.9-4.1-4.1-9.1-2.6-2.8 0.9-3.4 0.7-4.5-0.8-1.1-1.5-1.7-1.6-3.5-0.7-1.2 0.6-3.7 1.6-5.5 2.2s-4.2 1.6-5.4 2.1c-1.5 0.7-2.5 0.7-3.5-0.2-1.1-0.9-2-0.9-4.4 0.3-1.6 0.8-4.2 1.5-5.6 1.5-1.6 0-3.3 0.8-4.3 2.2-2.7 3.4-5.7 4.8-6.1 2.7-0.3-1.3-0.7-1-1.9 1.2-1.4 2.6-1.6 2.6-1.6 0.7-0.1-3-7.5 2.3-7.5 5.4 0 1.5-4.6 5.8-5.6 5.2-0.6-0.3-0.7-1.7-0.4-3 0.4-1.8 0.3-2.2-0.5-1.7-0.6 0.4-0.9 0.9-0.6 1.2 0.7 0.7-2.2 6.1-4 7.4-2.7 2-3.9 0.5-3.3-4 0.6-4.1-0.9-6-2.2-2.7-0.3 0.8-1.1 1.4-1.8 1.4-0.7 0-1.9 0.9-2.7 2.1l-1.5 2.1v-2.7c0-2.6 0-2.7-1.9-1-8.4 7.6 12.6-42.2 21.5-50.9 0.9-0.9 4-4.6 6.9-8.3 6.1-7.8 19.8-21.3 24.3-24 1.7-1 6.3-4.3 10.1-7.3 3.9-3 9.7-6.7 12.9-8.3 5.7-2.8 7.4-4.8 4.3-4.8-12.1 0-51 35.1-64.6 58.3-0.5 0.9-2.8 4.6-5 8.2-28.4 46.5-25.5 109.6 7.1 158.9 17.7 26.8 67.2 63.4 68.4 50.6zm-20.1-134.2c-2.3-6 7.7-23.4 19.9-34.4 6.3-5.7 9.5-9.3 9.7-10.9 0.2-1.3 0.8-2.9 1.3-3.5 0.7-0.9 0.5-1.2-0.6-1.2-1 0-1.5-0.6-1.2-1.6 0.2-1.1 1.1-1.6 2.4-1.4 3.2 0.3 6.8-1.4 6.2-2.9-0.3-0.8 0.3-1.8 1.4-2.4 2.5-1.3 2.9-1.3 2.9 0.4 0 0.8 0.4 1.4 0.9 1.4 0.5 0 0.2 1.8-0.6 3.9-1.4 3.5-2 9.6-1.4 15.8 0.1 1.3 0 3.8-0.1 5.6-0.3 2.4 0.2 4.1 1.9 6.2l2.2 2.9-6.2 4.5c-3.4 2.5-6.6 5.3-7.1 6.2-0.7 1.2-1.5 1.5-3.2 1.1-1.6-0.4-2.9 0-4.2 1.1-1.5 1.3-1.8 1.4-1.8 0.3 0-2.3-7.3-1.7-9.3 0.8-0.9 1.1-1.9 1.8-2.2 1.6-0.3-0.3-1.5 0.2-2.8 1-1.2 0.8-2.5 1.2-2.8 0.9-0.3-0.3-1.2 0.9-2 2.8-1.6 3.7-2.2 4.1-3.1 1.9zm127.7-20.6c-4.8-5-6-9.7-2.3-9.7 1 0 1.8-0.6 1.8-1.4 0-0.8 0.7-1.4 1.5-1.4 1.1 0 1.4-0.6 1-1.9-0.4-1.4 0-1.9 1.3-1.9 1 0 1.8-0.6 1.8-1.2 0-3.6 4.5-3.8 7.6-0.2 10.9 12.4 11.7 18.2 2.7 18.8-1.8 0.1-5.4 0.5-8.1 0.9-4.5 0.6-5 0.5-7.4-2zm-173-44.8c0-0.7 1.3-2.8 2.8-4.8 2.7-3.4 3.8-6.8 1.9-5.6-0.9 0.6-6.5 11.1-6.5 12.2 0 0.3 0.4 0.3 0.9 0 0.5-0.3 0.9-1.1 0.9-1.8zm242.4-3.1c-2.5-9.9-31.8-40.1-46.2-47.5-7.4-3.8-5.2 0.9 3.3 7.1 10.6 7.7 26.6 23.2 31 30.3 7 11.1 13.5 16.6 11.8 10.1zm-195.5-20c2.8-3.1 9-8.9 13.8-12.7 12.6-10 14.7-12.5 10.9-12.5-5 0-25.7 19.5-31.6 29.8-2 3.4 2.6 0.4 6.9-4.5zm93.2-109.4c0.4-1.1-0.2-2.3-1.8-3.7-1.7-1.5-2-2.1-1-2.1 0.8 0 1.5-0.4 1.5-0.9s-1.1-0.9-2.3-0.9c-2.3 0-3.4-1.8-1.2-1.9 3-0.2-3.1-1.7-7.1-1.7-6.1-0.1-8.1 1.1-8.1 4.9 0 3.8 1.4 5.3 5.1 5.4 1.6 0 4.5 0.6 6.6 1.3 5.3 1.7 7.7 1.7 8.4-0.2zm-0.1-13c0.3-0.3 0.1-1.2-0.4-1.9-0.9-1 1.2-1.3 12-1.2 63.4 0.1 69-1.1 69.2-14.9 0.2-16.2 2.1-15.9-104.6-15.6l-69.1 0.2-3.8 2.6c-7.2 5-9.2 12.5-5.3 20 3.9 7.5 1.6 7.2 47.4 7.7 26.4 0.3 40.7 0.8 40.6 1.4-0.3 2.1 12.2 3.6 14 1.7zm56.9-9.2c-1.3-3.4-0.6-4.2 4-4.2 5.2 0 7.4-1.4 5.1-3.1-0.9-0.7-1.3-1.6-0.9-1.9 0.4-0.4 0-1.1-0.9-1.6-0.9-0.5-1.4-1.5-1.1-2.3 0.3-0.9-0.3-1.7-1.8-2.3-1.3-0.5-2.6-1.3-3-1.9-0.3-0.5-1.8-1-3.1-1.1-2.2-0.1-2.3-0.2-0.6-0.8 9.9-4.1 21 3.6 19.9 13.8-0.8 7.1-15.2 11.5-17.5 5.4zm-152.5-1c-5.9-5.9 3.1-20.1 12.7-20.1 6.6 0 10.1 0.9 8.3 2-1.7 1.1 0.6 2.6 3.9 2.7 1.3 0 4 0.5 6.1 1.1l3.8 1.1-3.7 0.8c-2.1 0.5-5.6 0.6-7.8 0.2-2.8-0.4-3.9-0.3-3.5 0.4 0.3 0.6 2.7 1 5.3 1 5.4 0 6.2 1.5 1.3 2.4-2.3 0.4-3 0.9-2.1 1.4 1.6 1-1.3 2.3-3.3 1.5-0.7-0.3-2.5-0.2-4 0.2l-2.7 0.8 2.8 0.7c6.8 1.6 6.8 1.6 4.7 2.5-1 0.4-3.6 0.8-5.7 0.8-2.2 0-4.4 0.7-5 1.5-1.9 2.3-8.1 1.8-10.9-1z" fill="#191940"/></svg>

Конкурс завершён. Выбран ответ `@UModeL`

Answer 1

Никаких картинок, SVG и JS. Only HTML & CSS (box-shadow и ...-gradient). Удалось обойтись даже без clip-path. Только, точной подгонкой таймингов анимаций, не занимался - прикинул "на глазок":

* { margin: 0; box-sizing: border-box; padding: 0; } 
 
body { background-color: rgb(25, 25, 64); } 
 
.wrap { 
  position: relative; 
  height: 800px; 
  width: 800px; 
  margin: 30px auto; 
  overflow: hidden; 
} 
 
.valve { 
  position: relative; 
  height: 570px; 
  width: 315px; 
  margin: 30px auto; 
  animation: fade 36s ease-in 10s infinite; 
} 
 
.valve *, 
.valve *:before, 
.valve *:after { 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
} 
 
.nakladka { 
  top: 102px; 
  height: 310px; 
  width: 310px; 
  border-radius: 50%; 
  background-color: rgba(200, 200, 200, .9); 
  box-shadow: 4px 6px 26px 0px black, inset -20px -18px 110px 21px #000000b5; 
} 
 
.klapan { 
  top: 185px; 
  height: 170px; 
  width: 185px; 
  border-radius: 50%; 
  background-color: rgba(255, 230, 200, 1); 
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%); 
  background-position: 92% 6%; 
  background-size: 231% 100%; 
  background-repeat: no-repeat; 
  box-shadow: 15px 14px 57px -13px black, inset -10px -2px 57px -13px black; 
} 
 
.klapan:before { 
  content: ''; 
  top: -40px; 
  height: 125px; 
  width: 130px; 
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; 
  background-color: #ffe6c8; 
  background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%); 
  box-shadow: inset -4px 3px 23px -15px black; 
} 
 
.klapan:after { 
  content: ''; 
  top: -45px; 
  height: 60px; 
  width: 85px; 
  border-radius: 0 0 50% 50%; 
  background-color: #ffe6c8; 
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%); 
  background-position: 28% 0%; 
  background-size: 167% 100%; 
  background-repeat: no-repeat; 
  box-shadow: inset -2px 11px 24px -8px black; 
} 
 
.mahovik { 
  top: 5px; 
  height: 55px; 
  width: 20px; 
  border-radius: 10px 10px 0 0; 
  background-color: rgba(100, 100, 100, 1); 
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0.65)); 
  box-shadow: inset -2px 0px 10px rgba(0, 0, 0, .75); 
} 
 
.mahovik:before { 
  content: ''; 
  top: 9px; 
  height: 34px; 
  width: 188px; 
  border-radius: 17px; 
  background-color: rgb(255, 0, 0); 
  background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.18) 5%, rgba(0, 0, 0, 0.15) 10%, rgba(255, 255, 255, 0.46) 15%, rgba(255, 0, 0, 0.18) 20%, rgba(255, 0, 0, 0.18) 25%, rgba(4, 4, 4, 0.18) 30%, rgba(255, 255, 255, 0.68) 40%, rgba(255, 0, 0, 0.18) 50%, rgba(255, 0, 0, 0.18) 50%, rgba(4, 4, 4, 0.18) 60%, rgba(255, 255, 255, 0.56) 71%, rgba(4, 4, 4, 0.25) 80%); 
  box-shadow: inset -5px -4px 31px 4px rgba(0, 0, 0, .75); 
} 
 
.buksa { 
  top: 96px; 
  height: 47px; 
  width: 134px; 
  border-radius: 10px 10px 2px 2px; 
  background-color: rgba(255, 230, 200, 1); 
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 20%, rgba(255, 255, 255, 0) 24%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.19) 78%); 
  box-shadow: inset -1px -1px 9px 0px rgba(0, 0, 0, 0.65); 
} 
 
.buksa:before { 
  content: ''; 
  top: -27px; 
  height: 28px; 
  width: 80%; 
  border-radius: 60% 60% 0 0 / 100% 100% 0 0; 
  background-color: #ffe6c8; 
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%); 
  background-position: 28% 0%; 
  background-size: 167% 100%; 
  background-repeat: no-repeat; 
  box-shadow: inset -11px 4px 28px -8px black; 
} 
 
.buksa:after { 
  content: ''; 
  top: -40px; 
  height: 35px; 
  width: 70%; 
  border-radius: 30% 30% 0 0 / 80% 80% 0 0; 
  background-color: #ffe6c8; 
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 18%, rgba(255, 255, 255, 0.29) 35%, rgba(0, 0, 0, 0.11) 55%); 
  background-position: 28% 0%; 
  background-size: 167% 100%; 
  background-repeat: no-repeat; 
  box-shadow: inset -9px 8px 25px -10px black; 
} 
 
.nosik { 
  top: 235px; 
  height: 115px; 
  width: 115px; 
  border-radius: 50%; 
  background-color: rgba(255, 230, 200, 1); 
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%); 
  background-position: 92% 6%; 
  background-size: 231% 100%; 
  background-repeat: no-repeat; 
  box-shadow: 6px 9px 35px -7px black; 
} 
 
.nosik:before { 
  content: ''; 
  top: 50%; 
  height: 165px; 
  width: 100%; 
  border-radius: 10px 10px 5px 5px; 
  background-color: #ffe6c8; 
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%); 
} 
 
.water { z-index: -1; } 
 
.emmiter { 
  top: 140px; 
  height: 100px; 
  width: 100px; 
  transform: translateX(-50%) rotate(135deg); 
  border: 1px dotted #090; 
  border-radius: 100% 0 50% 60% / 50% 0 100% 60%; 
  background-color: rgba(180, 206, 255, 0); 
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0)); 
  animation: emmiter 4s ease-in infinite; 
} 
 
.drop { 
  top: 140px; 
  height: 100px; 
  width: 100px; 
  transform: translateX(-50%) rotate(-45deg); 
  border-radius: 100% 0 55% 50% / 55% 0 100% 50%; 
  background-color: rgba(180, 206, 255, 0); 
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0)); 
  box-shadow: inset -2px -20px 15px -5px rgba(255, 255, 255, 0.5); 
  animation: drop 4s ease-in infinite; 
} 
 
.txt_block { 
  position: absolute; 
  top: 0; 
  height: 100%; 
  width: 100%; 
  overflow: hidden; 
  text-align: center; 
  text-transform: uppercase; 
  font: bold 48px 'Arial'; 
  color: rgb(240, 248, 255); 
} 
 
.txt_1 { 
  position: absolute; 
  left: -800px; 
  width: 2400px; 
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0), rgba(180, 206, 255, 1)); 
  animation: txt_1 36s ease-in-out 10s infinite; 
} 
 
.txt_1 div { position: absolute; width: 800px; } 
 
.txt_1 div:nth-child(1) { top: 3em; left: 0px; } 
 
.txt_1 div:nth-child(2) { top: 6em; right: 0px; } 
 
.txt_1 div:nth-child(3) { top: 9em; left: 0px; } 
 
@keyframes drop { 
  0% { 
    top: 140px; 
    width: 50px; 
    height: 50px; 
    opacity: 0.0; 
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%; 
  } 
  75% { height: 100px; width: 100px; } 
  83% { 
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%; 
  } 
  89% { top: 250px; opacity: 1.0; } 
  95% { 
    top: 470px; 
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; 
  } 
  100% { 
    top: 450px; 
    opacity: 0.0; 
    border-radius: 50% 100% 50% 100% / 50% 100% 50% 100%; 
  } 
} 
 
@keyframes emmiter { 
  0%, 100% { 
    top: 140px; 
    border-radius: 50% 100% 50% 100% / 50% 100% 50% 100%; 
  } 
  80% { 
    top: 130px; 
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%; 
  } 
  88% { top: 120px; } 
  90% { 
    border-radius: 50% 35% 50% 50% / 50% 35% 50% 50%; 
  } 
} 
 
@keyframes fade { 
  0%, 100% { opacity: 1.0; } 
  10%, 80% { opacity: 0.2; } 
} 
 
@keyframes txt_1 { 
  0%, 100% { 
    left: -800px; 
    width: 2400px; 
    transform: scale(1.0); 
    opacity: 0.0; 
  } 
  15%, 20% { 
    left: 0px; 
    width: 800px; 
    transform: scale(1.0); 
    opacity: 1.0; 
  } 
  25% { opacity: 0.0; } 
  99.99% { 
    left: 0px; 
    width: 800px; 
    transform: scale(1.3); 
  } 
} 
 
.txt_2 { 
  position: absolute; 
  height: 100%; 
  width: 800px; 
  vertical-align: middle; 
} 
 
.txt_2 div:not(:last-child) { 
  display: inline-block; 
  transform: scaleY(1.2) rotate(0deg); 
  opacity: 0.0; 
  animation: txt_2 36s ease-out 18s infinite; 
} 
 
@keyframes txt_2 { 
  0%, 100% { opacity: 0.0; line-height: 30em; } 
  13% { opacity: 1.0; line-height: 3em; } 
  50% { opacity: 1.0; line-height: 3em; } 
  60%, 99.99% { opacity: 0.0; line-height: 4em; } 
} 
 
.txt_3 { 
  transform: scaleY(1.2) rotate(0deg); 
  font: bold 84px 'Arial'; 
  color: rgb(253, 236, 34); 
  opacity: 0.0; 
  animation: txt_2 36s ease-in-out 18s infinite, txt_3 36s linear 26s infinite; 
} 
 
@keyframes txt_3 { 
  0%, 8%, 100% { transform: scaleY(1.2) rotate(0deg); } 
  1%, 3%, 5% { transform: scaleY(1.2) rotate(2deg); } 
  2%, 4%, 6% { transform: scaleY(1.2) rotate(-2deg); } 
  7% { transform: scaleY(1.2) rotate(2deg); } 
}

<body> 
  <div class="wrap"> 
    <div class="valve"> 
      <div class="nakladka"></div> 
      <div class="klapan"></div> 
      <div class="mahovik"></div> 
      <div class="buksa"></div> 
      <div class="nosik"> 
        <div class="water"> 
          <div class="drop"></div> 
          <div class="emmiter"></div> 
        </div> 
      </div> 
    </div> 
    <div class="txt_block"> 
      <div class="txt_1"> 
        <div>Из капающего крана,</div> 
        <div>за сутки убегает</div> 
        <div>10 вёдер воды</div> 
      </div> 
      <div class="txt_2"> 
        <div>Не хотите платить</div> 
        <div>лишние деньги за ЖКХ ?</div> 
        <div>позвоните нам</div> 
        <div class="txt_3">+7 (123) 45-67-891</div> 
      </div> 
    </div> 
  </div> 
</body>

Смотреть лучше развернув страницу.

Answer 2

Такой вот вариант:

* { 
  box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
} 
.box { 
  width: 350px; 
  height: 300px; 
  overflow: hidden; 
  position: relative; 
  padding-bottom: 5px; 
   
  border:1px solid #303F9F; 
  background: #eee; 
} 
 
.box-fauset { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 2; 
} 
 
.box-text { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 4; 
   
  color:#fff; 
  text-align: center; 
  font-family:cursive; 
  padding: 2rem; 
  opacity: 0;  
   
} 
 
.box-text p { 
  font-size: 12px; 
} 
 
.text-1 { 
  background: #03A9F4; 
  animation: show-1 2s 10s ease-in both; 
} 
 
.text-2 { 
  background: #303F9F; 
  animation: show-1 2s 15s ease-in both; 
} 
 
 
@keyframes show-1 { 
  from { opacity: 0; z-index: 0; } 
  to { opacity: 1; z-index: 10; } 
} 
 
.fauset { 
  width: 200px; 
} 
 
 
.wave { 
  position: absolute; 
  bottom: 0px; 
  height: 10px; 
  left: 70px; 
  width: 200px; 
  background: dodgerblue; 
  border-radius: 50%; 
  opacity: 1; 
   
  animation: wave-0 3s 3s infinite; 
} 
 
.wave:before, 
.wave:after { 
  content:''; 
  position: absolute; 
  left: 0; 
  right: 0; 
  height: 10px; 
  border-radius: 50%; 
  opacity: 0; 
  box-shadow: 0 0 0 2px rgb(0, 79, 177); 
} 
 
.wave:before { 
  animation: wave-1 2s 3s forwards infinite; 
} 
 
.wave:after { 
  animation: wave-2 2s 3s forwards infinite; 
} 
 
 
 
@keyframes wave-0 { 
  0% { 
    opacity: 1; 
    transform: scale3d(1, 1, 1); 
  } 
  50% { 
    opacity: 1; 
    transform: scale3d(1.2, 1.2, 1); 
  } 
} 
 
@keyframes wave-1 { 
  0% { 
    opacity: 1; 
    transform: scale3d(0.5, 0.5, 1); 
  } 
  100% { 
    opacity: 0; 
    transform: scale3d(1.1, 1.1, 1); 
  } 
} 
 
 
@keyframes wave-2 { 
  0% { 
    opacity: 1; 
    transform: scale3d(0.5, 0.5, 1); 
  } 
  50%, 100% { 
    opacity: 0; 
    transform: scale3d(1.2, 1.2, 1); 
  } 
} 
 
 
 
 
.btn-drop { 
  position: absolute;     
  opacity: 0; 
  pointer-events: none;     
 
  /* transition:all 2s ease-in-out; */ 
} 
 
.btn-drop_0 { 
  left: 160px; 
  transform-origin: 50% 50%; 
  transform: rotate(0deg); 
  fill: #03a9f4; 
  top: 110px; 
} 
 
.btn-drop_1 { 
  left: 100px; 
  bottom: 10px; 
  transform-origin: 150% 50%; 
  transform: rotate(180deg); 
  fill: skyblue; 
} 
.btn-drop_2 { 
  left: 220px; 
  bottom: 10px; 
  transform-origin: -50% 50%; 
  transform: rotate(180deg); 
  fill: #2196f3; 
} 
 
 
 
 
.dot { 
  position: absolute; 
  border-radius: 50%;     
  opacity: 0; 
  pointer-events: none; 
  background: #03a9f4; 
  margin: 0; 
  width: 5px; 
  height: 5px; 
  left:170px; 
  bottom: 10px; 
} 
 
 
 
.box .btn-drop_0 { 
  animation: drop-0 2s 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards infinite; 
} 
 
.box .btn-drop_1 { 
  animation: drop-1 2s 3s ease-out forwards infinite; 
} 
 
.box .btn-drop_2 { 
  animation: drop-2 2s 3s ease-out forwards infinite; 
} 
 
 
 
 
.box .dot:nth-of-type(1) { 
  animation: anim-1 2s 3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards infinite; 
} 
 
.box .dot:nth-of-type(2) { 
  animation: anim-2 2s 3s ease-out forwards infinite; 
} 
 
 
 
 
 
 
@keyframes drop-0 { 
 
  0% { 
    opacity: 1; 
    transform: scale(1.5) translateY(20px); 
  } 
  50% { 
    opacity: 1; 
    transform: scale(2.5) translateY(170px); 
    animation-timing-function: ease-out; 
  } 
  100% { 
    opacity: 0; 
    transform: scale(2) translateY(180px); 
  } 
} 
 
 
@keyframes drop-1 { 
  0% { 
    opacity: 1; 
    transform: rotate(180deg) translateY(0px) scale(1); 
  } 
  80% { 
    opacity: 0.7; 
  } 
  100% { 
    opacity: 0;         
    transform: rotate(90deg) translateY(20px) scale(1.25); 
  } 
} 
 
@keyframes drop-2 { 
  0% { 
    opacity: 1; 
  } 
  50% { 
    opacity: 0.7; 
  } 
  100% { 
    opacity: 0; 
    transform: rotate(270deg); 
  } 
} 
 
@keyframes anim-1 { 
  0% { 
    opacity: 1; 
    transform: scale(0.1); 
  } 
  70% { 
    opacity: 0.7; 
    transform: translateY(-70px) scale(1); 
  } 
  100% { 
    opacity: 0; 
    transform: translateY(-60px) scale(1); 
  } 
} 
 
@keyframes anim-2 { 
  0% { 
    opacity: 1; 
    transform: scale(0.1); 
  } 
  70% { 
    opacity: 0.5; 
    transform: translateY(-100px) translateX(-20px) scale(1); 
 
  } 
  100% { 
    opacity: 0; 
    transform: translateY(-90px) translateX(-20px) scale(1); 
  } 
} 
 
video { 
  visibility:hidden; 
}

<div class="box"> 
  <div class="box-fauset"> 
    <svg class="fauset" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.929 384.929"> 
 
        <g> 
            <path fill="goldenrod" d="M350.246,191.25v-66.938c0-5.259-4.303-9.562-9.562-9.562h-19.125c-5.26,0-13.865,0-19.125,0s-13.865,0-19.125,0H248.08    c-8.683-14.535-22.548-25.599-39.101-30.562c4.389-2.448,7.392-7.086,7.392-12.47c0-7.918-6.426-14.344-14.344-14.344h-4.781    V38.25h43.031c7.918,0,14.344-6.426,14.344-14.344s-6.426-14.344-14.344-14.344h-43.031c0-5.278-3.185-9.562-9.562-9.562    s-9.562,4.284-9.562,9.562h-43.031c-7.918,0-14.344,6.426-14.344,14.344s6.426,14.344,14.344,14.344h43.031v19.125h-4.781    c-7.918,0-14.344,6.426-14.344,14.344c0,5.872,3.538,10.901,8.587,13.12c-11.867,3.959-22.271,11.064-30.255,20.349H63.371V76.5    c0-10.566-8.559-19.125-19.125-19.125S25.121,65.934,25.121,76.5v143.438c0,10.566,8.559,19.125,19.125,19.125    s19.125-8.559,19.125-19.125v-38.25h65.264c11.475,21.783,34.31,36.653,60.645,36.653c33.488,0,61.315-24.031,67.301-55.778    h26.728c5.26,0,9.562,4.303,9.562,9.562v19.125c-5.26,0-9.562,4.303-9.562,9.562v19.125c0,5.26,4.303,9.562,9.562,9.562h57.375    c5.26,0,9.562-4.303,9.562-9.562v-19.125C359.808,195.553,355.505,191.25,350.246,191.25z"/> 
 
        </g> 
    </svg> 
 
    <svg class="btn-drop btn-drop_1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075z"/></svg> 
    <svg class="btn-drop btn-drop_2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075zm-.027 5.12c.467.725 1.027 1.987 1.027 3.32 0 3.908-4 4.548-4 2.17 0-1.633 1.988-4.044 2.973-5.49z"/></svg>   
    <svg class="btn-drop btn-drop_0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075zm-.027 5.12c.467.725 1.027 1.987 1.027 3.32 0 3.908-4 4.548-4 2.17 0-1.633 1.988-4.044 2.973-5.49z"/></svg> 
 
    <span class="dot"></span><span class="dot"></span> 
 
 
    <div class="wave"></div> 
  </div> 
   
  <div class="box-text text-1"> 
    <h1>Из капающего крана, за сутки убегает 10 вёдер воды</h1> 
  </div> 
   
  <div class="box-text text-2"> 
    <h1>Не хотите платить лишние деньги за ЖКХ, позвоните нам.</h1> 
    <p> 
      +7 (123) 45-67-891 
    </p> 
  </div> 
</div>

Answer 3

Отличную каплю можно взять отсюда

body { 
  background-color: #3498DB; 
  overflow: hidden; 
} 
 
div { 
  margin: 175px auto; 
} 
 
.drop { 
  position: relative; 
	width: 20px; 
	height: 20px; 
  top: -30px; 
  margin: 0 auto; 
	background: #FFF; 
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px; 
	border-radius: 20px; 
  -moz-animation-name: drip; 
  -webkit-animation-name: drip; 
  animation-name: drip; 
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19); 
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19); 
  animation-timing-function: cubic-bezier(1,0,.91,.19); 
  -moz-animation-duration: 2s; 
  -webkit-animation-duration: 2s; 
  animation-duration: 2s; 
  -moz-animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite; 
} 
 
.drop:before { 
  content: ""; 
  position: absolute; 
  width: 0; 
	height: 0; 
	border-left: 10px solid transparent; 
	border-right: 10px solid transparent; 
	border-bottom: 30px solid rgba(255,255,255,1); 
  top: -22px; 
} 
 
.wave { 
  position: relative; 
  opacity: 0; 
  top: 0; 
	width: 2px; 
	height: 1px; 
  border: #FFF 7px solid; 
	-moz-border-radius: 300px / 150px; 
	-webkit-border-radius: 300px / 150px; 
	border-radius: 300px / 150px; 
  -moz-animation-name: ripple; 
  -webkit-animation-name: ripple; 
  animation-name: ripple; 
  -moz-animation-delay: 2s; 
  -webkit-animation-delay: 2s; 
  animation-delay: 2s; 
  -moz-animation-duration: 2s; 
  -webkit-animation-duration: 2s; 
  animation-duration: 2s; 
  -moz-animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite; 
} 
 
.wave:after { 
  content: ""; 
  position: absolute; 
  opacity: 0; 
  top: -5px; 
  left: -5px; 
	width: 2px; 
	height: 1px; 
  border: #FFF 5px solid; 
	-moz-border-radius: 300px / 150px; 
	-webkit-border-radius: 300px / 150px; 
	border-radius: 300px / 150px; 
  -moz-animation-name: ripple-2; 
  -webkit-animation-name: ripple-2; 
  animation-name: ripple-2; 
  -moz-animation-duration: 2s; 
  -webkit-animation-duration: 2s; 
  animation-duration: 2s; 
  -moz-animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite; 
} 
 
@keyframes ripple { 
    from { 
      opacity: 1; 
    } 
    to { 
      width: 600px; 
      height: 300px; 
      border-width: 1px; 
      top: -100px; 
      opacity: 0; 
    } 
} 
 
@keyframes ripple-2 { 
    0% { 
      opacity: 1; 
    } 
    50% { 
      opacity: 0; 
    } 
  100% { 
    width: 200px; 
    height: 100px; 
    border-width: 1px; 
    top: 100px; 
    left: 200px; 
  } 
} 
 
@keyframes drip { 
    to { 
      top: 190px; 
    } 
}

<div class="drop"></div> 
<div class="wave"></div>

Водопроводный кран

svg * { 
    fill: inherit; 
} 
 
.tap{ 
    fill: grey; 
    position: relative; 
    margin: 20px auto 0; 
    width: 200px; 
    height: 200px; 
} 
.tap svg{ 
    width: 100%; 
    height: 100%; 
} 
 
use.faucet-off{ 
    display:block; 
} 
 
use.faucet-on{ 
    display: none; 
} 
 
.tap.on use.faucet-off{ 
    display: none; 
} 
 
.tap.on use.faucet-on{ 
    display: block; 
} 
 
#emitter { 
    position: absolute; 
    right: 20px; 
    bottom: 30px; 
} 
 
.particle { 
    position: absolute; 
    width: 10px; 
    height: 10px; 
    background: lightblue; 
    opacity: 0.7; 
    border-radius: 50%; 
    z-index: -1; 
}

<svg id="main" xmlns="http://www.w3.org/2000/svg" style="display:none"> 
    <symbol id="tap-off" viewBox="0 0 360.01 269.78"> 
        <path  fill="#ff0" d="M299.51,121l-87.86-20.4v16.17h-10a18.37,18.37,0,0,0-.44,2.64c0,6.8,0,13.59-.05,20.39,0,2,.54,2.79,2.63,3.13,12.76,2,22.9,8.6,31,18.51a5.17,5.17,0,0,0,4.62,2.18c6.1-.13,12.2,0,18.57,0v41.4H237.41c8.25,10.23,17,18,30.2,18.1,10.81,0.08,21.64-.69,32.43-0.29,14.68,0.55,28.66,4.21,41.25,12.13,16.17,10.18,25.8,25.27,31.62,43,4.87,14.88,6.85,30.25,7.08,45.87,0.05,3.43,0,6.86,0,10.54H323.23c-0.4-5.64-.25-11.21-1.27-16.56-2.94-15.46-13.42-25.38-29.12-27.67a120.17,120.17,0,0,0-16.84-.79c-1.38,0-3,1-4.13,2-23.61,19.28-50.28,30.4-81.09,30.13-23.71-.21-45.07-8.14-64.77-20.9a16.53,16.53,0,0,0-7.69-2.31c-12.21-1.37-23.14,1.47-32.94,8.9a7.88,7.88,0,0,1-4.42,1.5c-19.81.1-39.62,0.06-59.43,0.05-0.44,0-.89-0.08-1.53-0.15V205.13c0.76,0,1.42-.11,2.08-0.11,19.12,0,38.24,0,57.36-.06a4.65,4.65,0,0,1,4.44,2.43c2.94,4.54,6.08,8.95,9,13.47,1,1.51,2,1.85,3.89,1.76q19.49-.82,39-1.06c2.68,0,4.16-.82,5.37-3.15,2.27-4.35,4.85-8.54,7.57-13.28H128.86v-41.6c7.93,0,15.74.06,23.54-.06a5.08,5.08,0,0,0,3.5-1.32c9.81-11.91,14.67-15.15,29.52-19.23v-26H170.15V100.55L82.17,121V65.22l87.66,20.36,0.54-4.84h40.94l0.54,4.83,87.66-20.36V121Z" transform="translate(-20 -65.22)"/> 
    </symbol> 
 
    <symbol id="tap-on" viewBox="0 0 360.01 269.78" > 
        <path fill="#ff9900" d="M380,324.13c-0.23-15.62-2.21-31.15-7.08-46-5.82-17.78-15.45-32.95-31.62-43.13C328.7,227,314.72,223.35,300,222.8c-10.79-.4-21.62.38-32.43,0.3-13.19-.1-21.94-8.1-30.2-18.1H258V163.54c-7,0-12.49-.09-18.59,0a5.18,5.18,0,0,1-4.63-2.18c-8.06-9.91-18.2-16.48-31-18.51-2.09-.33-2.66-1.17-2.63-3.13,0.08-6.79,0-13.47.05-20.26a14.69,14.69,0,0,1,.44-2.52H211V100.58a68.77,68.77,0,0,1,12.92,3.87c2.82,7.32,8.28,13,15,15.35A10.13,10.13,0,0,0,241,121v-0.55a25.3,25.3,0,0,0,5.17.6c13.35,0,24.25-12.49,24.25-27.91s-10.94-27.91-24.29-27.91a24.93,24.93,0,0,0-5.12.6v-0.6a11.46,11.46,0,0,0-2.11,1.29c-6.62,2.41-11.92,8-14.72,15.26a72.06,72.06,0,0,1-12.37,3.94c-0.21-1.83-.33-2.7-0.5-4.7H170.37c-0.17,2-.34,2.87-0.54,4.71-8.33-1.93-13.2-3.61-16.23-5.07a21.59,21.59,0,0,0-11.42-10.3A12.15,12.15,0,0,0,140,69.22V69.7a14.27,14.27,0,0,0-3.84-.47c-11.21,0-20.21,10.7-20.21,23.89s9,23.89,20.17,23.89a14.61,14.61,0,0,0,3.89-.47V117a8.86,8.86,0,0,0,2-1,21.17,21.17,0,0,0,11.46-10.35c3.06-1.49,7.55-3.13,16.55-5.1V117h15v25.92c-15,4.09-19.5,7.33-29.31,19.23-0.7.85-2.63,1.31-3.83,1.32-7.8.12-15.87,0.06-23.87,0.06V205h20.75c-2.73,5-5.3,9-7.57,13.35-1.22,2.33-2.69,3.15-5.37,3.19q-19.5.24-39,1.08c-1.93.08-2.9-.25-3.89-1.76-3-4.52-6.11-8.93-9-13.47A4.65,4.65,0,0,0,79.43,205C60.31,205,41.2,205,22.08,205a17.59,17.59,0,0,0-2.08.11V308.52a7,7,0,0,0,1.53.15c19.81,0,39.62,0,59.43-.05a7.88,7.88,0,0,0,4.42-1.5c9.8-7.44,20.73-10.27,32.94-8.9a16.53,16.53,0,0,1,7.69,2.31c19.7,12.77,41.06,20.7,64.77,20.9,30.81,0.27,57.48-10.86,81.09-30.13,1.16-.95,2.74-2,4.13-2a120.16,120.16,0,0,1,16.84.79c15.7,2.29,26.18,12.54,29.12,28,1,5.35.87,10.89,1.27,16.89H380C380,331,380,327.56,380,324.13Z" transform="translate(-20 -65.22)"/> 
    </symbol> 
</svg> 
 
<div class="tap"> 
    <svg> 
        <use class="faucet-on" xlink:href="#tap-on"></use> 
        <use class="faucet-off" xlink:href="#tap-off"></use> 
    </svg> 
 
    <div id="emitter"></div> 
</div>

Answer 4

Извиняюсь, что все так ужасно сделано, но выбрасывать так долго писанный код, для которого я долго вырезал картинки, было очень жалко.

Функция(в цикле) выполняется только один раз, я без понятия почему. А так первый раз все работает отлично. Найти ошибку я уже не успеваю :/

$('#splash').fadeOut(0); 
$('#sign1').fadeOut(0); 
$('#sign2').fadeOut(0); 
function func(){ 
  $('#splash').delay(2000).fadeIn(200).delay(100).fadeOut(200); 
  $('#splash').delay(1500).fadeIn(200).delay(100).fadeOut(200); 
  $('#splash').delay(1500).fadeIn(200).delay(100).fadeOut(200); 
  $('#drop').delay(6000).fadeOut(0); 
  $('#crane').delay(6000).fadeOut(400); 
  $('#water').delay(6000).fadeOut(400); 
  $('#sign1').delay(6000).fadeIn(400).delay(1000).fadeOut(400); 
  $('#sign2').delay(7000).fadeIn(400).delay(1000).fadeOut(400); 
  $('#drop').delay(3000).fadeIn(500); 
  $('#crane').delay(3000).fadeIn(400); 
  $('#water').delay(3000).fadeIn(400); 
  $('#splash').delay(3000).fadeOut(0); 
} 
func();

#sign1, #sign2{ 
  font-size: 30px; 
  color: white; 
  position: absolute; 
} 
 
body { 
  background-color: #191940; 
} 
#water{ 
  position: absolute; 
  top: 80%; 
  width: 99%; 
  z-index: 3; 
} 
#crane{ 
  position: absolute; 
  top: 5%; 
  width: 10%; 
  left: 50%; 
  z-index: 2; 
} 
#drop{ 
  position: absolute; 
  top: 30%; 
  width: 1%; 
  left: 54.5%; 
  z-index: 1; 
  animation: fall 2s ease-in; 
  animation-iteration-count: 3; 
} 
#splash{ 
  position: absolute; 
  top: 75%; 
  width: 10%; 
  left: 50%; 
  z-index: 2; 
  transform: rotate(15deg); 
} 
@keyframes fall{ 
  from{ 
    transform: translateY(0); 
  } 
  to{ 
    transform: translateY(500px); 
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<div id="sign1">Из капающего крана, за сутки убегает 10 вёдер воды.</div> 
<div id="sign2">Не хотите платить лишние деньги за ЖКХ, позвоните нам.</div> 
<div><img src = "https://i.stack.imgur.com/b0WHy.png" id = "crane"></div> 
<div><img src = "https://i.stack.imgur.com/az3ux.png" id = "water"></div> 
<div><img src = "https://i.stack.imgur.com/kdigx.png" id = "drop"></div> 
<div><img src = "https://i.stack.imgur.com/UPrlO.png" id = "splash"></div>