Logo

Geanimeerde clip-path

Geanimeerde clip-path met CSS.

Hoe werkt dat dan?

Geanimeerde clip-path met CSS animation geeft een mooi effect wanneer een element van een pad naar een ander pad animeert.

<img src="/images/mind-blown.png">
body {
  background: darkcyan;
}

img {
  aspect-ratio: 1;
  animation: shape 10s linear infinite;
  max-height: 250px;
  margin: 0 auto;
  display: block;
}
	
@keyframes shape {
  0%,to {
  clip-path: shape(from 85.29% 44.97%,curve to 88.33% 55.92% with 86.31% 50.00%,curve to 85.78% 65.95% with 90.35% 61.85%,curve to 79.48% 76.05% with 81.21% 70.06%,curve to 74.23% 88.69% with 77.76% 82.04%,curve to 62.87% 90.15% with 70.70% 95.33%,curve to 49.13% 91.04% with 55.03% 84.97%,curve to 38.25% 91.86% with 43.23% 97.11%,curve to 27.39% 84.74% with 33.28% 86.61%,curve to 15.51% 79.45% with 21.51% 82.88%,curve to 10.64% 68.62% with 9.51% 76.02%,curve to 9.74% 55.61% with 11.77% 61.23%,curve to 11.95% 45.04% with 7.72% 50.00%,curve to 15.51% 33.74% with 16.19% 40.07%,curve to 18.83% 23.02% with 14.84% 27.41%,curve to 28.94% 17.96% with 22.82% 18.64%,curve to 39.31% 11.28% with 35.06% 17.28%,curve to 49.93% 5.80% with 43.57% 5.28%,curve to 61.79% 9.21% with 56.28% 6.32%,curve to 73.38% 14.05% with 67.31% 12.10%,curve to 84.16% 20.52% with 79.46% 16.01%,curve to 86.57% 32.48% with 88.86% 25.03%,curve to 85.29% 44.97% with 84.28% 39.93%);
  }
  33.3% {
clip-path: shape(from 97.33% 43.16%,curve to 97.76% 56.97% with 98.06% 50.00%,curve to 92.85% 69.25% with 97.45% 63.93%,curve to 84.17% 79.66% with 88.24% 74.58%,curve to 74.53% 88.12% with 80.10% 84.74%,curve to 62.28% 90.23% with 68.95% 91.49%,curve to 49.76% 90.67% with 55.60% 88.97%,curve to 37.70% 91.46% with 43.91% 92.36%,curve to 26.79% 86.38% with 31.48% 90.55%,curve to 19.46% 76.76% with 22.09% 82.21%,curve to 13.69% 66.45% with 16.82% 71.32%,curve to 8.34% 55.79% with 10.56% 61.58%,curve to 7.32% 43.91% with 6.12% 50.00%,curve to 8.80% 30.76% with 8.53% 37.82%,curve to 15.79% 20.99% with 9.08% 23.70%,curve to 28.86% 17.95% with 22.51% 18.28%,curve to 39.78% 14.17% with 35.21% 17.62%,curve to 50.17% 9.50% with 44.35% 10.71%,curve to 62.30% 8.78% with 56.00% 8.29%,curve to 73.38% 13.39% with 68.60% 9.28%,curve to 81.84% 22.33% with 78.16% 17.50%,curve to 91.06% 31.74% with 85.53% 27.17%,curve to 97.33% 43.16% with 96.60% 36.32%);  
  }
  66.6% {
 clip-path: shape(from 89.33% 44.01%,curve to 86.81% 55.25% with 87.89% 50.00%,curve to 86.33% 67.11% with 85.74% 60.49%,curve to 82.90% 78.53% with 86.91% 73.72%,curve to 72.39% 84.06% with 78.89% 83.34%,curve to 61.09% 89.31% with 65.88% 84.78%,curve to 50.49% 90.41% with 56.30% 93.84%,curve to 37.64% 89.74% with 44.68% 86.98%,curve to 25.48% 88.35% with 30.59% 92.50%,curve to 15.69% 79.63% with 20.36% 84.20%,curve to 10.52% 68.40% with 11.01% 75.06%,curve to 9.40% 55.87% with 10.04% 61.73%,curve to 10.87% 44.56% with 8.77% 50.00%,curve to 15.97% 34.59% with 12.97% 39.13%,curve to 18.98% 22.13% with 18.97% 30.06%,curve to 26.11% 13.75% with 18.98% 14.21%,curve to 38.67% 11.13% with 33.23% 13.29%,curve to 50.13% 8.08% with 44.10% 8.97%,curve to 63.30% 6.22% with 56.15% 7.20%,curve to 73.84% 11.91% with 70.44% 5.25%,curve to 79.54% 24.05% with 77.24% 18.57%,curve to 86.30% 33.79% with 81.83% 29.54%,curve to 89.33% 44.01% with 90.77% 38.03%); 
  }
}