Mix-blend-mode SVG

Design help Custom code
1

Hello,

I am trying to get mix-blend-mode: difference to work on my embedded SVG logo. I’ve read several articles and tried various way to get this to work with no luck. I’ve made the Body element background white, and the SVG white as well, and tried to apply the blend mode within the , to the .difference class on the Embed element, and aslo to a container that has the Embed element inside. I’ve added all the mix-blend-modes to the head tag in my project settings. Please let me know what I am missing thanks!

https://tims-portfolio-2021.webflow.io/old-home

Screen Shot 2021-01-27 at 10.55.31 AM
Screen Shot 2021-01-27 at 10.55.31 AM2800×1294 667 KB
Screen Shot 2021-01-27 at 11.08.21 AM
Screen Shot 2021-01-27 at 11.08.21 AM1380×834 141 KB

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Try put this on first line of you embed svg code

<filter id="f2" x="0" y="0" width="1" height="1">
          <feBlend mode="difference" in="BackgroundImage" in2="SourceGraphic" />
        </filter>