is it possible to create a liquid hexagon with css?

.box {
  width: 300px; /* adjust this to control the size of the shape */
  margin: 20px;
  transform:rotate(-20deg);
}

.box,
.box > div > div{
  filter: url('#goo'); /* the SVG filter (adjust the "stDeviation" value to control the radius) */
}

.box > div {
  padding: 20px; /* thickness of the gradient */
  /* your gradient here */
  background: linear-gradient(70deg, rgba(139,21,186,1), rgba(64,13,104,1), rgba(139,21,186,1));
}

.box > div,
.box > div > div > div {
  /* hexagon shape (https://bennettfeely.com/clippy/) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.box > div > div > div  {
  padding-top: 91%; /* keep the ratio of the shape */
}

.box > div > div > div::before {
  content:"";
  position:absolute;
  top:-10%;
  left:-10%;
  right:-10%;
  bottom:-10%;
  background:url(https://picsum.photos/id/1069/800/800) center/cover;
  transform:rotate(20deg); /* rotate the image back */
}

* {
  box-sizing: border-box;
}

<div class="box">
  <div>
    <div>
      <div></div>
    </div>
  </div>
</div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>                                  
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" 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="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>