Is this possible with blend mode or clip path?

Question

I've attached an image.

It has one pink circle and a pink arrow.

When the pink arrow moves towards the circle, can the overlapping part be displayed in white?

(I'm making an animation where the overlap is colored white when the arrow moves towards the circle.)

No matter how many hours I've been thinking about it, I can't find a solution. Can I get some help?

a{position:relative; padding-right:80px; margin-right:60px; font-size:20px; font-weight:400;}
a::after{position:absolute; content:''; width:1px; height:14px; right:-30px; top:50%; margin-top:-7px; background:#7c7c7c;}
a:last-child{margin-right:0;}
a:last-child::after{display:none;}

a i{position:absolute; width:34px; height:34px; border-radius:34px; right:0; top:50%; margin-top:-17px; background:#ec3294;}
a i svg{position:absolute; right:30px; top:50%; margin-top:-5px; transition:all 0.2s ease; z-index:1;}
a:hover i svg{right:15px;}


  TEST
  
    
  


  TEST

A Haworth · Answer

You can use mix-blend-mode difference.

This snippet illustrates this using the deep pink color as #ff00ff (magenta) to make it easier to see what is going one.

The containing anchor element is given a background of #ffffff (white)

The svg and its line are given the complementary stroke color of #00ff00.

When the lines are above the #ffffff background the difference between the two colors is #ff00ff.

When the lines are above the #ff00ff background the difference between the two is #ffffff.

In this way the arrow turns white as it goes over the circle.

a {
  position: relative;
  padding-right: 80px;
  margin-right: 60px;
  font-size: 20px;
  font-weight: 400;
}

a::after {
  position: absolute;
  content: '';
  width: 1px;
  height: 14px;
  right: -30px;
  top: 50%;
  margin-top: -7px;
  background: #7c7c7c;
}

a:last-child {
  margin-right: 0;
}

a:last-child::after {
  display: none;
}

a i {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 34px;
  right: 0;
  top: 50%;
  margin-top: -17px;
  background: #ec3294;
  background: #ff00ff;
}

a i svg {
  position: absolute;
  right: 30px;
  top: 50%;
  margin-top: -5px;
  transition: all 0.2s ease;
  z-index: 1;
}

a:hover i svg {
  right: 15px;
}

svg,
svg g,
svg g path,
svg g path line {
  mix-blend-mode: difference;
}

a {
  background: white;
}


  TEST
  
    
  


  TEST

Is this possible with blend mode or clip path?

1 Answers