DEV Community

loading...

Discussion on: CSS Animation: The King and the Fly

Collapse
codypearce profile image
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?

Collapse
alvaromontoro profile image
Alvaro Montoro Author

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)