SVG - Filter and CSS crossbrowser issues - css

Only the firefox shows my SVG correct.
Can anybody tell me what i did wrong?
Fiddle here
http://jsfiddle.net/kLg5sd08/
SVG
<svg style="max-height: 100%;" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24.706 29.511" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svgClean">
<defs>
<radialGradient gradientUnits="userSpaceOnUse" r="75%" cy="50%" cx="50%" id="rgrad">
<stop style="stop-color:#a9e4f7; stop-opacity:1" offset="1%"/>
<stop style="stop-color:#00a9dd; stop-opacity:1" offset="50%"/>
</radialGradient>
<filter height="250px" width="250px" y="-50%" x="-50%" primitiveUnits="objectBoundingBox" id="drop-shadow">
<feGaussianBlur stdDeviation="0.01" in="SourceAlpha"/>
<feOffset result="offsetblur" dy="0.02" dx="0.01"/>
<feFlood flood-color="black"/>
<feComposite operator="in" in2="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<style type="text/css">
#svgClean {
padding:0.5% 0.5% 0.5% 0.5%;
width:250px;
height:250px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border: 3px solid #000000;
-webkit-border-top-left-radius: 15%;
-webkit-border-top-right-radius: 15%;
-webkit-border-bottom-right-radius: 15%;
-webkit-border-bottom-left-radius: 15%;
-moz-border-radius-topleft: 15%;
-moz-border-radius-topright: 15%;
-moz-border-radius-bottomright: 15%;
-moz-border-radius-bottomleft: 15%;
border-top-left-radius: 15%;
border-top-right-radius: 15%;
border-bottom-right-radius: 15%;
border-bottom-left-radius: 15%;
background: radial-gradient(center center , circle cover , #7d7e7d 1% , #000000 100% );
background: -o-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -ms-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -moz-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% );
background: -webkit-radial-gradient(center center, circle cover , #7d7e7d 1% , #000000 100% ); -webkit-box-shadow: 0rem 0rem 1rem #000000;
-moz-box-shadow: 0rem 0rem 1rem #000000 ;
box-shadow: 0rem 0rem 1rem #000000 ; -webkit-box-shadow: 0rem 0rem 1rem #000000;
-moz-box-shadow: 0rem 0rem 1rem #000000 ;
box-shadow: 0rem 0rem 1rem #000000 ; }
g {
fill:url(#rgrad);
filter:url(#drop-shadow);
stroke: #000;
stroke-width: 0.1%;
}
</style>
</defs>
<g id="viewport"> <path d="M15.906,4.482c-0.119,0-0.236,0.01-0.352,0.024c0.136,0.153,0.22,0.344,0.22,0.554c0,0.499-0.458,0.904-1.022,0.904 c-0.398,0-0.739-0.204-0.909-0.499c-0.255,0.344-0.405,0.755-0.405,1.196c0,1.205,1.105,2.181,2.467,2.181 c1.363,0,2.468-0.976,2.468-2.181S17.269,4.482,15.906,4.482z"/><path d="M7.522,8.854c1.37,0,2.48-0.98,2.48-2.192c0-1.21-1.11-2.191-2.48-2.191c-0.261,0-0.512,0.036-0.748,0.102 C6.878,4.713,6.939,4.88,6.939,5.06c0,0.499-0.458,0.904-1.022,0.904c-0.249,0-0.473-0.082-0.651-0.212 c-0.143,0.277-0.226,0.584-0.226,0.91C5.041,7.873,6.152,8.854,7.522,8.854z"/><path d="M20.144,10.541c0,0-0.092,0.072-0.247,0.208c0.479-0.862,0.747-1.856,0.747-2.973c0-1.707-0.333-2.921-1.389-4.204 c0.938-0.994,0.486-3.104,0.486-3.104s-0.344-0.456-0.71-0.456c-0.2,0-0.405,0.135-0.565,0.55c0.006,0.42-0.484,0.929-1.105,0.929 c-0.229,0-0.477-0.068-0.724-0.238c-1.374-0.79-3.013-1.25-4.774-1.253c-1.761,0.003-3.401,0.463-4.775,1.253 C6.84,1.422,6.593,1.491,6.364,1.491c-0.622,0-1.111-0.508-1.106-0.929c-0.161-0.415-0.366-0.55-0.564-0.55 c-0.366,0-0.71,0.456-0.71,0.456s-0.453,2.11,0.485,3.104C3.413,4.855,3.08,6.069,3.08,7.776c0,1.213,0.315,2.285,0.876,3.197 c-0.042,0.064-0.086,0.128-0.126,0.194c-1.283,0.38-4.937,1.966-3.5,7.512c1.73,6.682,6.598,9.476,6.598,9.476 s0.182-0.271,0.436-0.774c0.18,1.199,1.395,2.129,2.867,2.129c1.054,0,1.976-0.479,2.481-1.19c0.531,0.53,1.324,0.868,2.21,0.868 c1.595,0,2.893-1.092,2.893-2.434c0-0.023-0.003-0.044-0.004-0.067c0.365,0.677,0.641,1.044,0.641,1.044s4.701-3.008,6.049-9.756 C25.848,11.227,20.144,10.541,20.144,10.541z M19.587,6.662c0,1.793-1.65,3.252-3.681,3.252c-2.029,0-3.68-1.458-3.68-3.252 c0-1.793,1.651-3.252,3.68-3.252C17.937,3.41,19.587,4.869,19.587,6.662z M12.749,9.101l-0.87,1.004l-1.048-1.004 c0,0,0.166-0.9,1.01-0.853C12.684,8.298,12.749,9.101,12.749,9.101z M4.631,1.05c0.09,0.214,0.236,0.416,0.431,0.59 c0.357,0.318,0.819,0.494,1.303,0.494c0.397,0,0.792-0.122,1.142-0.354c1.298-0.741,2.803-1.134,4.356-1.137 c1.553,0.003,3.058,0.396,4.355,1.137c0.35,0.232,0.745,0.354,1.143,0.354c0.483,0,0.946-0.176,1.303-0.494 c0.194-0.175,0.341-0.376,0.431-0.59c0.064,0.643,0.053,1.631-0.398,2.109L18.412,3.46c-0.712-0.436-1.574-0.694-2.505-0.694 c-1.879,0-3.483,1.046-4.116,2.513c-0.633-1.467-2.237-2.513-4.117-2.513c-0.891,0-1.718,0.236-2.413,0.639L5.029,3.159 C4.578,2.682,4.566,1.693,4.631,1.05z M7.673,3.41c2.029,0,3.681,1.459,3.681,3.252c0,1.793-1.651,3.252-3.681,3.252 c-2.029,0-3.68-1.458-3.68-3.252C3.993,4.869,5.645,3.41,7.673,3.41z M7.673,10.558c1.209,0,2.305-0.433,3.103-1.131l0.089,0.085 l0.998,1.334l1.003-1.373c0.792,0.67,1.862,1.084,3.041,1.084c1.758,0,3.275-0.917,3.982-2.235c-0.321,3.586-3.795,5.61-8.026,5.62 c-4.112-0.009-7.509-1.92-7.993-5.32C4.636,9.779,6.052,10.558,7.673,10.558z M10.229,28.545c-0.992,0-1.799-0.659-1.799-1.468 c0-0.811,0.808-1.469,1.799-1.469c0.992,0,1.8,0.658,1.8,1.469C12.029,27.886,11.222,28.545,10.229,28.545z M14.921,28.223 c-0.992,0-1.799-0.659-1.799-1.468c0-0.811,0.807-1.47,1.799-1.47s1.799,0.659,1.799,1.47 C16.721,27.564,15.914,28.223,14.921,28.223z M14.921,24.319c-1.055,0-1.976,0.479-2.481,1.19c-0.531-0.53-1.325-0.868-2.211-0.868 c-0.797,0-1.521,0.273-2.043,0.714c0.489-1.524,0.893-3.599,0.7-6.052c-0.202-2.562-1.287-4.567-2.354-5.96 c1.479,0.807,3.325,1.24,5.331,1.244c2.45-0.004,4.665-0.648,6.258-1.836c-1.027,1.443-2.071,3.557-2.13,6.227 c-0.055,2.552,0.507,4.666,1.108,6.179C16.568,24.645,15.79,24.319,14.921,24.319z"/> </g> </svg>


You're not allowed to mix and match units within an SVG. You specify your units with a viewBox - thereafter you can only use those viewBox units or % of bounding box. You can't decide to specify filter dimensions in pixels mixed with percentages: that's not allowed. I'm surprised anything at all is rendering. This version of your filter works in Chrome, Firefox & IE (I run Windows):
<filter height="100%" width="100%" y="0%" x="0%" primitiveUnits="objectBoundingBox" id="drop-shadow">
<feGaussianBlur stdDeviation="0.01" in="SourceAlpha"/>
<feOffset result="offsetblur" dy="0.02" dx="0.01"/>
<feFlood flood-color="black"/>
<feComposite operator="in" in2="offsetblur"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
Similarly, you're specifying userSpaceOnUse (ie viewbox Units) for your radial gradient, but then specifying all the dimensions as %'s - which are objectBoundingBox units.

Related

How can I obtain any custom shape using clip-path css propery?

I am trying to obtain the shape using clip-path polygon property and it's not working as expected the shape I want to make is given below
I tried the following code but it is giving the corners not round shape
`
#header {
width: 100%;
height: 95vh;
background: linear-gradient(110deg, #2186eb, #37dce2);
clip-path: polygon(100% 0, 100% 51%, 65% 88%, 57% 96%, 50% 100%, 43% 96%, 24% 87%, 0 51%, 0 0);
}
`

You won't be able to have a curvature with polygon. You can consider a mask with radial-gradient for the curvature in addition to the clip-path:
.box {
height: 95vh;
background: linear-gradient(110deg, #2186eb, #37dce2);
clip-path: polygon(0 0,0 30%, 50% 100%, 100% 30%,100% 0);
-webkit-mask:
linear-gradient(#fff,#fff) top/100% 70% no-repeat,
radial-gradient(44% 100% at top,#fff 86%,transparent 86.5%);
}
body {
margin:0;
background:pink;
}
<div class="box">
</div>
Anther idea using border-radius and transformation:
.box {
height: 95vh;
position:relative;
overflow:hidden;
}
.box::before {
content:"";
position:absolute;
width:100vmax;
height:100vmax;
top:50%;
left:50%;
transform:translate(-50%,-100%) rotate(45deg);
border-bottom-right-radius:100px;
background: linear-gradient(75deg, #2186eb, #37dce2);
}
body {
margin:0;
background:pink;
}
<div class="box">
</div>

SVG solution
For the solution used SVG clipPath was used which is well: supported by browsers
body {
margin:0;
padding:0;
background-image:url(https://i.stack.imgur.com/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs>
<clipPath id="cp">
<path d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z"/>
</clipPath>
</defs>
<image clip-path="url(#cp)" xlink:href="https://i.stack.imgur.com/iCkE2.png" width="100%" height="100%" />
</svg>
Animation option
The cropped image slides out after clicking, and when clicked again, it goes back
var clip = document.getElementById("svg1"),
forward = document.getElementById("forward"),
back = document.getElementById("back")
let flag = true;
clip.addEventListener('click', function() {
if (flag == true) {
forward.beginElement();
flag = false;
} else {
back.beginElement();
flag = true;
}
});
body {
margin:0;
padding:0;
background-image:url(https://i.stack.imgur.com/Nlhed.jpg);
background-repeat: no-repeat;
background-size:cover;
}
.container {
width:100vw;
height:100vh;
}
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 758 474" preserveAspectRatio="xMinYMin meet" style="border:0px solid red;" >
<defs>
<clipPath id="cp">
<path transform="translate(0,-380)" d="m0 0 760.2-1v227c0 0-208.4 132.8-319.3 196.8-11.6 6.7-24.9 10.6-38.2 13.1-10.9 2-22.1 1.9-33.1 1-10.9-0.8-23-3-32.1-6C320.5 425.2-1 223.9-1 223.9Z">
<animateTransform id="forward" attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0 -380;0,0" fill="freeze" />
<animateTransform id="back" attributeName="transform" type="translate" begin="indefinite" dur="3s" values="0,0;0,-380" fill="freeze" />
</path>
</clipPath>
</defs>
<image clip-path="url(#cp)" xlink:href="https://i.stack.imgur.com/iCkE2.png" width="100%" height="100%" />
</svg>

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>

Border gradient from once color to another uing css [duplicate]

I have a problem with CSS3. I don't know how to make a diagonal round gradient border like that:
I found something like this:
.box {
width: 250px;
height: 250px;
margin: auto;
background: #eee;
border: 20px solid transparent;
-moz-border-image: -moz-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top left, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom right, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
<div class="box"></div>
But unfortunately this works only with squares.
Any help would be appreciated.

Conical gradient is a gradient which goes along the circular arc around a center. This is what we see in color wheels. As Paulie_D had noted, these are currently not possible with CSS but Lea Verou has developed a polyfill for it.
Having said that, what you are looking for doesn't seem to be a conical gradient, it is normal angled linear gradient but applied only to the borders.
This cannot be achieved through CSS border-image property because of how it is intended to work as per specs.
A box's backgrounds, but not its border-image, are clipped to the appropriate curve
If the center portion of the circle is a solid color then the approach mentioned in Vitorino's answer can be used. If it is not a solid color (that is, the page background is a gradient or an image which needs to show through) then it would not help. The following approaches can be used for that case.
Using Mask Image:
This approach uses a circular mask image to mask the inner portion of the circle. This makes it look as though only the border has the gradient applied to it. The drawback is that this feature is currently supported only in Webkit powered browsers.
.border-gradient-mask {
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
-webkit-mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-mask"></div>
Using SVG Shape or Mask:
The other approach is to use SVG circle element to create the circle and then assign the gradient to the stroke property. The gradient also has a gradientTransform applied to it because that is the only way to produce angled linear gradients with SVG.
.border-gradient-svg {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.border-gradient-svg svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.border-gradient-svg circle {
fill: transparent;
stroke: url(#grad);
stroke-width: 8;
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-svg">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
<stop offset="0%" stop-color="#7B73A4" />
<stop offset="100%" stop-color="#150E5E" />
</linearGradient>
</defs>
<circle r="46" cx="50" cy="50" />
</svg>
</div>
The same can be achieved by using SVG mask also. All that is needed is to create a mask with two circle elements, fill the larger circle with white, smaller circle with black and then apply the mask to our original circle element. The area occupied by smaller circle (with black fill) will be transparent.
.border-gradient-svg {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
}
.border-gradient-svg svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
.border-gradient-svg .grad-border {
fill: url(#grad);
mask: url(#masker);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<div class="border-gradient-svg">
<svg viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
<stop offset="0%" stop-color="#7B73A4" />
<stop offset="100%" stop-color="#150E5E" />
</linearGradient>
<mask id="masker" x="0" y="0" width="100" height="100">
<circle r="50" cx="50" cy="50" fill="#fff" />
<circle r="42" cx="50" cy="50" fill="#000" />
</mask>
</defs>
<circle r="50" cx="50" cy="50" class="grad-border"/>
</svg>
</div>
Using Clip Path:
Another approach to creating this would be to use a clip-path (with inline SVG) with clip-rule set to evenodd. Advantage of clip path solution over the others is that this will trigger hover effects only while hovering on filled area (and not the transparent area). The drawback is that IE doesn't support clip paths (even with SVG).
.border-gradient-clip {
height: 200px;
width: 200px;
border-radius: 50%;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
body {
background: radial-gradient(circle at center, sandybrown, chocolate);
}
<svg width="0" height="0">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0,0.5 a0.5,0.5 0 1,0 1,0 a0.5,0.5 0 1,0 -1,0z M0.08,0.5 a0.42,0.42 0 1,0 0.84,0 a0.42,0.42 0 1,0 -0.84,0z" clip-rule="evenodd" />
</clipPath>
</defs>
</svg>
<div class="border-gradient-clip"></div>

You can try something like this i have used a pseudo element with -ve z-index
Note: the background is not transparent as i have used a background-color for inner element
.box {
width: 250px;
height: 250px;
position: relative;
margin: auto;
margin: 30px;
border-radius: 50%;
background: #fff;
}
.box:after {
content: '';
position: absolute;
top: -15px;
bottom: -15px;
right: -15px;
left: -15px;
background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
z-index: -1;
border-radius: inherit;
}
<div class="box"></div>

CSS shadow on SVG shape only, not entire document

Is it possible to get CSS shadow on the SVG shape only, not entire document? Ie. around the blue arrow at:
a:after {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, .50);
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
content:"";
position: absolute;
background-image: url(http://www.domblogger.net/buttons/play.svg);
background-repeat: no-repeat;
background-position: 0;
height: 350px;
width: 350px;
}
Play

Yes it is possible but you will have to apply a filter on the original svg element(use), not through CSS.
Change the file at http://www.domblogger.net/buttons/play.svg to:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" version="1.1">
<defs>
<polygon id="play" fill="rgb(0,0,200)" fill-opacity="0.6" points="0,0 0,350 300,175" />
<filter id="d" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" />
<feOffset dx="5" dy="5" result="offsetblur" />
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<g>
<use filter="url(#d)" x="55" y="25" xlink:href="#play" />
</g>
</svg>

If you mean that you want the dropshadow only on the arrow shape, then don't set the background color to white (first line of your a:after stylerule).
a:after {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
content:"";
position: absolute;
background-image: url(http://www.domblogger.net/buttons/play.svg);
background-repeat: no-repeat;
background-position: 0;
height: 350px;
width: 350px;
}
Play

Can you CSS Blur based on a gradient mask?

Can you CSS Blur based on a gradient mask?
Something similar to this effect, http://www.imagemagick.org/Usage/mapping/#blur?

This can help you http://codepen.io/iamvdo/pen/xECmI
.effet{
width: 400px; height: 300px;
margin: 0 auto 50px auto;
box-shadow: 0 1px 5px rgba(0,0,0,.5);
}
.effet img{
position: absolute;
}
.filtre--r{
-webkit-mask: -webkit-radial-gradient( center, closest-side, transparent 30%, black 80%);
-webkit-mask: radial-gradient( closest-side at center, transparent 50%, black 110%);
-webkit-filter: blur(5px);
mask: url('#mask-radial');
filter: url('#filtre1');
}
.filtre--l{
-webkit-mask: -webkit-linear-gradient(black, transparent 30%, black);
-webkit-mask: linear-gradient(black, transparent 30%, black);
-webkit-filter: blur(3px);
mask: url('#mask-linear');
filter: url('#filtre2');
}
.filtre:hover{
-webkit-mask: none;
-webkit-filter: none;
mask: none;
filter: none;
}
p{
text-align: center;
color: rgba(0,0,0,.6);
margin: 1em;
}
p a{
color: rgba(0,0,0,.6);
}
<p><strong>Radial</strong> progressive blur</p>
<div class="effet">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
<img class="filtre filtre--r" src="http://css3create.com/squelettes/images/articles/flou-localise-1.jpg" alt="" />
</div>
<p><strong>Linear</strong> progressive blur</p>
<div class="effet">
<img src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
<img class="filtre filtre--l" src="http://css3create.com/squelettes/images/articles/flou-localise-2.jpg" alt="" />
</div>
<p>Hover over images to see without blur</p>
<p>Next demo: iOS 7 background blur with CSS</p>
<svg height="0">
<defs>
<mask id="mask-radial">
<rect width="400" height="300" fill="url(#g1)"></rect>
<radialGradient id="g1" cx="50%" cy="50%" r="50%">
<stop stop-color="black" offset="50%"/>
<stop stop-color="white" offset="110%"/>
</radialGradient>
</mask>
<mask id="mask-linear">
<rect width="400" height="300" fill="url(#l1)"></rect>
<linearGradient id="l1" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="white" offset="0%"/>
<stop stop-color="black" offset="30%"/>
<stop stop-color="white" offset="100%"/>
</linearGradient>
</mask>
<filter id="filtre1">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
<filter id="filtre2">
<feGaussianBlur in="SourceGraphic" stdDeviation="3"/>
</filter>
</defs>
</svg>

[EDIT] As of October 2022, it is now possible in all the modern browsers.
Yes you can, but at the moment the backdrop blur is not supported on all the browsers.
Here is a simple example working on Chrome and Safari but not Firefox (because of the lack of backdrop-filter support).
https://codepen.io/antoniandre/pen/vYpWQXd?editors=0100
* {margin: 0}
body {
height: 100vh;
background-image: url("https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2600&q=80");
background-size: cover;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
backdrop-filter: blur(20px);
mask: linear-gradient(transparent, black 60%);
transition: 1s;
}
&:hover:after {opacity: 1;}
}

You might nowadays simply use:
backdrop-filter: blur(4px)
All modern browsers except Firefox support it.

Resources