<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%		
		}
	}