selector{
--card-shape: 48% 52% 58% 42% / 48% 25% 75% 52%;
--card-hover-shape: 50%;
--heading-shape: 50%;
--heading-hover-shape: 61% 39% 38% 62% / 67% 49% 51% 33%;
--heading-background: #eff0f4;
--heading-circle-size: 80px;
--bubble-color: #ffffff;
}
selector{
box-shadow: inset 20px 20px 20px rgba(0,0,0,0.05), 25px 35px 20px rgba(0,0,0,0.05), 25px 30px 30px rgba(0,0,0,0.05), inset -20px -20px 25px rgba(255,255,255,0.9);
transition: 0.5s ease-in-out;
border-radius: var(--card-shape);
}
selector:hover{
border-radius: var(--card-hover-shape);
}
selector::before{
content: '';
position: absolute;
top: 50px;
left: 85px;
width: 35px;
height: 35px;
background: var(--bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector::after{
content: '';
position: absolute;
top: 90px;
left: 110px;
width: 15px;
height: 15px;
background: var(--bubble-color);
border-radius: 50%;
opacity: 0.9;
}
selector h2{
position: relative;
width: var(--heading-circle-size);
height: var(--heading-circle-size);
background: var(--heading-background);
border-radius: var(--heading-shape);
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s ease-in-out;
box-shadow: inset 2px 5px 10px rgba(0,0,0,0.1), inset -2px -5px 10px rgba(255,255,255,1), 15px 15px 10px rgba(0,0,0,0.05), 15px 10px 15px rgba(0,0,0,0.025);
}
selector:hover h2{
border-radius: var(--heading-hover-shape);
}

Shape Generator Link
https://9elements.github.io/fancy-border-radius/

Shape samples
54% 46% 80% 20% / 68% 69% 31% 32%
60% 40% 22% 78% / 62% 30% 70% 38%