SVG masking SVG but how to animate the mask?


I’ve been trying to learn how to use SVG masks in Hype which I’ve successfully managed to do by importing my image as a svg element then using an separate svg circle as an assigned clip-path. Now that I’ve done that is there a way of animating the SVG mask? If I try to keyframe any of it’s properties it’s container moves but not the actual mask. Is there something I’m missing here? I have seen the advanced image masking FREE DL link but there looks like a heavy amount of code to what I’m hoping is something simple?

Thanks in advance…

check this template.
you can animate the Apple shape



I did check this template looks good but from my understanding it’s using a colour to match the background and isn’t using clip-path or mask to do the masking.

Unfortunately it’s no different to using a transparent png.

My issue is once I assign an SVG as a clip-path or mask if you try and move it the containing div around the mask stays in an absolute position.

the clipping is not properly supported in all browsers (or slows the page).
anyway,You can use a big mask in svg to cover the scene, but with flat/gradient color only

Doh as I feared. I have found clip-path doesn’t work if you’re masking an image element BUT if you mask an SVG element that has the tag within it that will work across all browsers :slight_smile: So SVG masking SVG (with image included) is fine. SVG masking anything else isn’t 100%.

Guess I’ll have to go the javascript route. Pity as if that worked would be perfect.

it is pity if the above quote is right answer.