<div class="parent" id="svg">
  <div class="circle"></div>
  <svg viewBox="0 0 1000 350" xmlns="http://www.w3.org/2000/svg" >
     <defs>
       <style>
         text{
           font-size: 80px;
           font-family: sans-serif;
           font-weight: 900;
           text-transform: uppercase;
         }
       </style>
    </defs>
    <g>
       <path d="M50,0 200,0 120,300z" fill="red"/>
       <rect x="120" y="150" width="200" height="80" fill="green"/>
       <circle cx="200" cy="120" r="80" fill="blue"/>
     </g>

    <text x="280" y="100" fill="#ff0000">blend mode</text>       
  </svg>
</div>

.parent{
  position: relative;
  overflow: hidden;
}

.circle{
  width: 150px;
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: yellow;
  mix-blend-mode:   exclusion;
}

let item = document.querySelector(".circle");

let x = svg.getBoundingClientRect().x;
let y = svg.getBoundingClientRect().y;



svg.onmousemove = function (e){

  item.style.position = "absolute"
  item.style.left = e.x - 75 + "px";
  item.style.top = e.y - 75 + "px";
}