CSS - Clip path svg not working on firefox - css

I'm trying to use clip path but this is not working on firefox.
I already search about this and i found this code in stack overflow.
I have several shapes implemented but this is just work in chrome and safari.
.shape
{
width: 300px;
height: 300px;
display: inline-block;
position: relative;
box-sizing: border-box;
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
background-color: $page-title-background-green;
}
img
{
position: absolute;
top: 2px;
left: 2px;
width: 296px;
height: 296px;
-webkit-clip-path: url(#clipper);
-moz-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<polygon points=".15 0, .7 0, 1 .5, .7 1, .15 1, 0 .7, .2 .5, 0 .3"/>
</clipPath>
</defs>
</svg>
<div class="shape">
<img src="http://lorempixel.com/g/600/400/">
</div>
How can i solve that?
Thank's


I have this code:
<body>
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<polygon points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"></polygon>
</clipPath>
</defs>
</svg>
<svg width="200" height="300">
<style type="text/css" media="screen">
image {
clip-path: url(#clipping);
}
</style>
<image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" />
</svg>
</body>
So, try to set the style inside your SVG element, or give a style attribute to image, like this:
<image style="clip-path: url(#clipping);" xlink:href="...">

Related

How to make inline SVG Mask Responsive?

So for the past few days I'm trying to use SVG for the first time.
I have being trying to make a responsive mask, with no success.
I know there is a lot of questions and answers about this, but none seems to work in my case.
Could someone give me a hint what am I missing?
html {
background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
}
.alpha {
fill: #bbb;
}
.base {
fill: white;
mask: url(#mask);
}
.svg-container {
width: 100%;
}
<div class="svg-container">
<svg viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="mask">
<rect class="alpha" x="0" y="0" width="100%" height="100%" class="logo" />
<g transform="translate(600, 20)">
<path
d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" />
<path
d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" />
<path
d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" />
<path
d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" />
</g>
</mask>
</defs>
<rect class="base" x="0" y="0" width="100%" height="100%" />
</svg>
</div>

Using it as a CSS mask is easier. Simply put the correct viewBox then you adjust the mask-size/mask-position like you do with background
html {
background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
background-size: cover;
}
html::before {
--svg:url('data:image/svg+xml;utf8,<svg viewBox="200 300 380 250" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="black"><path d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" /><path d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" /><path d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" /><path d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" /></svg>');
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.8);
-webkit-mask:
var(--svg) center/contain no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
var(--svg) center/contain no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
}
And if you want a fixed size:
html {
background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
background-size: cover;
}
html::before {
--svg:url('data:image/svg+xml;utf8,<svg viewBox="200 300 380 250" xmlns="http://www.w3.org/2000/svg" version="1.1" fill="black"><path d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" /><path d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" /><path d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" /><path d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" /></svg>');
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(255,255,255,0.8);
-webkit-mask:
var(--svg) center/200px 200px no-repeat,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
var(--svg) center/200px 200px no-repeat,
linear-gradient(#fff,#fff);
mask-composite:exclude;
}

Another way of doing it, as I found out, is to just encapsulating the path group in an svg tag, having it's own viewbox and preserveAspectRatio properties.
html {
background: url(https://i.picsum.photos/id/10/800/800.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
}
.alpha {
fill: #bbb;
}
.base {
fill: white;
mask: url(#mask);
}
.svg-container {
width: 100%;
}
<svg viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="mask">
<rect class="alpha" x="0" y="0" width="100%" height="100%" class="logo" />
<svg viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet" height="100%">
<g>
<path
d="M389.3281,361.9072a7.965,7.965,0,0,0-1.873-3.7373,9.99,9.99,0,0,0-4.12-2.74,20.6223,20.6223,0,0,0-7.1162-.9981A68.3914,68.3914,0,0,0,349.5,359.665a101.7,101.7,0,0,0-23.1,13.4541,130.8726,130.8726,0,0,0-19.3516,18.4375,225.7625,225.7625,0,0,0-15.4824,20.1817A204.9809,204.9809,0,0,0,279.58,432.17a49.0016,49.0016,0,0,0-5.4942,22.6739,35.7828,35.7828,0,0,0,1.125,8.72,23.2838,23.2838,0,0,0,3.7442,8.0986,20.967,20.967,0,0,0,6.8681,5.9785,21.2738,21.2738,0,0,0,10.4873,2.3672,25.179,25.179,0,0,0,7.9913-1.2461,55.8477,55.8477,0,0,0,7.2412-2.99,19.6477,19.6477,0,0,0,6.8672,3.8633,23.9691,23.9691,0,0,0,7.1171,1.1211,8.1121,8.1121,0,0,0,5.9922-2.2422,6.9043,6.9043,0,0,0,2.2481-4.9844q0-3.9873-1.7481-5.73-1.749-1.746-1.498-1.7441-2.001,0-1.9981,1.7441v-.249a3.6394,3.6394,0,0,0,.75,1.62,6.057,6.057,0,0,1,.1241,5.6055q-.6255,1.2437-3.37,1.2461a13.585,13.585,0,0,1-8.74-3.2383,210.2969,210.2969,0,0,0,20.2266-15.4492,164.3653,164.3653,0,0,0,17.7285-17.9385A151.53,151.53,0,0,0,370.35,417.9678a205.8819,205.8819,0,0,0,12.8613-26.4112q2.4932-5.9795,4.4942-12.457a45.4466,45.4466,0,0,0,1.998-13.4551A20.3111,20.3111,0,0,0,389.3281,361.9072Zm-22.4746,42.7305A271.85,271.85,0,0,1,349.5,430.9238a133.9406,133.9406,0,0,1-18.6035,20.0567q-10.1148,8.8417-20.1035,10.8388c-.334-.9961-.791-2.2031-1.3721-3.6123a14.5883,14.5883,0,0,0-2.4971-3.9863,15.6058,15.6058,0,0,0-3.9961-3.24,11.0871,11.0871,0,0,0-5.6181-1.3692,10.6558,10.6558,0,0,0-6.4932,2.49q-3.2461,2.49-3.2461,7.4755,0,4.235,2.1231,6.4776a15.3984,15.3984,0,0,0,4.8691,3.4883,17.1522,17.1522,0,0,0,5.6191,1.4961c1.9122.1621,3.2852.248,4.12.248a9.3432,9.3432,0,0,0,1.498-.123,8.8078,8.8078,0,0,1,1.499-.125c.1631.1621.2491.2871.2491.373,0,.082.082.2061.249.3731a38.3275,38.3275,0,0,1-12.7344,2.7421,12.7147,12.7147,0,0,1-10.6133-5.4824,19.8407,19.8407,0,0,1-4.12-12.209,55.83,55.83,0,0,1,4.62-21.5527,102.6148,102.6148,0,0,1,12.36-21.5508,150.4226,150.4226,0,0,1,38.58-36.1289,116.9428,116.9428,0,0,1,21.7256-11.0869,57.1271,57.1271,0,0,1,20.1016-4.1113q2.4932,0,2.9961.872a8.4641,8.4641,0,0,1,.5,3.6133,16.3609,16.3609,0,0,1-.375,3.1153q-.375,1.8662-.874,4.6093A139.3888,139.3888,0,0,1,366.8535,404.6377Zm-68.2949,56.6836q-2.2472-.7472-2.2481-1.9932c0-.666.5-.9961,1.4991-.9961l2.4961.9961a4.275,4.275,0,0,1,2.497,2.99A22.3469,22.3469,0,0,1,298.5586,461.3213Z" />
<path
d="M426.4082,397.5371a1.0225,1.0225,0,0,0-.749.249h-.249q-1.254,1.25-4.6192,4.4844-3.3735,3.2416-8.1172,7.8486-4.746,4.6143-9.9883,10.59-5.244,5.9794-9.4882,11.4609-2.751,3.7383-9.2393,6.3535-6.4965,2.6163-11.9863,4.6094c-.169.168-.293.249-.375.249-.085,0-.21.086-.374.2491a75.8391,75.8391,0,0,1,5.7421-9.4688q3.4951-4.9789,7.2422-9.9658,3.7456-4.9789,7.3672-9.4678,3.6153-4.4853,6.1172-7.9726v-.2491a5.3586,5.3586,0,0,0-1.9971-3.8623,4.9537,4.9537,0,0,0-3.9951-1.6191q-.75.747-4.62,4.7334a128.4673,128.4673,0,0,0-8.49,9.8428,133.5017,133.5017,0,0,0-10.2383,15.5722q-5.6176,9.7149-4.8692,13.4541a8.4447,8.4447,0,0,0,1.4991,3.7373,4.7,4.7,0,0,0,4.2441,2.4922,12.8621,12.8621,0,0,0,5.3682-1.4961q3.12-1.4941,5.9931-3.2392,2.8682-1.7388,7.1172-4.7334-1.0019,1.746-.999,5.98a5.8654,5.8654,0,0,0,.874,2.9912q.8716,1.4942,3.8711,1.4941a9.1582,9.1582,0,0,0,3.9951-1.1211,41.91,41.91,0,0,0,4.4952-2.6162q2.247-1.4957,4.3691-3.1152,2.1182-1.6158,3.6211-2.6153,5.7421-3.9828,9.6133-6.8525,3.8687-2.8623,3.8711-3.3633a1.57,1.57,0,0,0-.8731-1.6191c-.5859-.25-.793-.375-.625-.375q-1.002,0-7.2422,4.3613-6.2447,4.3608-18.2285,9.5928a78.89,78.89,0,0,1,8.1152-10.7139q4.8692-5.4785,10.1133-10.7139,5.2441-5.2323,10.1133-9.9658a112.9213,112.9213,0,0,0,8.3662-8.9707l.249-.249a.5057.5057,0,0,1,.125-.374.5056.5056,0,0,0,.125-.3731,5.0369,5.0369,0,0,0-1.748-3.4882h0a5.0584,5.0584,0,0,0-3.4961-1.7442Z" />
<path
d="M462.1152,388.8164c0-.1641-.3349-.5371-.998-1.1211-.668-.58-1.3731-1.16-2.1231-1.7441-.748-.58-1.4589-1.0782-2.122-1.4951a3.9885,3.9885,0,0,0-1.2491-.6231,9.8182,9.8182,0,0,0-1.998,2.2422q-1.497,1.998-3.2461,4.36a53.2918,53.2918,0,0,0-2.9961,4.4844,12.759,12.759,0,0,0-1.248,2.3672l2.247,1.7451a62.4434,62.4434,0,0,0,8.6153-4.1123q4.1205-2.3641,5.1181-5.8535Zm-16.73,46.5918a.2222.2222,0,0,0-.2491-.248l-.249-.25q-.5039,0-7.2422,3.4882-6.7412,3.4923-11.3613,5.6065-4.6245,2.12-6.3682,1.6191a55.4894,55.4894,0,0,1,5.1192-9.7177q3.3707-5.23,7.3662-10.5889,3.9917-5.3541,7.8662-10.2158,3.8687-4.8575,6.3672-8.3457l.249-.4991q0-1.2437-1.8721-3.3632-1.8735-2.1138-3.37-2.1172a1.021,1.021,0,0,0-.75.249h-.25q-.7485.747-4.4941,4.9824-3.7472,4.2393-8.1162,10.2149-4.3727,5.9823-8.6153,13.207a72.1365,72.1365,0,0,0-5.7431,11.4609q-1.4971,4.2393-.9981,5.7305a7.9191,7.9191,0,0,0,1.4981,3.3633q1.497,2.3715,4.9941,2.3672a15.1886,15.1886,0,0,0,7.8653-2.74q4.3651-2.7392,7.99-4.9834,3.6182-2.2427,7.1172-4.6093,3.4952-2.3658,3.7461-2.6163v-.25a.5214.5214,0,0,0-.125-.373c-.086-.082-.125-.2891-.125-.623a1,1,0,0,1-.25-.7481Z" />
<path
d="M486.5869,402.0215c-.3349,0-.874.3349-1.623.9971q-1.1236.9975-2.3721,2.2421-2.2485.5025-5.1191,1.37-2.8741.8759-6.1172,1.8691a19.8132,19.8132,0,0,1,2.8711-3.3643,6.6774,6.6774,0,0,0,2.123-4.8584,12.8608,12.8608,0,0,0-.625-2.8652c-.418-1.4082-1.623-2.1172-3.6211-2.1172a9.234,9.234,0,0,0-4.1191,1.4942,34.1332,34.1332,0,0,0-5.2442,3.7373,27.3651,27.3651,0,0,0-4.4951,4.8584,8.5256,8.5256,0,0,0-1.8721,4.8593q0,3.4923,2.4961,4.4844a120.6446,120.6446,0,0,1-9.1142,9.5928q-5.1227,4.8588-9.6143,8.97-4.4942,4.11-7.6152,6.8516a20.9624,20.9624,0,0,0-3.1221,2.99c0,.833.335,1.2461.999,1.2461q.5025,0,4.6192-2.6162,4.1207-2.6162,9.7383-6.8525,5.6192-4.2335,11.7363-9.5928a96.894,96.894,0,0,0,10.8633-11.0869,11.1019,11.1019,0,0,0,4.9941-1.6192q2.9972-1.6172,4.4942-2.3672-2.2457,1.9981-5.3672,4.8575a53.499,53.499,0,0,0-5.8692,6.3545,45.92,45.92,0,0,0-4.7441,7.3505,16.898,16.898,0,0,0-1.9981,7.8477,7.1625,7.1625,0,0,0,2.4971,4.9834,60.9346,60.9346,0,0,0-11.4873,13.8291,122.4369,122.4369,0,0,0-8.3652,15.9453q-3.3691,7.8486-5.2442,13.8281-1.872,5.98-1.872,7.2266l.499.498a2.6518,2.6518,0,0,0,1.498.2481l.5-.2481a22.2683,22.2683,0,0,1,1.8731-4.2363q1.872-3.7368,4.9941-9.2187,3.12-5.483,7.3672-11.835a144.6219,144.6219,0,0,1,9.1133-12.208,93.9163,93.9163,0,0,1,10.1133-10.4658,30.92,30.92,0,0,1,10.4883-6.3526h.249a1.0148,1.0148,0,0,1,.25-.748,1.0166,1.0166,0,0,0,.25-.7481,9.3658,9.3658,0,0,0-.999-4.2343q-1-1.9923-2.2471-1.9942h-.25a12.51,12.51,0,0,0-4.7442,1.6192,40.9555,40.9555,0,0,0-7.2421,4.8593c-.835-.331-1.2491-.748-1.2491-1.246a3.4374,3.4374,0,0,1,1.2491-2.2422,55.7756,55.7756,0,0,1,5.9931-6.9766q3.4952-3.4863,7.1172-6.7266,3.6166-3.2373,6.9922-6.3535a59.1172,59.1172,0,0,0,5.6172-5.8554q0-1.2452-1.7471-3.7383-2.75-2.2413-3.4961-2.2422Z" />
</g>
</svg>
</mask>
</defs>
<rect class="base" x="0" y="0" width="100%" height="100%" />
</svg>

SVG progress bar

I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly.
Here is the codepen
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
I am planning to make this icon independent such that I will only pass the percentage value dynamically.
I somehow able to get the animation done but unable to keep the border or outline of the svg. Here is the code.
#progressMove {
transition: .3s y;
}
#progressMove:hover {
y: 60%;
}
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<mask id="bubbleKenseo">
<path fill="red" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</mask>
</defs>
<g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" />
</g>
</svg>
So, the problems I have are:
Unable to maintain the border to the SVG
Whatever the color I add is having some kind of opacity which I am unable to remove.
Edit: Browser compatibility: IE11+, chrome, safari and firefox
PS: I don't want to use SMIL animations.

CHROME/SAFARI SOLUTION
Using the CSS property transform and counter-increment you can achieve the fill and number increment.
jsFiddle
CODE SNIPPET
for (var i = 0; i < 100; i++) {
setTimeout(function() {
$(".progress-container p").append("<span>");
}, i * 20);
}
pattern #progressMove {
transform: translateY(100%);
color: purple;
animation: progressBar 2s steps(100, end) forwards;
}
#keyframes progressBar {
to {
transform: translateY(0);
}
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
}
.progress-container figcaption {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
}
.progress-container p {
margin: 0;
font-weight: bold;
}
.progress-container span {
counter-increment: progress;
}
.progress-container p::after {
content: counter(progress)"%";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="progress-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<pattern id="progress" x="0" y="0" width="79.36" height="93.844" patternUnits="userSpaceOnUse">
<rect id="progressMove" x="0" y="0" width="100%" height="100%" stroke="none" fill="currentColor" />
</pattern>
<path fill="url(#progress)" stroke="#000" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
<figcaption>
<p>
</p>
</figcaption>
</figure>
Note:
Will update if I can give a better solution to cover browser support.
EDIT:
Based on Persijn answer, you will as well have to change the color of the background to that of its parent.
The whole component would be the figure element, sadly the symbol in the spritesheet will only be used to provide the path and background.
Note: jQuery removed in this version.
jsFiddle
for (var i = 0; i < 100; i++) {
setTimeout(function() {
var progressCounter = document.querySelector(".progress__counter"),
number = document.createElement("span");
progressCounter.appendChild(number);
}, i * 20);
}
#spritesheet {
display: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
}
.icon-bubble {
font-size: 7em;
color: white;
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
overflow: hidden;
line-height: 0;
}
.progress__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.progress__fill {
background-color: purple;
height: 100%;
transform: translateY(100%);
animation: progressFill 2s steps(100, end) forwards;
}
#keyframes progressFill {
to {
transform: translateY(0);
}
}
.progress__counter {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-40%, -50%);
margin: 0;
font-weight: bold;
}
.progress__counter span {
counter-increment: progress;
}
.progress__counter::after {
content: counter(progress)"%";
}
<figure class="progress-container">
<svg class="icon icon-bubble">
<use xlink:href="#icon-bubble"></use>
</svg>
<figcaption class="progress__inner">
<div class="progress__fill"></div>
<p class="progress__counter"></p>
</figcaption>
</figure>
<svg id="spritesheet">
<symbol id="icon-bubble" viewBox="0 0 79.36 93.844">
<title>Loading Bubble</title>
<path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10 50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</symbol>
</svg>
TESTS:
Chrome 53
IE10
Edge
FireFox 47
IOS 10 Safari
PLAYGROUND
jsFiddle
for (var i = 0; i < 100; i++) {
setTimeout(function() {
var progressCounter = document.querySelector(".progress__counter"),
number = document.createElement("span");
progressCounter.appendChild(number);
}, i * 20);
}
#spritesheet {
display: none;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
}
.icon-bubble {
font-size: 7em;
color: white;
}
.progress-container {
margin: 0;
display: inline-block;
position: relative;
counter-reset: progress;
overflow: hidden;
line-height: 0;
}
.progress__inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.progress__fill {
background-color: purple;
height: 100%;
transform: translateY(100%);
animation: progressFill 2s steps(100, end) forwards, progressFillColor 100ms linear 2s forwards;
position: relative;
}
#keyframes progressFill {
to {
transform: translateY(0);
}
}
#keyframes progressFillColor {
to {
background-color: green;
}
}
.progress__counter {
position: absolute;
top: 40%;
transform: translateY(-40%);
text-align: center;
width: 100%;
margin: 0;
font-weight: bold;
animation: progressCounter 100ms linear 1s forwards;
}
.progress__counter span {
counter-increment: progress;
}
.progress__counter::after {
content: counter(progress)"%";
animation: progressCounterCompleted 1s linear 2s forwards;
}
#keyframes progressCounter {
to {
color: white;
}
}
/* Chrome Only*/
#keyframes progressCounterCompleted {
33% {
content: "File(s)";
}
66% {
content: "Uploaded";
}
100% {
content: "Successfully!";
}
}
<figure class="progress-container">
<svg class="icon icon-bubble">
<use xlink:href="#icon-bubble"></use>
</svg>
<figcaption class="progress__inner">
<div class="progress__fill"></div>
<p class="progress__counter"></p>
</figcaption>
</figure>
<svg id="spritesheet">
<symbol id="icon-bubble" viewBox="0 0 79.36 93.844">
<title>Loading Bubble</title>
<path id="bubble-cover" fill="currentColor" stroke="#000" d="M-10,-10 100,-10 100,100 -10,100 -10,-10 50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</symbol>
</svg>

