Modern CSS Clip-path Effects
Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Circle 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="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<a href="#" class="d-inline-block" aria-label="Open project"><img src="https://images.unsplash.com/photo-1758599668429-121d54188b9c?auto=format&fit=crop&w=1200&h=800&q=70" alt="Project cover revealed in a circle" class="fx-circle-reveal object-fit-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; }
}2Triangle Spin
Cuts an element into a triangle and spins it slowly - great for loaders and decorative badges. Class: fx-triangle-spin
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="fx-triangle-spin" style="width:110px;height:110px">
</div>
<img src="https://images.unsplash.com/photo-1706806594967-44e2b31f01d0?auto=format&fit=crop&w=800&h=800&q=70" alt="Picture cropped to a triangle" class="fx-triangle-spin object-fit-cover" style="width:120px;height:120px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-triangle-spin {
-webkit-clip-path: polygon(50% 4%, 96% 88%, 4% 88%); clip-path: polygon(50% 4%, 96% 88%, 4% 88%);
background: linear-gradient(160deg, var(--wt-primary), var(--wt-accent));
animation: fx-triangle-spin-spin 6s linear infinite;
}
@keyframes fx-triangle-spin-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.fx-triangle-spin, .fx-triangle-spin::before, .fx-triangle-spin::after, .fx-triangle-spin *, .fx-triangle-spin *::before, .fx-triangle-spin *::after { animation: none !important; transition: none !important; }
}