Cut images and blocks into polygons, circles, stars and waves, and animate between the shapes.
1Triangle 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-1513584684374-8bab748fbf90?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; }
}2Ellipse Morph
An elliptical frame that breathes between wide and tall - soft and organic for portraits. Class: fx-ellipse-morph
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<img src="https://images.unsplash.com/photo-1580587771525-78b9dba3b914?auto=format&fit=crop&w=800&h=800&q=70" alt="Portrait in a breathing ellipse" class="fx-ellipse-morph object-fit-cover" style="width:170px;height:170px">
</div>
/* CSS (already in assets/css/effects.css) */
.fx-ellipse-morph { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); animation: fx-ellipse-morph-breathe 5s ease-in-out infinite alternate; }
@keyframes fx-ellipse-morph-breathe {
0% { -webkit-clip-path: ellipse(46% 34% at 50% 50%); clip-path: ellipse(46% 34% at 50% 50%); }
100% { -webkit-clip-path: ellipse(32% 48% at 50% 50%); clip-path: ellipse(32% 48% at 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
.fx-ellipse-morph, .fx-ellipse-morph::before, .fx-ellipse-morph::after, .fx-ellipse-morph *, .fx-ellipse-morph *::before, .fx-ellipse-morph *::after { animation: none !important; transition: none !important; }
}3Complex Animation
Chains four eight-point shapes with rotation for an eye-catching hero ornament. Class: fx-complex-animation
<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-complex-animation" style="width:140px;height:140px">
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-complex-animation {
-webkit-clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%); clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%);
background: conic-gradient(from 45deg, var(--wt-primary), var(--wt-secondary), var(--wt-accent), var(--wt-primary));
animation: fx-complex-animation-shift 10s ease-in-out infinite;
}
@keyframes fx-complex-animation-shift {
0%, 100% { -webkit-clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%); clip-path: polygon(50% 0, 85% 15%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0 50%, 15% 15%); transform: rotate(0deg); }
25% { -webkit-clip-path: polygon(50% 20%, 100% 0, 80% 50%, 100% 100%, 50% 80%, 0 100%, 20% 50%, 0 0); clip-path: polygon(50% 20%, 100% 0, 80% 50%, 100% 100%, 50% 80%, 0 100%, 20% 50%, 0 0); transform: rotate(45deg); }
50% { -webkit-clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0); clip-path: polygon(50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%, 0 0); transform: rotate(90deg) scale(.85); }
75% { -webkit-clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.fx-complex-animation, .fx-complex-animation::before, .fx-complex-animation::after, .fx-complex-animation *, .fx-complex-animation *::before, .fx-complex-animation *::after { animation: none !important; transition: none !important; }
}