SVG with pattern and y transition:
svg:hover pattern #fillshape {
y: 0%;
}
pattern #fillshape {
transition: y 1s;
y: 100%;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<pattern id="pattern1"
x="0" y="0" width="79.36" height="93.844"
patternUnits="userSpaceOnUse" >
<rect id="fillshape" x="0" y="0" width="100%" height="200%" stroke="none" fill="purple" />
</pattern>
<path fill="url(#pattern1)" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
Now this does not work in Firefox or Edge. It does not recognize x and y as CSS properties...
Here is a solution that uses a div behind the svg shape.
The downside of this solution is that the svg shape gets a background eg. if you want the shape only you would have to match the background color of the shape with that of the background of the page.
svg {
position: relative;
}
.spesial {
width: 90px;
height: 0px;
display: inline-block;
background-color: purple;
margin-left: -100px;
transition: height 1s;
}
svg:hover + .spesial {
height: 100px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100" height="100" viewBox="0 0 75 90">
<path stroke="black" fill="gray" d="M-10,-10 100,-10 100,100 -10,100 -10,-10 50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</svg>
<div class="spesial">
</div>

First off, you want to use clip-path, or set the mask fill to white for 100% opacity: mask is used as a greyscale alpha channel and the red fill color causes the opacity change.
As for the stroke, you want to add it as a separate element that is not affected by the clipping. (You can probably re-use the path with defs and use, I just copy-pasted it here)
#progressMove {
transition: .3s y;
}
#progressMove:hover {
y: 60%;
}
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<clipPath id="bubbleKenseo">
<path d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
</clipPath>
</defs>
<path stroke="black" stroke-width="1" fill="transparent" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
<g x="0" y="0" width="79.36px" height="93.844px" clip-path="url(#bubbleKenseo)" height="100">
<rect id="progressMove" x="0" y="0%" width="100%" height="100%" fill="blue" stroke="black" />
</g>
</svg>

