CSS Custom text color based on background

Issue

Below is a screenshot of my current situation. Is it possible to make the text within the blob.svg white, and the text outside the blob.svg the color of the blob (#e60050)?

There is also a parallax effect on this particular element. The blob scrolls slower than the text. Therefore the text does not always overlap the blob in the same way/position. Based on the scrolling position, the text may even be completely within or without the blob.

I have been messing around with various implementations of mix-blend-mode now, but i can't seem to figure it out.

Current situation

<div id="sf-coming-up">
    <div class="title">Binnenkort in ons theater</div>
    <img class="blob" src="/assets/blob_vector_1.svg" />
</div>

.blob {
  position: absolute;
  top: 0;
  right: 20%;
  z-index: -1;
}

.title {
  padding-top: 50px;
  color: #FCFBFA;
  mix-blend-mode: difference;
}

Solution

You can try using inverted colors and re-inverting the whole thing with a CSS filter like so:

body {
  margin: 0;
}

#sf-coming-up {
  filter: invert(1);
  height: 100vh;
}

.blob {
  position: absolute;
  top: 15%;
  right: 15%;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 25% 75% 25% 50% / 75% 25% 50% 25%;
  background: springgreen;
}

.title {
  padding: 25vh 0 0 12.5vh;
  color: springgreen;
  mix-blend-mode: difference;
}

<div id="sf-coming-up">
  <div class="title">Binnenkort in ons theater</div>
  <div class="blob"></div>
</div>

see here : a caveat

Answered By - clickbait