How can I draw/create the wavy lines in this way?

[TomTom66]

Hello, maybe someone can give me some tips: How can I draw/create the wavy lines (see images) in this way? I have already tried it a few times with the "Pen Tool" but somehow the line always becomes a bit "angular". In addition, it seems to me that it should actually be more like 2 filled (wave) shapes which are then assigned different transparency and which partially overlap.

However, the image ("shape") must also be rounded off at the bottom or at least cut out so that you can later use any image as a filling.

Is there something like this in the Xara design templates (or in the case of free templates, vectors) that you can convert. But I found nothing.

I have been using Xara for 15 years but only for graphics/websites. Unfortunately, I have almost no experience with drawing such curves,

Thanks for any help.

Tom

[TomTom66]

Additional info: The "original" is from a wordpress template, the waves are SVG generated with 3 paths. The seems generated at runtime so you can not copy anything to use as "blueprint".

[Acorn]

Tom, the quickest way is to use three copies of the image and slice each with a wavy line and discard the bottom cut-out.
you then just stack the three parts and give two of them a 50% Linear Transparency.

Each horizontal line starts outside the image and would have three points (left, middle right) all connected as Make Curve and Smooth Join.
This allows to to smoothly adjust the curve.

With a Line in position over one image , select Both and pick Combine Shapes > Slice.

If you Clone the three Lines, you can thereafter adjust the curves and width to suit for new designs.

Acorn

[TomTom66]

Tom, the quickest way is to use three copies of the image and slice each with a wavy line and discard the bottom cut-out.
you then just stack the three parts and give two of them a 50% Linear Transparency.

Each horizontal line starts outside the image and would have three points (left, middle right) all connected as Make Curve and Smooth Join.
This allows to to smoothly adjust the curve.

With a Line in position over one image , select Both and pick Combine Shapes > Slice.

If you Clone the three Lines, you can thereafter adjust the curves and width to suit for new designs.

Acorn

Thanks a lot, Acorn for the explanation. I will try my luck tomorrow with it.

Tom

[Egg Bramhill]

There's an alternative non-destructive way if you have a version of Xara that can export Shapes as SVG. (If not it's a great reason to purchase an upgrade!)



I've also attached the constructor xar file.

You can also go further and have the overlay as an animated svg:

DEMO

[Egg Bramhill]

Here's a further example of using vector shapes:

DEMO

[Boy]

You can also go further and have the overlay as an animated svg:

DEMO

That's a really interesting effect you created, Egg!

[RKissane]

If you are using this as a graphic then it is fairly easy to setup.

Make a white box that covers the bottom of the picture.
Covert the box to shapes.
Using the shape tool add two points along the top line on the for where you will want the top part of the curve and the bottom part. Make sure you have smooth join selected for the shape tool in order to have curves.
Move these two points up or down for the position you want.
Adjust the handles of the top lines points to give you the curve you want.
Copy the box 2 times and apply transparency and size as required to give you the same effect.
Group all four items.

Ray

[Initiostar]

All the approaches here worked well; liked Egg's animated SVG's. Ray's probably the simplest. Had a go with a video background using Acorn's solution: https://initiostar.co.uk/demo/grass/

[Acorn]

All the approaches here worked well; liked Egg's animated SVG's. Ray's probably the simplest. Had a go with a video background using Acorn's solution: https://initiostar.co.uk/demo/grass/

Gary, most kind to showcase your work here.

Acorn