Figma / SVG Mask Path Change
My designer gave me this from Figma, and I'm really perplexed. The image of the person is contained within an SVG mask. The path of the mask changes on hover and also includes a transition. Every attempt I've made to do this ignores the transition. Any tips?
8 Replies
you will have an easier time re-implementing this in css and html
I should've been more clear. I'm trying to write this in HTML/CSS. Here's a codepen to demo. https://codepen.io/ray_skinner/pen/bGyLrOX
re-implement it with a clip-path
by the way, convert the path to a polygon
paths aren't responsive
i wonder how close you could get to this shape with the border-radius slash syntax? https://9elements.github.io/fancy-border-radius/
Fancy Border Radius Generator
Generator to build organic shapes with CSS3 border-radius
interesting 🤔
This method does work. It's not a perfect match. But it'll be close enough. Thank you.
Updated version now with this fancy border-radius and it's pretty good on a first pass. https://codepen.io/ray_skinner/pen/bGyLrOX
FYI there's a version of this generator that gives you direct control of the 2 points at each corner as well: https://9elements.github.io/fancy-border-radius/full-control.html
Border Radius Generator - Full Control
Generator to build organic shapes with CSS3 border-radius