How to make a text black but white above an svg image using css mix-blend-mode

Question

I have a text and svg image, I want to make the text with black color, but the parts above the svg image with white color. So the image will be a mask. Here is my try

.bg{
  position:absolute;
  top:0;
  z-index:-1;
}
.p{
  color:black;
  mix-blend-mode: difference;
}

<p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?
</p>

<svg class='bg' width="610px" height="650" viewBox="0 0 610 610" version="1.1" xmlns="http://www.w3.org/2000/svg"
     style="float: right;">
    <defs>
        <linearGradient x1="93.3400314%" y1="5.7888905%" x2="12.9002674%" y2="84.419059%" id="linearGradient-2">
            <stop stop-color="#1A2980" offset="0%"></stop>
            <stop stop-color="#26D0CE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-2" fill="none" fill-rule="evenodd">
        <g id="left-first" transform="translate(-1.000000, 0.000000)" fill="url(#linearGradient-2)">
            <path d="M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z"
                  id="Shape_2_copy" transform="rotate(133.788 300 300)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 300 300"
                              to="360 300 300" dur="35s" repeatCount="indefinite"></animateTransform>
        </g>
    </g>

</svg>

and this is what I'm interesting to get:

This is easy to do in pure SVG with a filter - here's something that's a cousin: https://codepen.io/mullany/pen/msCyH — Michael Mullany, Jan 21 '19 at 04:24

score 1 · Answer 1 · answered Jan 21 '19 at 09:21

In order to use mix-blend-mode: difference; I use the SVG element as background image. To get the code to use as background image I use the SVG encoder by Yoksel.

However the text over the image won't be white.

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

The color of the text depends on the color of the background image. I hope this helps.

.wrap{width:100vw; height:800px;background: url("data:image/svg+xml,%3Csvg class='bg' width='610px' height='650' viewBox='0 0 610 610' version='1.1' xmlns='http://www.w3.org/2000/svg' style='float: right;'%3E%3Cdefs%3E%3ClinearGradient x1='93.3400314%25' y1='5.7888905%25' x2='12.9002674%25' y2='84.419059%25' id='linearGradient-2'%3E%3Cstop stop-color='%231A2980' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%2326D0CE' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='Page-2' fill='none' fill-rule='evenodd'%3E%3Cg id='left-first' transform='translate(-1.000000, 0.000000)' fill='url(%23linearGradient-2)'%3E%3Cpath d='M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z' id='Shape_2_copy' transform='rotate(133.788 300 300)'%3E%3C/path%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' from='0 300 300' to='360 300 300' dur='35s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),white;

background-position:center top; 
background-repeat:no-repeat;}

p{font-size:3em;
  color: white;
  mix-blend-mode: difference;
}

<div class="wrap">
  <p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?</p>
</div>

score 0 · Answer 2 · answered Jan 21 '19 at 04:15

I think you want the color-burn of mix-blend-mode...

.bg {
    position: absolute;
    top: 0;
    z-index: -1;
    right: 0;
    left: 0;
    margin: auto;
    background-color: white;
}.p {
    margin: 0 auto;
    padding: 10px;
    width: 50%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: color-burn;
}

<p class='p'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum adipisci dolorem nostrum maxime incidunt quod quibusdam sint porro harum culpa voluptatum in libero eligendi quas, quisquam rerum eum ea! Expedita repellat quidem exercitationem excepturi voluptate consectetur aspernatur in temporibus eaque explicabo sunt id est suscipit, numquam ut nesciunt quaerat veniam placeat debitis ipsa provident itaque. Earum quas odio sequi odit atque ea explicabo. Itaque dignissimos cumque natus magni, ex, labore nihil, aperiam perferendis similique tempore, omnis impedit. Est qui eius ipsam assumenda nesciunt nam optio quam, ipsa eaque ut cum, dolore quas ea quisquam consectetur non quia aliquid explicabo! Aspernatur?
</p>

<svg class='bg' width="610px" height="650" viewBox="0 0 610 610" version="1.1" xmlns="http://www.w3.org/2000/svg"
     style="float: right;">
    <defs>
        <linearGradient x1="93.3400314%" y1="5.7888905%" x2="12.9002674%" y2="84.419059%" id="linearGradient-2">
            <stop stop-color="#1A2980" offset="0%"></stop>
            <stop stop-color="#26D0CE" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-2" fill="none" fill-rule="evenodd">
        <g id="left-first" transform="translate(-1.000000, 0.000000)" fill="url(#linearGradient-2)">
            <path d="M369.229,1.87 C331.97,-6.66 292.354,16.4 254.072,22.87 C217.142,29.11 172.133,19.8 138.434,40.94 C104.735,62.08 93.543,106.67 71.866,137.21 C49.391,168.87 11.396,194.51 2.866,231.77 C-5.664,269.03 17.402,308.65 23.866,346.93 C30.105,383.86 20.795,428.87 41.942,462.57 C63.089,496.27 107.67,507.46 138.209,529.14 C169.868,551.61 195.509,589.61 232.77,598.14 C270.031,606.67 309.645,583.6 347.929,577.14 C384.857,570.9 429.866,580.21 463.566,559.06 C497.266,537.91 508.456,493.34 530.136,462.79 C552.606,431.13 590.606,405.49 599.126,368.23 C607.646,330.97 584.596,291.35 578.126,253.07 C571.886,216.14 581.196,171.13 560.056,137.43 C538.916,103.73 494.326,92.54 463.786,70.86 C432.13,48.39 406.488,10.39 369.229,1.87 Z"
                  id="Shape_2_copy" transform="rotate(133.788 300 300)"></path>
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 300 300"
                              to="360 300 300" dur="35s" repeatCount="indefinite"></animateTransform>
        </g>
    </g>

</svg>

How to make a text black but white above an svg image using css mix-blend-mode

2 Answers2