Frosted effect on logo

Custom code
1

Ok I have been banging my head against this for a few days, need to reach out…
Full disclosure, I am not a coder, but am enjoying the challenge…

I want to make my logo transluscent/frosted… not the background, just the logo… an irregular shape… so when I scroll the logo is translucent with crisp edges and the background images blurred…
I have this working well for the rectangle BG of my nav bar…
But as noted, there is some sort of bug with circles and irregular shapes…

Does anyone have a work around?

I have loaded the logo SVG via code widget and added iFrame wrapper…
I can then successfully target that widget with an data-id, this took me enough time to get working :wink:
But no matter what I do, background-filter, filter, etc… It just effects the background or blurs the edge of my logo… and mix-blend-mode does not have the right options to get a good result…

I have tried with plain text and transparent PNG file too… no dice…

Surely there is a way to pull this off?

Is there a way to target individual shapes in the SVG? I never had luck targeting the SVG direct, had to use iframe to get a data-id,..

Thanks for any tips!!!

2

hey.. yes it should be possible to select a svg path/element. But if you use an iframe there might be a restriction to do so, as an iframe is a seperate document and becasue of security issues you might not be allowed to alter the iframe html structure. So you would need to embed the svg not as iframe.

Right now I guess, that you are just targeting the iframe element (only the container) but within there is the svg element.

3

many thanks, i mistakenly thought that the iFrame was necessary to target the svg.. but does not seem to be the case now, still learning… so I will push ahead! thanks for the tip!