var prObject = document.getElementById("prObject"),
prDom = document.getElementById("progressMove"),
prValue = 0;
prObject.onmouseenter = function() {
prDom.setAttribute('class', 'prHover')
};
prObject.onmouseleave = function() {
prDom.removeAttribute('class')
};
/*prDom.setAttributeNS(null, 'y', '0');*/
var cTimer = setInterval(function() {
prValue += 20.6;
prDom.style.transform = "translateY(" + [100 - Math.min(prValue, 100)] + "%)";
if (prValue >= 100) {
clearInterval(cTimer);
}
}, 450);
#progressMove {
transition: transform 0.20s linear;
}
#progressMove.prHover {
transform: translateY(40%) !important;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg id="kenseoProgress" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844">
<defs>
<path id="mypath" fill="white" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4,15l33-18c0-0,0-0,1-0l0-0l-0-0c8-4,15-12,17-22C83,30,71,8,50,2z" />
<mask id="bubbleKenseo">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mypath"></use>
</mask>
</defs>
<g x="0" y="0" width="79.36px" height="93.844px" mask="url(#bubbleKenseo)" height="100" stroke-width="0">
<rect id="progressMove" x="0" y="0" width="100%" height="100%" fill="blue" stroke="black" style="transform: translateY(100%);" />
</g>
<g id="prObject" x="0" y="0" width="79.36px" height="93.844px" height="100" fill-opacity="0" stroke="black" stroke-width="0.5px">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mypath"></use>
</g>
</svg>
</body>
</html>

