<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.