Streaming live at 10am (PST)

Applying blur effect on a div block clipped by a custom SVG

Hey everyone! I’m trying to figure out a way to clip a div block element with a custom SVG and apply the blur effect to the clipped path. I’ve found bits and pieces of scripts online but I just can’t bring it all together to achieve this. There are 2 scenarios that I need your help with:

Scenario 1:
I’m using Figma to get the SVG code (in this case the Shopify logo) but I’m not sure how to use its path to clip the containing div block that’s positioned on top of an image for the blur effect to be visible only on the logo like this image:

Scenario 2:
Here, I’m trying to apply the blur effect to a div block that’s positioned on top of an image but have an SVG cut-out/subtract from it:

I’d really appreciate it if you could provide the scripts/steps in webflow for both scenarios.

Thank you!