<!-- Blob Animation -->
<div class="blob"></div>
body { background-color: #000029; }

.blob {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
	box-shadow: 0 0 200px 0 rgba(#FF0099, 0.7), 0 0 50px 0 rgba(#3023AE, 0.7);
	animation: morpheus 10s linear infinite;
}

@keyframes morpheus {
	// tl tr br bl / lt rt rb lb
	// top-left top-right bottom-right bottom-left / left-top right-top right-bottom left-bottom
	0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
	20% { border-radius: 60% 40% 40% 60% / 60% 25% 75% 40%; }
	40% { border-radius: 70% 30% 65% 35% / 80% 45% 55% 20%; }
	60% { border-radius: 30% 70% 70% 30% / 20% 30% 70% 80%; }
	80% { border-radius: 40% 60% 40% 60% / 70% 55% 45% 30%; }
	100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.