Modern CSS Clip-path Effects

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

1Star Rotate

A five-point star cut-out that turns slowly and speeds up on hover; use it for ratings or promo badges. Class: fx-star-rotate

<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-star-rotate d-grid" style="width:120px;height:120px;place-items:center;background:linear-gradient(135deg, var(--wt-accent), var(--wt-primary))">
  </div>
  <img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?auto=format&fit=crop&w=800&h=800&q=70" alt="Picture cut into a star" class="fx-star-rotate object-fit-cover" style="width:130px;height:130px">
</div>

/* CSS (already in assets/css/effects.css) */
.fx-star-rotate { -webkit-clip-path: polygon(50% 0, 62.3% 33%, 97.6% 34.5%, 70% 56.5%, 79.4% 90.5%, 50% 71%, 20.6% 90.5%, 30% 56.5%, 2.4% 34.5%, 37.7% 33%); clip-path: polygon(50% 0, 62.3% 33%, 97.6% 34.5%, 70% 56.5%, 79.4% 90.5%, 50% 71%, 20.6% 90.5%, 30% 56.5%, 2.4% 34.5%, 37.7% 33%); animation: fx-star-rotate-turn 14s linear infinite; }
.fx-star-rotate:hover { animation-duration: 3s; }
@keyframes fx-star-rotate-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fx-star-rotate, .fx-star-rotate::before, .fx-star-rotate::after, .fx-star-rotate *, .fx-star-rotate *::before, .fx-star-rotate *::after { animation: none !important; transition: none !important; }
}

2Complex 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; }
}

3Shape Shifter

A twelve-corner circle that snaps into a plus sign on hover - handy for add buttons and icons. Class: fx-shape-shifter

<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
  <button type="button" class="fx-shape-shifter border-0" style="width:110px;height:110px" aria-label="Add item"></button>
  <img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=800&h=800&q=70" alt="Picture that changes shape" class="fx-shape-shifter object-fit-cover" style="width:120px;height:120px">
</div>

/* CSS (already in assets/css/effects.css) */
.fx-shape-shifter {
  -webkit-clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%); clip-path: polygon(30.9% 3.8%, 56.5% 0.4%, 80.4% 10.3%, 96.2% 30.9%, 99.6% 56.5%, 89.7% 80.4%, 69.1% 96.2%, 43.5% 99.6%, 19.6% 89.7%, 3.8% 69.1%, 0.4% 43.5%, 10.3% 19.6%);
  transition: clip-path .5s cubic-bezier(.68, -.4, .27, 1.4), transform .5s;
  background: linear-gradient(135deg, var(--wt-primary), var(--wt-secondary));
}
.fx-shape-shifter:hover, .fx-shape-shifter:focus-visible { -webkit-clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .fx-shape-shifter, .fx-shape-shifter::before, .fx-shape-shifter::after, .fx-shape-shifter *, .fx-shape-shifter *::before, .fx-shape-shifter *::after { animation: none !important; transition: none !important; }
}