Капли воды на 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%;
}