Question 258144 in CSS Question posted in
Some basic documentation can be found here.

Css – How to use mix-blend-mode to change text color on an animated background

i want to use mix-blend-mode to change the text color on a moving background svg.

My problem is, that i cant get the colors right.
I want red text on yellow background and yellow text on red background, but instead i get green text.
Image of the problem

I tried alot of things and got a pen where you can see the problem.

Here is my pen:
https://codepen.io/nicopoggenburg/pen/xxmjmNQ

    <div class="box">
      <div class="svgs">
        <div class="svg-container">
          <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
        </div><div class="svg-container">
          <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
        </div>
      </div>
      <h1 class="text">Do reinvent<br>the wheel</h1>

    </div>

    @keyframes moveWave {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    :root {
      --light: yellow;
      --dark: red;
    }
    .box {
      position: relative;
      overflow: hidden;
      background: var(--light);
      color: var(--light);
      padding: 20px 0;
    }
    .svgs {
      display: flex;
      width: 200%;
      animation: moveWave 5s linear infinite;
      height: 100%;
      display: flex;
      align-items: center;
    }
    .svg-container {
      width: 100%;
    }
    .svg {
      width: 100%;
      height: auto;
    }
    .svg-1 {
    }
    .svg-2 {
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 90px;
      text-transform: uppercase;
      margin: 0;
      mix-blend-mode: difference;
      font-weight: 800;
    }

Anyone got a good solution for this?

I am thankful for every hint!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Nevermind,

    this solution does not work as intended. I have extended my example on codepen. ( See initial post)

    Firefox: Only certain color combinations work ( See pen link)

    Mac Chrome: The colors are wrong at all

    Image: Mac Chrome

    Does anyone have an idea how to solve this puzzle?

    I tried svg masks (does not work with animation) aswell.

    Consulting ChatGPT didnt result in any working solutions.


  2. 0

    It is necessary to once again display the text with the second color (for example, using .text:after) and apply mix-blend-mode: difference;:

    @keyframes moveWave {
  to {
    transform: translateX(-50%);
  }
}

:root {
  --light: yellow;
  --dark: red;
}
.box {
  position: relative;
  overflow: hidden;
  background: var(--light);
  color: var(--light);
  padding: 20px 0;
}
.svgs {
  display: flex;
  width: 200%;
  animation: moveWave 5s linear infinite;
  display: flex;
  align-items: center;
}
.svg-container {
  width: 100%;
}
.svg {
  width: 100%;
}
.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 90px;
  text-transform: uppercase;
  margin: 0;
  mix-blend-mode: difference;
  font-weight: 800;
  width: fit-content;
  color: var(--dark);
}

.text:after {
  content: attr(data-text);
  mix-blend-mode: difference;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--light);
}
    <div class="box">
  <div class="svgs">
    <div class="svg-container">
      <svg class="svg svg-1" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
    <div class="svg-container">
      <svg class="svg svg-2" viewBox="0 0 1024 244" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1029 59.77c-258.25 0-258.25 124.62-516.5 124.62S254.25 59.77-4 59.77" stroke="red" stroke-width="118.634" stroke-miterlimit="10"/>
      </svg>
    </div>
  </div>
  <h1 class="text" data-text="Do reinvent the wheel">Do reinvent<br>the wheel</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search