loading...
Cover image for 📋✍️ Hand-drawn border animation using clip-path and border-radius

📋✍️ Hand-drawn border animation using clip-path and border-radius

thormeier profile image Pascal Thormeier ・1 min read

For the same side project I created the fully-responsive sticky note, I also created a hand-drawn border effect and animation:

The skewing of the border is achieved by using border-radius: With the / notation, I can make the border look like it was drawn by the stroke of a pen.

The animation was a lot of effort. Using clip-path, I had to create five different polygons (one for each line and one for the content) and combine them, so only the borders are cut out. Using calc() and min() I can work precisely around the content and guarantee that no bit of the border is left out, even with larger elements.

(The auto-animation in the CodePen is achieved by using setInterval and toggling two classes that do the animation forward and in reverse.)

For good measure, here's my post about the sticky note:

That's it, have a nice evening!

Posted on by:

thormeier profile

Pascal Thormeier

@thormeier

Passionate full stack web developer, he/him

Discussion

pic
Editor guide