Curvy header

[MikeV (Mike)]

Is there any way to create a curvy/wavy header or divider?
Like in the past with Mask in RWC.

(without using an svg or image)

Greetings,
Mike

[ben]

Do you have an example screenshot or link to a site with the look you’re after?

[MikeV (Mike)]

Hiii Ben!

Here is a screenshot and the website link. You have to scroll down a bit.

Thanks!

www.yools.be

[ben]

@MikeV

(without using an svg or image)

Any particular reason why you don’t want to use an SVG for this?

I could create a demo project for you using an SVG, if you’re ok with SVGs

[MikeV (Mike)]

Hiii @ben !

Just because i am not good at drawing haha.
If you can make an example project with an svg, thats okej

Thank you!

[MikeV (Mike)]

Is there a way to get easy curvy / wavy svgs?

Thanks Ben!

[pumpkin (Fynn)]

Lot of tools out there on the internet. Here’s one.

[dan (Dan C.)]

@MikeV,

Don’t forget, that if you download an svg, just change the fill # colour to “currentColor” so you can pick a tailwind colour in Elements. Like this:

Just tested this and you might get an antialiasing rendering issue… as seen in this video:

The easy way to fix this is to use the Transform property and offset the svg down 1pixel so the svg and the container overlap. This will eliminate the sub 1 pixel line on resize.

Open the Project file in Elements.

[MikeV (Mike)]

God, I never knew about this site

Thank you!

[MikeV (Mike)]

Thanks Dan for the example project and the explanation!
You guys rock! <3

[ben]

looks like @dan beat me to it!

Let us know if you have any other questions or need more help

[MikeV (Mike)]

Thank you!