Mask custom Component

[SirReaDy]

It would be great to have a custom mask component where we can define our own SVG/image. The current mask class name/SVG style lacks the ability to add new paths or elements to the existing SVG like a backdrop filter effect to the content.

Or add a custom attribute to the mask such as filter="url(#filter)" where we can define our own mask filter.

[elrumordelaluz]

Hi @SirReaDy, thanks for open the Issue. Mind creating a minimal reproduction in a sandbox sharing your idea or use case?

In general you can control lot of stuff of the Mask. Keep in mind that you can pass through Tour styles all the keys of Mask styles. There you can control all this components using css.

Here is an example, using a custom clip-path which calculates the same way the mask do internally to highlight the DOM element, but creating an arrow like (the triangle on the left) that follows the highlighted area. You can see that we are also controlling other path stuff that could be controlled through css.

[hali241997]

Hi @elrumordelaluz I was also considering something like this. What I want is to add a backdrop filter to mask. I've tried everything, but it seems impossible. Can you show me how can I do this with a minimal reproducible example?