CSS Animation: The King and the Fly

#codepen #showdev

A CSS animation of a king and an annoying fly.

You can turn on/off the animations (off by default). If you turn them on, the sound of the fan working like crazy will make for the buzzing of the fly 😋😳

I was thinking about adding some ~~candelabra~~ and maybe ~~a couple of guards/knights~~ (one done, one to go). Any suggestions?

Top comments (6)

Cody Pearce • Mar 25 '20

Awesome animation. Looks like you're using a lot of clip-paths:

.beard {
  width: 120%;
  height: 70%;
  border-radius: 100%;
  background: red;
  background: linear-gradient(to bottom, white 15%, #e8e8e8 85%);
  top: 70%;
  left: -10%;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 70% 92%, 65% 98%, 60% 90%, 55% 100%, 50% 85%, 45% 98%, 40% 88%, 35% 98%, 30% 90%, 25% 100%, 0% 100%);
}

Are you using a tool to create these clip-paths or manually creating them?

Alvaro Montoro • Mar 25 '20

These ones are fairly simple, so I created them manually. If I need more complex ones, I may use tools like GIMP to trace and export the path (probably not ideal, but it does the trick)