How do I use a pseduo class to "mix-blend-mode" an SVG's fill color?

PSU Change

I want to do something like this:

As you can see, wherever the circle is, the font changes color to black. As soon as the circle leaves, the text returns back to white.

However, instead of using text, I want to do it with SVG. When I hover over my container, I want the expanding pseudo class to make the arrow white only where it intersects (at the end of the animation, the entire arrow would be white since the black pseudo class expands the full container). I have tried the following (added to all my elements) but it does not work:

isolation: isolated;
mix-blend-mode: difference;

Here is my code, thanks in advance:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.formatting {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.svg-container,
svg,
.svg-container::before,
path {
    isolation: isolated;
    mix-blend-mode: difference;
}

.svg-container {
    border-radius: 50%;
    position: relative;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: pointer;
}

.svg-container::before {
    content: "";
    background-color: none;
    position: absolute;
    border-radius: 50%;
    width: 0%;
    z-index: -4;
    height: 0%;
    transition: all 0.5s ease-in-out;
}

.svg-container:hover::before {
    height: 100%;
    width: 100%;
    background-color: black;
    transition: all 0.5s ease-in-out;
}

.svg-actual {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

path {
    transition: all 0.5s ease-in-out;
}
.svg-container:hover path {
    /* fill: white; */
    transition: all 0.5s ease-in-out;
}

.text {
    position: absolute;
    font-size: 0.6rem;
}

    
    <div class="formatting">
        <div class="svg-container">
            <div class="svg-actual">
                <svg width="27" height="15" viewBox="0 0 280 184" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path id="arrow" d="M259.585 97.2345L180.703 176.117L187.96 183.375L279.22 92.115L187.955 0.850169L180.707 8.09801L259.577 86.9878L0.129355 86.9758V97.2345L259.585 97.2345Z" fill="#010002"/>
                </svg>
            </div>
        </div>
    </div>

Michael Mullany

The problem is not the pseudo elements.

You have two problems here. The first problem is that you're using transition: all - so the mix-blend-mode is being transitioned in, so you can't see it. You need to specify transition applying to just width/height.

The second problem is that you're trying to blend black with black - that doesn't work - it just gives you black. If I tweak your example to match your initial image example (black background, white foreground, black arrow) it works just fine.

Here is a tweaked and exaggerated version to show you everything working.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.formatting {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform: scale(300%);
    background: black;
}

.svg-container {
    border-radius: 50%;
    position: relative;
    border: 1px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    cursor: pointer;
}

.svg-container::before {
    content: "";
    background-color: none;
    position: absolute;
    border-radius: 50%;
    width: 0%;
    height: 0%;
    transition: height 5s ease-in-out, width 5s ease-in-out;
}

.svg-container:hover::before {
    height: 100%;
    width: 100%;
    background-color: white;
    transition: height 5s ease-in-out, width 5s ease-in-out;

}

.svg-actual {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    mix-blend-mode: difference;
}

path {
    transition: height 5s ease-in-out, width 5s ease-in-out;
}
.svg-container:hover path {
    /* fill: white; */
    transition: height 5s ease-in-out, width 5s ease-in-out;
}

.text {
    position: absolute;
    font-size: 0.6rem;
}

   <div class="formatting">
        <div class="svg-container">
            <div class="svg-actual">
                <svg width="27" height="15" viewBox="0 0 280 184" fill="none" xmlns="http://www.w3.org/2000/svg" id="#svg-element" color-interpolation="sRGB">
                    <path id="arrow" d="M259.585 97.2345L180.703 176.117L187.96 183.375L279.22 92.115L187.955 0.850169L180.707 8.09801L259.577 86.9878L0.129355 86.9758V97.2345L259.585 97.2345Z" stroke="white" stroke-width="20"/>
                </svg>
            </div>
        </div>
    </div>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2022-01-10

Comments

0 comments

TOP Ranking

Article

How do I use a pseduo class to "mix-blend-mode" an SVG's fill color?

How do I use a pseduo class to "mix-blend-mode" an SVG's fill color?

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Using Response.Redirect with Friendly URLS in ASP.NET

Can a 32-bit antivirus program protect you from 64-bit threats

Double spacing in rmarkdown pdf

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

3D Touch Peek Swipe Like Mail

Bootstrap 5 Static Modal Still Closes when I Click Outside

Assembly definition can't resolve namespaces from external packages

Vector input in shiny R and then use it

Emulator wrong screen resolution in Android Studio 1.3

Svchost high CPU from Microsoft.BingWeather app errors

Graphics Context misaligned on first paint

Python connect to firebird docker database

Is this docker-for-mac password dialog legit?

How to save models trained locally in Amazon SageMaker?