Streaming live at 10am (PST)

How to use clip path property

I’ve seen a few posts on this, but I can’t seem to figure this out. I am trying to use an SVG shape as a clipping mask for an image or a series of images. Could someone give me a few pointers or instructions on how to do this within Webflow? Or maybe there is another method? A read only or clonable webflow link would be helpful so I can see how the code is implemented. Appreciate the help! :v:t3:


Reference Links:

Hi

Try this- Trusted source :slight_smile:

Yea… I saw that post as well :thinking:

and this?

Here is one I did, Hope this helps.

https://preview.webflow.com/preview/clip-path-426cdf?utm_medium=preview_link&utm_source=dashboard&utm_content=clip-path-426cdf&preview=a228e0ec70354c8880f685d1170e8bc0&mode=preview

1 Like

@Eli11 This looks to be just an SVG overlayed onto an image? I don’t see any custom code where the SVG is being used as a clipping mask. Am I missing something?

@spoulos I think I came up with a solution for custom SVG shapes. Please have a look:
https://forum.webflow.com/t/responsive-svg-clipping-mask-on-image/155254

1 Like

Thanks @youngandhyperactive !!