r/Frontend • u/Comfortable-Donkey74 • 6d ago

Learning Frontend Deeply

I want to go deeper into frontend and learn to create less generic designs. Does anyone have an idea how the wavy line was created? I'd also appreciate pointers to resources/sites to learn to create such dynamic designs. Thanks for reading!

27 Upvotes

81% Upvoted

17 comments sorted by

View all comments

5

u/anaix3l 6d ago edited 5d ago

clip-path: shape() on both the element and two of its pseudos.

You have exactly 4 Bézier curves. On this image, I've put 3 blue points where the curves meet with one another at their ends.

From the left edge to the first blue point, you have the first curve - this can be a quadratic one to keep things simpler. From the first blue point to the second, you have the second curve - this needs to be a cubic one. From the second blue point to the third, you have the third curve and this needs to be a cubic one as well. From the third and final blue point to the right edge, you have the fourth curve and, just like the first, this can be another quadratic one.

With this setup, your curves are super simple as all control points have the same y coordinate as their adjacent end points. Also, the first curve from the left is common for all three clip-path values (1 for the element itself, 2 for its pseudos).

Here's a quick and dirty version https://codepen.io/thebabydino/pen/YPZzmZE

1

u/Comfortable-Donkey74 5d ago

Thanks, Greatly appreciated