<div><h1>Animating border radius</h1></div>

body
  width 100%
  height 100%
  min-height 100vh
  display flex
  align-content center
  align-items center
  justify-content center
  margin 0
  background #282828
div
  display flex
  align-content center
  align-items center
  justify-content center
  width 200px
  height 200px
  margin auto
  background-color #21D4FD;
  background-image linear-gradient(19deg, #21D4FD 0%, #B721FF 100%)
  border-radius 30% 70% 70% 30% / 30% 30% 70% 70%
  box-shadow 15px 15px 50px rgba(0,0,0,0.2)
  animation: morphing 10s infinite
  overflow hidden
  &:hover
    animation-play-state paused
  h1
    color white
    font-family Helvetica Neue, Helvetica, Verdana, sans-serif
    font-weight 400
    font-size 35px
    line-height 100%
    text-transform uppercase
    letter-spacing 0.02em
    margin auto

  @keyframes morphing {
    0% {
      border-radius 30% 70% 70% 30% / 30% 30% 70% 70%
      box-shadow 15px 15px 50px rgba(0,0,0,0.2)
    }
    25% { 
      border-radius 58% 42% 75% 25% / 76% 46% 54% 24%
    }
    50% {
      border-radius 50% 50% 33% 67% / 55% 27% 73% 45%
      box-shadow -10px -5px 50px rgba(0,0,0,0.2)
    }
    75% {
      border-radius 33% 67% 58% 42% / 63% 68% 32% 37%   
    }
  }