Wavy Bottom Image Border

@Egg was very kind to demo an animated solution in this Thread - https://www.talkgraphics.com/showthr...610#post652610.

Here is a different construction using anime.js that shows how to make one of the waves: Attachment 133286
To achieve more that one you would using extra pairs of shapes with different Names and calling code.

The main trick is to create one shape, clone it and adjust the position of its nodes and change the curves, all without adding new nodes.
The morphing from one to the other is then smooth.

Experiment also with the morphing shape colour and transparency.

The shape outputs at all times need to be SVG so earlier XDA versions will fail.

Acorn

I think I need Dramamine.

Lucky I set it slow!

Acorn

Interesting ....

Quote:

---

Originally Posted by Egg Bramhill

Interesting ....

---

Lovely, I had expected a morph into a bowl of petunias though, a la Douglas Adams.

A quick hack of your showing: Attachment 133290

Acorn :salute:

Love it and here's my Douglas Adams:

Quote:

---

Originally Posted by Egg Bramhill

Love it and here's my Douglas Adams:

---

Egg, I like the whale eye/ringed planet. Neat.

Acorn

Quote:

---

Originally Posted by Egg Bramhill

Interesting ....

---

As we, backward XDP19-ers, can't share in the fun, could you please post a demo? ;)

Here's Acorns original:
https://parkeston.com/tg/anime2023/original.htm
Here are a couple of mine Boy:
https://parkeston.com/tg/anime2023/index.htm
https://parkeston.com/tg/anime2023/whale.htm

thanks egg... that first one of yours is not exactly rocket science :D

Thanks, Egg. Love your whale-to-rocket morphing animation!

Thank you Egg.

The code for my wavy bottom is quite simple:

Code:

---

<script>
var ming = document.querySelector('#morphing').style.height;
var mer = document.querySelector('#morpher ').style.height;
var txY = ming.replace('px', '') - mer.replace('px', '');


 anime({
    targets: '#morphing svg path',
    d: document.querySelector('#morpher svg path').getAttribute('d'),
    translateY: txY,
    duration: 5000,
    direction: 'alternate',
    autoplay: true,
    easing: 'linear',
    loop: true,
});
</script>

---

How it works:
The White shape Named morphing morphs into the shape Named morpher. Line colour and size matter.
The morphing shape has a Mix Blend Mode of screen to hide the image under it as it morphs.
The morpher shape need not be visible; here, I gave it No Colour. Line width is ignored.

Acorn

Another from me: Attachment 133302

https://shared.xara.com/DCM51yOf2N
with a few embellishments:
https://shared.xara.com/ypp1SNPDjq

Acorn :cool:

Excellent, very mesmerising Acorn.

they are indeed... thoug it is a pity that in xara only the outlines morph and not the texture as well

Here's another

Quote:

---

Originally Posted by handrawn

they are indeed... thoug it is a pity that in xara only the outlines morph and not the texture as well

---

handrawn, you can but making SVG file masking work with what I was showing is quite tricky.

Here is a simple example that probably works across all versions: Attachment 133311
I used an online SVG, as bundling with a XAR is awkward for most to unpack.
It will not work in early Xara Preview (using IE) so use a real browser.

Change the width of your browser to see the how the mask displays the graphic.

You can look at https://www.w3schools.com/css//css3_masking.asp for ideas.
Most current browsers still require the vendor prefix -webkit-.

Acorn

good to know - I cannot view the xar file as I do not have the pro+

if it needs to be masked then I can see that being tricky, yes...

Quote:

---

Originally Posted by handrawn

good to know - I cannot view the xar file as I do not have the pro+

---

handrawn, any Xara product will handle a XAR. I checked down to v12.

Acorn

sorry I was ina hurry and took your file as a live example requiring pro+ as previous

...