Transform shapes using border-radius, clip-path, and size changes. Create organic, fluid animations.
1. Square ↔ Circle
Classic shape morph using border-radius.
@keyframes morphCircle {
0%, 100% { border-radius: 0%; }
50% { border-radius: 50%; }
}
2. Organic Blob
Complex border-radius for fluid shapes.
border-radius:
30% 70% 70% 30% /
30% 30% 70% 70%;
/* Animate all 8 values */
3. Clip-Path Morph
Diamond to hexagon to pentagon.
@keyframes morphClipPath {
0% { clip-path: polygon(...); }
50% { clip-path: polygon(...); }
}
4. Triangle ↔ Square
Geometric shape transformation.
0% {
clip-path: polygon(
50% 0%, 0% 100%, 100% 100%
);
}
50% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 0% 100%
);
}
5. Star ↔ Circle
Complex polygon to circle.
0% {
clip-path: polygon(/* star */);
}
50% {
clip-path: circle(50%);
}
6. Rotate + Morph
Combined rotation and shape change.
animation: rotateMorph 5s infinite;
/* border-radius + rotate */
7. Width/Height Morph
Size dimension changes.
@keyframes morphSize {
0% { width: 120px; height: 80px; }
50% { width: 80px; height: 120px; }
}
8. Interactive (Hover)
Hover to trigger morph animation.
.morph-hover:hover {
border-radius: 50%;
transform: rotate(180deg) scale(1.2);
}