Whirlpool instead of blob

This commit is contained in:
Johannes Zellner
2025-09-24 20:37:52 +02:00
parent 234c192429
commit dcab038020
2 changed files with 122 additions and 36 deletions

View File

@@ -22,38 +22,3 @@ h1 {
background-color: transparent;
cursor: copy;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes color {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
.gradient {
--blob-size: 200px;
--speed: 6s;
--easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);
width: var(--blob-size);
height: var(--blob-size);
filter: blur(calc(var(--blob-size) / 5));
animation: rotate var(--speed) var(--easing) alternate infinite, color 5s var(--easing) alternate infinite;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
margin-top: 60px;
margin-bottom: 80px;
background-size: 200% 200%;
background-image: linear-gradient(#096dbd, #c340ff, #ffa240);
}