Go to homepage

Projects /

July 28, 2020

Animated Illustrations with clip-path

By CodyHouse
386 HTML, CSS, JS components. Download →

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):

Level up your CSS skills

Each month we email a 1-minute CSS tutorial to 20K developers

Awesome! We just sent you a confirmation link by email

Error - please try again or contact us

Your email address is already subscribed

Project duplicated

Project created

Globals imported

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