<body>
<div class=a></div>
<div class=b></div>
<div class=c></div>
</body>
body{
    width:100vw;
    height:100vh;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#222730;
  }
  .a{
    width: 50%;
    height: 150px;
    background: #4CAAB3;
    border-radius:0px 80px 0px 80px;
    animation:ani 1s ease-out infinite;
  }
  .b{
    position:absolute;
    width:50px;
    height:150px;
    background:#4CAAB3;
    transform:rotate(45deg);
    box-shadow:0px 0px 0px 50px #222730;
    transition:1s;
    animation:ani 2s ease-out infinite;
  }
@keyframes ani{
  from{transform:rotate(10deg);
 box-shadow:0px 0px 0px 50px #222730;}
  to{transform:rotate(360deg);
   box-shadow:0 0 10px #222730;
  width:500px;
  border-radius:80px 0px 90px;}
}
  .c{
    position:absolute;
    width:52px;
    height:52px;
    background:#393E46;
    border-radius:0 80px;
    animation:ani1 0.9s ease-out infinite;
  }
@keyframes ani1{
  from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.