How to make inline SVG Mask Responsive? - css
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>
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>
CSS - Clip path svg not working on firefox
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="...">
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>
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
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>