border image or clip path?

this is what i want to achieve:

5 Replies

curatorOP•15mo ago

thie is the svg code of that image:

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>

can anyone help me convert it into clip path so that it would be easy to make it look like this. n after that i can apply just a border to that

~MARSMAN~•15mo ago

https://yoksel.github.io/relative-clip-path/ check this one I've tried it now but you will need to make your SVG to be filled, not just a border like a whole rectangle but of course with those swiggly border note that you will need to enter your svg path values only, like this:

M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z

M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z

see here: https://codepen.io/ThatMartianDev/pen/gOZMmYL sorry i butchered your svg on figma lol but yeah you will need to make it a full rectangle then apply that to your "package" card container

curatorOP•15mo ago

i got till here: but the thing is now it is adding a a white background on it

message.txt

curatorOP•15mo ago

i guess it is clipping the whole div instead of just the border its working for your example too, this clip path, but the same thing, adding a white background over the element you can try it on the same link

~MARSMAN~•15mo ago

https://codepen.io/ThatMartianDev/pen/gOZMmYL check the codepen again I updated it so all you need now to apply that effect to your cards is copy and paste the svg into your html, and add the css I commented in the codepen into your css file I'm sure there's a better way to use that svg, but it's getting late here and I'll need to close my laptop 🤞🏻

Gaming

Programming

border image or clip path?