🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

July 28, 2020

Animated Illustrations with clip-path

How to animated an illustration in CSS using the clip-path property.

The CSS clip-path property is used to hide part of the element it is applied to. It creates a "clipping region". What's inside this region is visible, what's outside is hidden.

In this quick tutorial, we will focus on the polygon function, which accepts sets of coordinates that identify specific points.

For example:

.clipped-element {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
how the polygon function works
how the polygon function works

The first coordinate refers to the x-axis, the second one to the y-axis. The (0% 0%) point is in the top-left corner of the element. The area inside the points is the clipping region.

The clip-path property supports CSS transitions! You can use a selector (e.g., hover) and change the clipping coordinates' position. This trick allows you to morph the clip area and create cool animations!

Here's an example (move cursor over the rectangle in the demo):

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us