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

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:

📃 🖊️ Fully responsive HTML+CSS Sticky note

Pascal Thormeier ・ Sep 19 '20

#webdev #css #html #showdev

That's it, have a nice evening!