SOURCE

<div class="box box2"><svg t="1559060684823" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2772" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" class="icon"><path d="M853.6 580.8h-722c-37.8 0-68.4-30.6-68.4-68.4S93.8 444 131.6 444h722c37.8 0 68.4 30.6 68.4 68.4s-30.6 68.4-68.4 68.4z" fill="#ffffff"></path><path d="M600.2 902.1c-16.3 0-32.7-5.8-45.8-17.6-28.1-25.3-30.3-68.5-5-96.6l248.3-275.5L549.4 237c-25.3-28.1-23-71.3 5-96.6 28.1-25.3 71.3-23 96.6 5l289.5 321.3c23.4 26 23.4 65.5 0 91.5L651 879.5c-13.5 15-32.1 22.6-50.8 22.6z" fill="#ffffff"></path></svg></div>

.box {
    width: 80px;
    height: 80px;
    margin: 20px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: linear-gradient(120deg,#2196f3,#8fd3f4);
}

.box2{
    border-radius:55% 45% 73% 27%/70% 58% 42% 30%;
    -webkit-animation:morph1 4s infinite;
    animation:morph1 4s infinite
}

@-webkit-keyframes morph1{
    0%{border-radius:26% 74% 49% 51%/21% 51% 49% 79%}
    25%{border-radius:74% 26% 50% 50%/53% 29% 71% 47%}
    50%{border-radius:48% 52% 28% 72%/45% 71% 29% 55%}
    75%{border-radius:48% 52% 76% 24%/70% 49% 51% 30%}
    to{border-radius:26% 74% 49% 51%/21% 51% 49% 79%}
}

@keyframes morph1{
    0%{border-radius:26% 74% 49% 51%/21% 51% 49% 79%}
    25%{border-radius:74% 26% 50% 50%/53% 29% 71% 47%}
    50%{border-radius:48% 52% 28% 72%/45% 71% 29% 55%}
    75%{border-radius:48% 52% 76% 24%/70% 49% 51% 30%}
    to{border-radius:26% 74% 49% 51%/21% 51% 49% 79%}
}