Usando os filters do SVG acredito que vc consegue um resultado bem próximo ao da imagem. Eu não vou entrar em detalhes pois o assunto é extenso. Mas deixei comentado no código onde vc controla a intensidade da curvatura entra a bola e a barra. E abaixo deixo algumas explicações.
Repare que na tag do SVG tem apenas o filtro e as configurações dos filtros. Depois de definí-las usei o filter:url(#filter)
para chamar o filtro na barra e nos elementos que estão dentro. Por isso precisei de uma div
nova por fora (.base
) para evitar distorções nos cantos da barra que vai receber o filtro.
Para entender melhor veja o exemplo abaixo. Veja também que funciona do IE 10 para frente: https://caniuse.com/#feat=svg-filters
OBS: Deixei uma imagem de fundo no background e uma animação no final do CSS apenas para vc ver como é a interação do efeito do filtro entre os elementos. Sei que não precisa da animação, mas é apenas para fins didáticos, ok.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.base {
background: #29a7e8;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
.bottom-bar {
background: #29a7e8;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
text-align: center;
filter: url(#filter);
}
.circle {
display: inline-block;
position: relative;
top: -10px;
border-radius: 100%;
background: #29a7e8;
width: 60px;
height: 60px;
margin: 0 1rem;
}
/* apenas exemplo */
.circle:nth-child(2) {
-webkit-animation: anima 2s infinite ease;
animation: anima 2s infinite ease;
}
@-webkit-keyframes anima {
50% {
top: -100px;
}
}
@keyframes anima {
50% {
top: -100px;
}
}
body {
background: url(http://unsplash.it/600/400);
background-size: cover;
background-position: center;
overflow: hidden;
}
<div class="base">
<div class="bottom-bar">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
<svg>
<defs>
<filter id="filter">
<!-- aqui vc controla a curvatura entre a bola e a barra, deixei 5 para ficar acentuado e vc perceber, mas com 3 fica como vc quer mais suave -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/>
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="filter"/>
<feComposite in="SourceGraphic" in2="filter" operator="atop"/>
</filter>
</defs>
</svg>