Wavy Bottom Image Border

[Boy]

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

[Acorn]

Thank you Egg.

The code for my wavy bottom is quite simple:

<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

[Acorn]

Another from me: anime.js - Rabbits to Giraffes.xar

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

Acorn

[Egg Bramhill]

Excellent, very mesmerising Acorn.

[handrawn]

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

[Egg Bramhill]

Here's another

[Acorn]

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: SVG as Mask.xar
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

[handrawn]

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...

[Acorn]

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

[handrawn]

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