[Solved] Can this design be made with just CSS? [closed]

by


The way you do this is using SVG filters:
SVG goo on Codepen

Also you may like to read this The Gooey Effect

The most important is defining a goo filter. Next you draw several circles (border-radius:50%;) and you apply the svg filter.

The size of the SVG element is irrelevant and you may hide it away.

body{background:skyBlue;}
svg{position:absolute;left:-10em;}
.wrap {
  
  display: block;
  margin:0 auto;
  width: 300px;
  height: 260px;
  position: relative;
  filter:url(#goo);
}
.wrap div {
  
  position: absolute;
  left: 0px;
  top: 90px;
  height: 80px;
  width: 80px;
  border-radius:50%;
  background-color: white;
  color:red;
  text-align:center;
  line-height:80px;

}
.wrap div:nth-child(2){
  left: 90px;
}
.wrap div:nth-child(3){
  left: 180px;
}
<svg  width="1" height="1">
<defs>
<filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" 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 40  -10" result="goo"/>
      <feBlend in="SourceGraphic" in2="goo" />
    </filter> 
  </defs>
</svg>


<div class ="wrap">
<div>A</div>
<div>B</div> 
<div>C</div> 
</div>

2

solved Can this design be made with just CSS? [closed]