How to create reuleaux triangle shape using CSS3

I need a help to make reuleaux triangle shape using CSS3 like below the image. The shape has a white border around. How is it possible?

CSS is not the right tool for creating such shapes even though they can be created using it. They will require multiple real/pseudo-elements, transforms etc and even then maintenance of the curves, their radii etc are very tricky. It gets even more complex when you require borders around them or have to place images or gradients inside them.
The best and recommended tool for creating such shapes is SVG as they have the following pros:
SVGs are scalable by nature and so are very good for responsive designs
SVG shapes can take images or gradients as fills
Curve and radii control is very optimum
Below is a sample snippet for creating the reuleaux triangle shape using SVG. All it needs is a single path element with 3 Quadratic Curveto commands.
svg {
height: 200px;
width: 200px;
}
path {
fill: steelblue;
stroke: white;
stroke-width: 2;
}
path.image {
fill: url(#g-image);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox="0 0 105 105" preserveAspectRatio="none">
<path d="M2,15 q50,-25 100,0 q0,50 -50,85 q-50,-30 -50,-85z" />
</svg>
<svg viewBox="0 0 105 105" preserveAspectRatio="none">
<defs>
<pattern id="g-image" width="1" height="1" patternUnits="objectBoundingBox">
<image xlink:href="http://lorempixel.com/200/200/nature/4" width="200" height="200" />
</pattern>
</defs>
<path d="M2,15 q50,-25 100,0 q0,50 -50,85 q-50,-30 -50,-85z" class="image" />
</svg>
The same can be achieved by using CSS Clip-path with inline SVG for the path also but the support is non-existent in IE for this and hence it is not recommended.
div {
position: relative;
background: white;
height: 200px;
width: 200px;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
div:after {
position: absolute;
content: '';
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px;
left: 2px;
background: steelblue;
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
div.image:after{
background: url(http://lorempixel.com/200/200);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
/* Just for demo */
div{
display: inline-block;
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0.15 q0.5,-0.25 1,0 q0,0.5 -0.5,0.85 q-0.5,-0.3 -0.5,-0.85z" />
</clipPath>
</defs>
</svg>
<div></div>
<div class='image'></div>

SVG solution
svg {
border: 1px solid black;
}
<svg width="400px" viewBox="0 0 100 100">
<path stroke="black" d="m50 90,
q -40 -20, -40 -80,
q 40 -10, 80 0,
q 0 60, -40 80z" />
</svg>

This shape is possible with pure CSS in a single element with a little bit of creativity.
It is not exactly the shape as above as it has rounded corners but its still pretty darn close.
div {
width: 200px;
height: 200px;
background: blue;
border-radius: 75% 75% 80% 80% / 15% 15% 150% 150%;
}
<div></div>
Here is another possible way to do it
div {
width: 200px;
height: 200px;
background: blue;
border-radius: 10% 100% 100% 0 / 100% 100% 10% 0;
transform: rotate(-45deg);
margin-left: 50px;
}
<div></div>

Css tricks with div box and borders

I am trying to make a div that looks like this:
Is there a way to do this with css only?
I have been trying to play this idea in jsfiddle
.box {
background-color : red;
position : relative;
display : block;
height : 50px;
width : 200px;
text-align : center;
margin : 0 auto;
}
.box p {
padding : 0px;
}
.box::before {
content: '';
height: 50px;
width: 10px;
background-color: blue;
position: absolute;
top: 0;
left: 0px;
transform: skewX(-10deg);
transform-origin: top;
-webkit-transform: skewX(-10deg);
-webkit-transform-origin: 0 0;
}
.box::after {
content: '';
height: 50px;
width: 15px;
background-color: green;
position: absolute;
top: 0;
right: -15px;
left: auto;
transform: skewX(-15deg);
transform-origin: top;
-webkit-transform: skewX(-15deg);
-webkit-transform-origin: 0 0;
}
It looks like i can play with the left and right, but i do not know how to do it with the bottom.

I know of one way to do it, which is using svg. Here is an online svg editor
The code below generates similar shape to what you seek. Jsfiddle is here
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<line id="svg_2" y2="198" x2="509" y1="198" x1="59" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
<line stroke="#000000" id="svg_3" y2="197" x2="60.999999" y1="320" x1="26" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none" />
<line id="svg_4" y2="258" x2="497" y1="317" x1="28" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
<line id="svg_6" y2="258" x2="495" y1="195" x1="507" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
</g>
</svg>

image opacity from 0 to 1 with css

I want my images to look like following:
The bottom part of the image is transparent, and to the top its getting to opacity 1.
I can do this effect with a color, with linear gradient:
-webkit-linear-gradient(black, transparent);
But is it possible with images too?

The newest and coolest way I know is using HTML 5 mask.
It goes like this:
CSS:
.masked
{
mask: url(#m1);
}
HTML 5:
<svg width="0" height="0">
<defs>
<linearGradient id="gradient" x1="0" y1="0" x2 ="0" y2="100%">
<stop stop-color="white" offset="0"/>
<stop stop-color="black" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.1" width="1" height="0.9" fill="url(#gradient)" />
</mask>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="350">
<image xlink:href="http://upload.wikimedia.org/wikipedia/commons/4/4d/Iss007e10807_darker.jpg"
width="500" height="350" class="masked"></image>
</svg>
jsFiddle Demo
For further reading:
Applying SVG effects to HTML content (Live example)
CSS Masking
Create Vector Masks using the HTML5 Canvas

My attempts with CSS :)
Codepen example: http://cdpn.io/hzBav
CSS (Update with fadeout)
figure {
display: inline-block;
position: relative;
}
.overlay {
display: block;
height: 300px;
position: absolute;
width: 300px;
background-image: -moz-linear-gradient(
rgba(0, 0, 0, 0.8) 0%, rgba(255, 255, 255, 0) 85%
);
}
.overlay:after {
content: '';
display: block;
height: 300px;
width: 300px;
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%
);
}
HTML
<figure>
<div class='overlay'></div>
<img src='http://placekitten.com/300/300' />
</figure>
Update based on comments.

Resources