How to apply inverse text mask with CSS

Question

I\'ll try to explain my question with images. Here we go.

1 - This image shows the text masking an image, so far so good, I can do with the following code:

<

Answer 1

* { margin: 0; padding: 0 }

header {
    overflow: hidden;
    height: 100vh;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/17_04_art_bw_butterfly_bg.jpg) 50%/ cover
}

h2 {
    color: white;
    mix-blend-mode: difference;
    font: 900 35vmin/35vh cookie, cursive;
    text-align: center
}

    
And stay alive...