Modern CSS Clip-path Effects

Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.

1Polygon Morph

Morphs an image or block between a hexagon, a square and a diamond using six-point polygons. Class: fx-polygon-morph

<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
  <img src="../assets/img/square-2.svg" alt="Gallery picture with a morphing outline" class="fx-polygon-morph object-cover" style="width:160px;height:160px">
</div>

/* CSS (already in assets/css/effects.css) */
.fx-polygon-morph {
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  animation: fx-polygon-morph-morph 7s ease-in-out infinite;
}
@keyframes fx-polygon-morph-morph {
  0%, 100% { -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  33% { -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 50%); }
  66% { -webkit-clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); clip-path: polygon(50% 0, 100% 50%, 100% 50%, 50% 100%, 0 50%, 0 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fx-polygon-morph, .fx-polygon-morph::before, .fx-polygon-morph::after, .fx-polygon-morph *, .fx-polygon-morph *::before, .fx-polygon-morph *::after { animation: none !important; transition: none !important; }
}

2Circle Reveal

Shows a circular window of an image that opens to the full picture on hover or keyboard focus. Class: fx-circle-reveal

<div class="flex flex-wrap items-center justify-center gap-4 p-4 h-full" style="min-height:200px">
  <a href="#" class="inline-block" aria-label="Open project"><img src="../assets/img/photo-3.svg" alt="Project cover revealed in a circle" class="fx-circle-reveal object-cover" style="width:220px;height:150px"></a>
</div>

/* CSS (already in assets/css/effects.css) */
.fx-circle-reveal { -webkit-clip-path: circle(36% at 50% 50%); clip-path: circle(36% at 50% 50%); transition: clip-path .7s cubic-bezier(.6, 0, .2, 1); }
.fx-circle-reveal:hover, .fx-circle-reveal:focus-visible, :focus-visible > .fx-circle-reveal { -webkit-clip-path: circle(75% at 50% 50%); clip-path: circle(75% at 50% 50%); }
@media (prefers-reduced-motion: reduce) {
  .fx-circle-reveal, .fx-circle-reveal::before, .fx-circle-reveal::after, .fx-circle-reveal *, .fx-circle-reveal *::before, .fx-circle-reveal *::after { animation: none !important; transition: none !important; }
}