div.clippy
View Compiled
*{
  margin: 0;
}

.clippy {
  position: absolute;
  top: calc(50% - 2.5rem);
  left: calc(50% - 2.5rem);
  background: hotpink;
  width: 10rem;
  height: 10rem;
  clip-path: circle(50% at 100% 0);
  animation: clippy 10s forwards infinite;
}

@keyframes clippy {
  0% {
    clip-path: circle(50% at 100% 0);
  }
  10% {
    clip-path: circle(150% at 100% 0);
  }
  20% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  30% {
    clip-path: polygon(
      0 70%,
      30% 70%,
      30% 35%,
      60% 35%,
      60% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  35% {
    clip-path: polygon(
      0 70%,
      30% 70%,
      30% 35%,
      60% 35%,
      60% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  40% {
    clip-path: polygon(
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  50% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 100%,
      100% 100%
    );
  }
  60% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 100%,
      100% 100%
    );
  }
  75% {
    clip-path: polygon(
      0 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }
  76% {
    clip-path: circle(150% at 100% 0);
  }
  85% {
    clip-path: circle(50% at 0 0);
  }
  90% {
    clip-path: circle(50% at 0 0);
  }
  100% {
    clip-path: circle(50% at 100% 0);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.