How to change the color at the intersection of objects?

Question

css

I have two objects: a circle and a button.
When hovering over the button, it moves to a circle and should change color at the intersection.
I did it via mix-blend-mode, but you can't set your own color at the intersection using it.
How can this be implemented?

https://codepen.io/bogdandomashenko/pen/gOgLrjB

Answer 1

https://github.com/desandro/masonry
https://masonry.desandro.com/

Answer 2

Let me expand on my previous answer with an example:

The code

Разметка

<div class="wrapper">
  
  <div class="button">
    <div class="button__circle">
      <div class="button__circle-shadow"></div>
    </div>
    <div class="button__body">Button</div>
  </div>
  
</div>

Стили (scss)

$circle-size: 50px;
$transition: 0.3s;
$base-shift: translateX(-$circle-size * 0.25);
$hover-shift: translateX(-$circle-size * 0.75);
$circle-color: #F79854;
$button-color: linear-gradient(90deg, #427C33 0%, #6EBC5A 100%);
$blend-color: mix(#F79854, #427C33);

.wrapper {
  width: 500px;
  height: 500px;
  
  display: flex;
  align-content: center;
  justify-content: center;
}

.button {
  $block: &;
  height: $circle-size;
  display: flex;
  cursor: pointer;
  
  &__circle,
  &__circle-shadow {
    height: $circle-size;
    width: $circle-size;
    border-radius: 50%;
  }
  
  &__circle {
    position: relative;
    z-index: 2;
    background: $circle-color;
    overflow: hidden;
  }
  
  &__circle-shadow {
    position: absolute;
    left: 100%;
    background: $blend-color;

    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
  
  &__body {
    height: $circle-size;
    width: $circle-size * 6;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    
    background: $button-color;
    border-radius: $circle-size;
    
    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
}

JSFiddle
I think svg filters can also be solved. Depending on the desired look at the output, you can try different things. In my example, there will be problems with transparency, but this is also solvable

Answer 3

Simply styles - in any way. See what property is used in the layout source, then use it for mix-blend-mode
To achieve the desired effect, place another circle inside the circle and move it. Well, do not forget about the z-index, so that the circle has more than the long button.