CSS Animation: The King and the Fly

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?

Comments

[Cody Pearce]

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]

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)

[Alvaro Montoro]

Don't do this at home :P

[Alvaro Montoro]

Do you have a picture? I haven't seen that character :$

[Alvaro Montoro]

....that would be a little more difficult...

[Alexandros Priftis]

You are an artist!!! congrats!!!