Have different color on element based on background element

Question

i am trying to archieve this result:

where the red background is a tilting svg based on mousemovement so the coloring has to be able to adjust and not be static.

current and obviously not satisfying result:

Do you guys know of any way on how to archive this?

Any help is very much appreciated. Thanks!

Answer 1

So i looked deeper into mix-blend-mode and got it to work with the following code:

html

<!-- absolute helper is needed as position:absolute on underline elements themselves lead to underlines not breaking correctly -->
<span class="absolute-helper">
    <!-- is used for mix-blend-mode: difference -->
    <span class="underline underline--primary">Text</span>
</span>
<!-- on top of mix-blend-mode: difference there is another layer with underlin that has mix-blend-mode: screen (opposite of multiply) -->
<span class="absolute-helper">
    <span class="underline underline--secondary">Text</span>
</span>

styles

.absolute-helper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.underline {
  background-size: 1px 1em;
  display: inline;
  color: transparent; // hide font and just show the underlining

  &--primary {
    mix-blend-mode: difference; // shows the difference between the current and the underlying layer
    box-shadow: inset 0 -0.175em $white, inset 0 -0.2em #000; // the underline, color has to be white for this to work
  }

  &--secondary {
    mix-blend-mode: screen; // opposite of multiply
    box-shadow: inset 0 -0.175em #somecolor, inset 0 -0.2em #000; // the second underline layered on top
  }
}

result:

Maybe someone will find this useful.

Thanks for the help!