I can think of having a nested svg with the wanted shape under your element. By default, make it have opacity-0 and then make the opacity-100 when you’re hovering over that element.

SVG is 100% the approach here.

looks like svg mask

i would just have a pseudoelement (e.g. ::after) with a background image, then change opacity of that pseudoelement on hover

you can use any image for that and don't have to bother with anything, not even svg mask, not even svg at all