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;}

<a href="">
  <span>TEST</span>
  <i>
    <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
     xml:space="preserve">
  <g>
    <path fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>

      <line fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
  </g>
    </svg>
  </i>
</a>
<a href="">
  <span>TEST</span>
  <i>
    <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
     xml:space="preserve">
  <g>
    <path fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>

      <line fill="none" stroke="#EC3294" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
  </g>
    </svg>
  </i>
</a>

Please show us what you have tried - see https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Sep 11 '22 at 17:10
I'm just starting out, so I didn't know how to ask a question. thank you ! — 유대경, Sep 12 '22 at 01:58
First of all, I checked to see if it could be solved with blend mode. But I couldn't make it white even after trying all the options. I searched a lot to see if it is possible to animate with svg clip paths, but I couldn't solve it. I wonder if this is a possible technique. If it's not possible, I don't do any more searching and try to replace it with a plain svg. — 유대경, Sep 12 '22 at 02:18

score 0 · Answer 1 · answered Sep 12 '22 at 07:46

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;
}

<a href="">
  <span>TEST</span>
  <i>
    <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
     xml:space="preserve">
  <g>
    <path fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>

      <line fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
  </g>
    </svg>
  </i>
</a>
<a href="">
  <span>TEST</span>
  <i>
    <svg version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="39.999px" height="9.337px" viewBox="0 0 39.999 9.337" enable-background="new 0 0 39.999 9.337"
     xml:space="preserve">
  <g>
    <path fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
      M28.228,0.598l11.026,7.458c0.27,0.271,0.205,0.684-0.509,0.684"/>

      <line fill="none" stroke="#00ff00" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="38.972" y1="8.723" x2="0.598" y2="8.723"/>
  </g>
    </svg>
  </i>
</a>

Is this possible with blend mode or clip path?

1 Answers1