SVG as a Mask and Not Clipping Path

Question

I'm trying to figure out a way to use an SVG path to hide portions of divs via CSS. The current method I know is using the SVG to clip the entire div. I'm wondering if there's a way to use a mask instead.

My desired result would be to clip only a portion of the div. For the example I was working on, would be the right side of the div.

I've linked my attempts, but at best I can only get clipping to work.

JSFiddle link.

   .st0{fill:#000;}
    
    div {
      height: 100px;
      background: red;
      margin-bottom: 20px;
    }
    
    .wide {
      width: 80%;
    }
    .short {
      width: 20%;
    }
    
    .mask {
      clip-path: url(#clip);
    }

   <div class="mask wide"></div>
    <div class="mask short"></div>
    <svg viewBox="0 0 119.5 290.5">
      <defs>
        <clippath id="clip">
          <path class="st0" d="M12.1,0l27.1,35.2L18.8,72.1l49.3,41.3L9.9,172.6c0,0,43.6,47.1,44.4,44.9c0.9-2.2,36,12.9,32,13.3
        s-63.6,12-63.6,12s6.2,17.8,7.6,17.8c1.3,0,55.1,0.9,53.8,0c-1.3-0.9-47.6,17.3-47.6,17.3l-21.3,12.6h104.2V0H12.1z"/>
        </clippath>
      </defs>
    </svg>


    

Answer 1

Browser support for CSS masks is patchy at present.

However, depending on your requirements, you may be able to use CSS blend modes instead – see the example below. I have yet to find detailed, precise, non-technical descriptions of each blend mode – the best I have found today is this. Some experimentation may be required.

body {
    margin: 5vh 5vw;
    font-family: sans-serif;
    background: #ddd;
}   
    
.background {
    background-image: url("https://images.unsplash.com/photo-1531786343146-f297424a3171?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    height: 90vh;
    position: relative;
}

.overlay {
    position: absolute;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    bottom: 5vh;
    background-color: transparent;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.overlay-text {
    font-size: 20pt;
    color: white;
    display: inline-block;
    position: relative;
}

.overlay-shape {
    fill: white;
}

.overlay:hover {
    background-color: #ffffffee;
    mix-blend-mode: lighten; /* the overlay is painted only in areas where it is lighter than its parent (the background) */
}

.overlay:hover .overlay-text {
    color: black;
}
    
.overlay:hover .overlay-shape {
    fill: black;
}

<section class="background">
  <div class="overlay">
    <h1 class="overlay-text">HOVER ME.</h1>
    <svg viewBox="0 0 1642 1920" xmlns="http://www.w3.org/2000/svg">
      <path class="overlay-shape" d="m8071 19178c-20-52-31-109-71-340-22-130-52-270-66-310-64-181-200-376-489-703-316-357-419-485-518-646-188-304-308-621-386-1014-69-348-73-782-11-1170 38-236 61-508 70-825 11-347 17-416 55-624 95-518 236-1077 390-1556 35-107 86-256 113-330 48-127 64-180 143-455 43-152 144-464 180-560 47-122 66-166 155-355 84-180 137-316 192-500 50-164 90-320 82-315-5 3-20 26-36 53-57 99-261 420-393 619-275 416-294 456-530 1118-16 44-79 224-141 400-100 287-224 625-300 820-15 39-39 99-53 135-103 265-311 724-439 969-295 565-575 943-883 1190-342 275-680 465-1095 614-158 57-278 92-571 166-481 121-711 237-930 471-62 66-114 118-116 116-2-1 30-120 71-262 116-403 173-647 212-906 34-231 29-755-12-1193-75-792 266-1701 914-2435 137-156 455-470 625-617 292-255 570-443 892-607 61-30 108-55 105-56-3 0-30 9-60 19-550 191-677 239-895 336-418 186-696 250-1085 249-293 0-459-28-761-128-74-24-188-58-254-76-252-66-318-90-665-238-289-122-420-176-514-208-99-34-359-88-695-144-162-28-296-52-298-54-8-8 104-44 202-65 154-33 221-84 580-445 272-274 440-436 550-530 167-142 583-395 960-582 377-186 570-254 920-324 88-17 237-49 330-71 168-38 174-39 520-54 525-23 1114-37 1255-30 69 4 168 16 220 26 52 11 127 27 165 35 209 43 587 152 790 229 228 86 282 111 725 338 135 69 310 154 390 190 146 65 340 141 345 135 4-3-81-75-210-177-84-66-297-210-377-253-79-44-267-129-362-164-97-37-356-114-380-114-14 0-212-66-331-110-111-41-359-167-498-253-76-47-242-160-370-250-268-189-323-225-582-372-347-196-532-331-710-516-130-135-210-243-342-464-337-566-707-1019-1100-1348-137-115-173-150-173-173 0-14 139 6 277 40 148 37 500 135 758 211 370 110 488 142 730 196 440 98 527 119 730 170 677 171 991 284 1252 454 97 63 157 113 343 285 69 64 179 162 245 220 159 138 438 418 502 504 108 146 152 240 301 641 87 235 258 795 343 1122 12 46 23 83 26 83 2 0 3-593 2-1317-3-1656 6-2409 36-3133 58-1347 59-1395 60-2195 0-831 0-839-51-1090-44-215-64-358-64-453 0-120 14-153 84-193 54-31 97-36 143-18 15 6 51 11 80 10 65-2 107 18 122 59 8 23 5 125-9 393-38 710-50 1019-60 1527-19 989-32 1309-85 2112-41 606-50 953-65 2398-6 553-15 1156-20 1340s-9 358-9 385v50l24-85c117-421 505-1058 909-1490 291-311 669-585 1091-790 180-87 358-155 705-268 431-140 614-217 805-338 200-126 328-165 886-268 135-26 293-59 350-75 301-85 594-219 990-452 64-38 119-69 123-69 36 0-126 285-407 714-106 161-193 311-294 505-194 370-240 452-349 616-185 281-327 428-562 581-81 53-243 169-360 258-278 210-469 347-595 426-214 135-476 255-689 316-54 15-96 29-94 31s48-7 102-21c170-42 351-51 1019-51 673 0 689 1 1039 65 577 105 757 158 1147 336 267 121 696 354 877 476 154 104 304 234 672 587 262 251 326 308 433 385 83 59 101 66 236 91 46 9 102 23 124 32 51 21 43 24-118 53-166 29-526 104-666 139-141 35-228 69-569 223-456 206-488 219-756 298-72 21-164 50-205 65-270 98-482 147-714 166-372 30-761-42-1180-218-71-30-179-73-240-95-60-22-145-52-187-68-43-15-78-26-78-24 0 1 48 36 108 76 265 180 538 430 723 663 53 66 149 197 214 290 136 196 235 329 350 470 204 251 326 431 410 610 102 217 166 463 185 718 21 279 39 385 89 540 94 293 141 532 151 772 5 105 17 261 29 347 17 136 26 174 72 295 69 185 154 377 246 553 80 154 141 250 254 395 64 83 117 171 107 180-2 2-62-30-133-72-328-191-679-380-800-432-98-41-259-89-630-186-465-122-519-140-845-283-74-32-153-65-175-72-284-91-559-238-790-420-123-97-350-332-449-465-136-185-215-317-362-610-132-262-222-432-289-545-18-30-89-149-157-265-307-516-444-777-548-1040-66-165-149-340-230-480-35-60-81-141-103-180-137-238-223-478-307-860-103-469-163-659-253-809-39-65-201-267-261-326-39-37-49-43-64-33-9 6-16 15-15 20 2 9 509 1275 568 1418 21 50 48 116 61 148 13 31 35 83 48 115 13 31 40 95 61 142 181 416 268 691 385 1220 72 324 109 456 235 835 163 490 232 823 266 1270 14 190 21 1674 8 1845-33 462-221 862-615 1311-56 64-239 253-405 420-527 529-566 593-668 1093-21 102-41 189-44 192-4 4-11-5-16-18zm-2212-9354c134-49 153-57 546-215 193-77 370-149 395-159 25-9 86-34 135-55 552-228 885-353 984-370 38-6 41-9 41-40 0-38-12-45-74-45-55 0-241 34-389 71-211 53-359 122-527 247-225 167-332 221-685 350-60 22-146 56-190 75-85 36-356 177-341 177 4 0 52-16 105-36zm3576-403c-29-27-323-243-400-294-215-141-397-197-646-197h-116l-7 32c-11 56 34 98 189 175 211 106 493 194 865 271 112 23 127 25 115 13zm-948-666c274-56 532-161 923-375 139-76 273-139 439-207 152-61 477-171 589-198 40-9 71-20 68-22-3-3-78 11-168 31s-257 56-373 81c-262 57-467 114-604 167-58 23-270 123-471 223-414 206-468 230-571 247-85 13-101 23-88 56 7 19 15 22 70 22 34 0 118-11 186-25z" transform="matrix(.1 0 0 -.1 0 1920)"/>
    </svg>
  </div>
</section>

Credits: code image