How to use clip path property

Design help Custom code
1

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:

59
591588×1120 467 KB

Reference Links:

2

Hi

Try this- Trusted source :slight_smile:

3

Yea… I saw that post as well :thinking:

4

and this?

5

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
6

@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?

7

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

1 Like
8

Thanks @youngandhyperactive !!