.svg-clip {
  width: 505px;
  height: 498px;
  background-color: lightcoral;
  clip-path: url(#roundedClip); /* Reference the SVG clipPath */
  margin: 2.5rem auto; /* Center the element horizontally */
  display: block;
}

/* Circle */
.circle-clip {
  clip-path: circle(50% at 50% 50%);
  /* A circle with a 50% radius centered in the element */
}

/* Ellipse */
.ellipse-clip {
  clip-path: ellipse(50% 25% at 50% 50%);
  /* An ellipse with 50% width and 25% height centered in the element */
}

/* Polygon */
.polygon-clip {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  /* A triangle defined by three points */
}

/* Inset */
.inset-clip {
  clip-path: inset(10% 20% 10% 20%);
  /* A rectangle inset by 10% from the top and bottom, and 20% from the left and right */
}

.clip {
  display: block;
  background: green;
  margin: 2.5rem auto; /* Center the element horizontally */
  width: 500px;
  height: 500px;
}

.clip-responsive {
  width: 100%;
}

@keyframes clip-animation {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

.animated-clip {
  background-image: url("https://images.unsplash.com/photo-1721332154373-17e78d19b4a4?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwxfHx8ZW58MHx8fHx8");
  animation: clip-animation 3s infinite alternate;
}

.image-clip {
  background-image: url("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60"); /* Background image to be clipped */
  mask-image: url("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60"); /* Your transparent image here */
  mask-size: cover; /* Scale the mask to cover the entire element */
  mask-repeat: no-repeat; /* Prevent the mask from repeating */
  -webkit-mask-image: url("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=700&q=60"); /* WebKit support */
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
}