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-1777923311853-d14b7beb9fec?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; }
}2SVG Path (Heart)
A heart-shaped cut-out traced from the classic heart curve, scaling to any size, with a soft beat. Class: fx-svg-path-heart
<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-svg-path-heart" style="width:120px;height:110px;background:linear-gradient(135deg, var(--wt-accent), var(--wt-primary))">
</div>
<img src="https://images.unsplash.com/photo-1752650736677-94fe8cdb9d5c?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo inside a heart" class="fx-svg-path-heart object-fit-cover" style="width:140px;height:128px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-svg-path-heart { -webkit-clip-path: polygon(50% 24.9%, 50.3% 22.9%, 52% 17.6%, 56.1% 10.8%, 63% 4.9%, 72% 2%, 81.8% 3.3%, 90.7% 8.8%, 96.8% 17.6%, 99% 28.2%, 96.8% 39.3%, 90.7% 49.9%, 81.8% 59.8%, 72% 69%, 63% 77.7%, 56.1% 85.6%, 52% 92.1%, 50.3% 96.5%, 50% 98%, 49.7% 96.5%, 48% 92.1%, 43.9% 85.6%, 37% 77.7%, 28% 69%, 18.2% 59.8%, 9.3% 49.9%, 3.2% 39.3%, 1% 28.2%, 3.2% 17.6%, 9.3% 8.8%, 18.2% 3.3%, 28% 2%, 37% 4.9%, 43.9% 10.8%, 48% 17.6%, 49.7% 22.9%); clip-path: polygon(50% 24.9%, 50.3% 22.9%, 52% 17.6%, 56.1% 10.8%, 63% 4.9%, 72% 2%, 81.8% 3.3%, 90.7% 8.8%, 96.8% 17.6%, 99% 28.2%, 96.8% 39.3%, 90.7% 49.9%, 81.8% 59.8%, 72% 69%, 63% 77.7%, 56.1% 85.6%, 52% 92.1%, 50.3% 96.5%, 50% 98%, 49.7% 96.5%, 48% 92.1%, 43.9% 85.6%, 37% 77.7%, 28% 69%, 18.2% 59.8%, 9.3% 49.9%, 3.2% 39.3%, 1% 28.2%, 3.2% 17.6%, 9.3% 8.8%, 18.2% 3.3%, 28% 2%, 37% 4.9%, 43.9% 10.8%, 48% 17.6%, 49.7% 22.9%); animation: fx-svg-path-heart-beat 1.8s ease-in-out infinite; }
@keyframes fx-svg-path-heart-beat { 0%, 45%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
.fx-svg-path-heart, .fx-svg-path-heart::before, .fx-svg-path-heart::after, .fx-svg-path-heart *, .fx-svg-path-heart *::before, .fx-svg-path-heart *::after { animation: none !important; transition: none !important; }
}