/* CSS */
.animated-shape {
width: 200px;
height: 200px;
background: linear-gradient(135deg, #7b2ff7, #c77dff);
animation: clipAnimation 2s ease-in-out infinite;
}
@keyframes clipAnimation {
0%, 100% {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
50% {
clip-path: circle(40% at 50% 50%);
}
}
/* HTML */ <div class="animated-shape"></div>
/* HTML */
<img class="clipped-shape" src="image.jpg" alt="Clipped Image">
/* CSS */
.clipped-shape {
width: 400px;
height: 400px;
object-fit: cover;
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
transition: clip-path 0.3s ease;
}
.clipped-shape:hover {
clip-path: circle(50% at 50% 50%);
}