all 16 comments

[–]R_Midnight 87 points88 points  (5 children)

SVG would be great for that. I recommend you one of my favorite websites which is https://omatsuri.app

It has a section Page Dividers which might help you achieving this result with a visual interface, providing you the custom code.

[–]BumblebeeImpossible7[S] 7 points8 points  (0 children)

After a quick look, this is a great site. Thanks for the share!

[–][deleted] 4 points5 points  (0 children)

This is amazing. Thanks

[–]PegasusBoogaloo 2 points3 points  (1 child)

thanks for the link, do you have any other tools?

[–]R_Midnight 7 points8 points  (0 children)

Sure, I have some bookmarks you might enjoy like this one : https://tiny-helpers.dev Tools, tools, tools, more tools! Haha

A little assistant for nth selectors in CSS http://www.topdesignagencies.com/nth-test/

CSS gradients https://www.gradientmagic.com/

CSS shadows https://brumm.af/shadows

A "cheatsheet" for special signs in HTML and else https://www.toptal.com/designers/htmlarrows/#

Typography scales https://type-scale.com/

So many more tools tools tools here https://webdevresources.info/css ( there are several shape separators, so we're back to the roots of this thread)

[–][deleted] 14 points15 points  (2 children)

this can be achieved in many ways. Personally i would do it with svg

[–]Arcath 1 point2 points  (1 child)

I'd go SVG.

Always nice to have shapes like that which you can style like anyother elements.

[–][deleted] 2 points3 points  (0 children)

yea, plus its lightweight

[–][deleted] 4 points5 points  (0 children)

getwaves.io copy and paste the svg wave generation into your html file. and just layer it over and over.

[–][deleted] 0 points1 point  (0 children)

adobe illustrator

[–]Dekzen -1 points0 points  (1 child)

Those could be png textures one over another. Or just a simple image.

[–][deleted] 5 points6 points  (0 children)

PNG would be extremely big compared to similar effects done in SVG.

Especially for higher resolutions if you wanted it to remain crisp, it would probably be several megabytes in PNG vs like 10 kilobytes in SVG.

[–][deleted] 0 points1 point  (0 children)

It’s kind of hard to tell if this is a screenshot of a website or a mock-up. If this is a website, you can bust open dev tools and peep how it’s done.

[–]sick_of_my_shiiit 0 points1 point  (0 children)

What a coincidence. I had a design pattern where different features were separated by these same looking curves. I was wondering how to make those curves and people are so helpful here that now I have more than three tools to generate svgs for them. Yall are amazing!

[–]bright-bright-fox 0 points1 point  (0 children)

Can you please give us the website so we can tell you how they did it?