Капли воды на CSS для оформления сайта

Настоящее хобби нашего поколения - это нытье и тупая болтовня ни о чем! Неудачные отношения, проблемы с учёбой, начальник-мудак. Это всё полная фигня. Если у тебя ничего не получается, то есть только один мудак - это ты. И ты сильно удивишься, если узнаешь, как много можно изменить, просто оторвав жопу от дивана!

Интересная реализация капель воды для оформления сайта. Можно оформить фон, блок или иную секцию. Из особенностей стоит отменить то, что капли воды можно расставить по блоку в нужном масштабе или другой секции с абсолютным позиционированием. Капли выполнены на CSS.

HTML

<div class="droplet-wrap">
    <div class="droplet"></div>
    <div class="droplet"></div>
    <div class="droplet"></div>
    <div class="droplet"></div>
    <div class="droplet"></div>
    <div class="droplet"></div>
    <div class="droplet"></div>
</div>

CSS

.droplet-wrap {
    --bubble-radius: 100px;
    --bubble-shadow: calc((var(--bubble-radius) / 25) * -1) calc(var(--bubble-radius) / 18) 8px 0 rgba(0,0,0,0.8);  
    position: relative;
    height: 500px;
    background-image: url(/demo/1280/fantasy-3.jpg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
    margin: 20px 0;
    border: 6px solid #BFE2FF;    
}
.droplet-wrap .droplet {
    content: "";
    display: block;
    width: var(--bubble-radius);
    height: calc(var(--bubble-radius) - 0.8rem);
    border-radius: 50%;
    position: relative;
    box-shadow: var(--bubble-shadow), inset calc((var(--bubble-radius) / 5) * -1) calc((var(--bubble-radius) / 5)) calc((var(--bubble-radius) / 4)) 0 rgba(0,0,0,0.7);
    position: absolute;
    background-color: rgba(255,255,255,0.22);
}
.droplet-wrap .droplet:after {
    position: absolute;
    content: " ";
    background: #fff;
    width: 15%;
    height: 15%;
    border-radius: 50%;
    transform: skew(11deg, 2deg);
    top: 20%;
    left: 63%;
    z-index: 10;
    opacity: 0.9;
}
.droplet-wrap .droplet:before {
    position: absolute;
    content: " ";
    background-color: #fff;
    width: 9%;
    height: 9%;
    border-radius: 50%;
    transform: skew(10deg, 0deg);
    top: 40%;
    left: 75%;
    z-index: 20;
    opacity: 0.4;
}
.droplet-wrap .droplet:nth-child(1) {
    left: 50%;
    top: 50%;
}
.droplet-wrap .droplet:nth-child(2) {
    transform: scale(0.7);
    left: 6%;
    top: 10%;
}
.droplet-wrap .droplet:nth-child(3) {
    transform: scale(0.5);
    top: 40%;
    left: 70%;
}
.droplet-wrap .droplet:nth-child(4) {
    transform: scale(0.48);
    top: 63%;
    left: 75%;
}
.droplet-wrap .droplet:nth-child(5) {
    transform: scale(0.24);
    top: 20%;
    left: 60%;
}
.droplet-wrap .droplet:nth-child(6) {
    transform: scale(0.3);
    top: 30%;
    left: 10%;
}
.droplet-wrap .droplet:nth-child(7) {
    transform: scale(0.4);
    top: 71%;
    left: 30%;
}