Kevin Powell - Community•4mo ago

Mask or Clip path for div with svg

https://codepen.io/melasculla/pen/vEOEYZX?editors=1100 hello there, i have an svg figure which is 1 one and i used it with mask and it worked fine but if i have smaller shape height bottom are cutted out so i've decided to use 2 svg path's for top and bottom and im having hard time to figure it out i need to have middle part visible so top and bottom should look wavy idk what else to try i've tried mask/clip-path also i've tried clipPath and mask tags in svg itself please help me solve this, thanks in advance

Patrik

CodePen

Untitled

...

8 Replies

PatrikOP•4mo ago

anyone?

Kevin Powell•4mo ago

The problem with clip path here is the top/bottom won't work. You'll see the black areas, and hide everything else. The first one that's the entire shape is the best bet here. The other problem is, if you want to use objectBoundingBox, the units you currentl have won't work. Using that, all the units need to be between 0 and 1, because a unit of 1 = 100%... Will the element(s) your clipping ever have gradient or image backgrounds, or will they always be solid?

PatrikOP•4mo ago

thanks for an answer i did actually solve this i took 1 solid svg https://yoksel.github.io/relative-clip-path/ converted it here and applied like this

<div class="w-full h-[120%] [clip-path:url(#pattern-mask)] after:bg-primary-800 pattern-bg"></div>

<svg class="sr-only">
   <clipPath id="pattern-mask" clipPathUnits="objectBoundingBox">
      <path
         d="M0,0 L0,0.935 C0,0.935,0.155,0.83,0.258,0.833 C0.379,0.837,0.438,1,0.56,1 C0.659,0.992,0.706,0.857,0.805,0.854 C0.882,0.853,1,0.935,1,0.935 V0.188 C1,0.188,0.909,0.095,0.821,0.062 C0.74,0.031,0.659,0.065,0.582,0.103 C0.5,0.144,0.422,0.189,0.36,0.202 C0.248,0.226,0,0,0,0">
      </path>
   </clipPath>
</svg>

<div class="w-full h-[120%] [clip-path:url(#pattern-mask)] after:bg-primary-800 pattern-bg"></div>

<svg class="sr-only">
   <clipPath id="pattern-mask" clipPathUnits="objectBoundingBox">
      <path
         d="M0,0 L0,0.935 C0,0.935,0.155,0.83,0.258,0.833 C0.379,0.837,0.438,1,0.56,1 C0.659,0.992,0.706,0.857,0.805,0.854 C0.882,0.853,1,0.935,1,0.935 V0.188 C1,0.188,0.909,0.095,0.821,0.062 C0.74,0.031,0.659,0.065,0.582,0.103 C0.5,0.144,0.422,0.189,0.36,0.202 C0.248,0.226,0,0,0,0">
      </path>
   </clipPath>
</svg>

answering to your question, i have bg pattern in before element applied with mask

PatrikOP•4mo ago

PatrikOP•4mo ago

looks like that btw it actually works with my other pattern

PatrikOP•4mo ago

<div class="absolute left-0 -bottom-4 w-full h-180 -z-[1]">
    <div class="size-full [mask:url('#mask-top')_bottom/cover_no-repeat]"></div>
 </div>

<svg class="sr-only" width="2101" height="2000" viewBox="0 0 2101 2000" fill="none"
   xmlns="http://www.w3.org/2000/svg">
   <mask id="mask-top" maskUnits="userSpaceOnUse">
      <rect width="2101" height="2000" fill="white" />

      <path
         d="M2100.24 179.197C2100.24 179.197 1908.39 91.0483 1723.67 58.8345C1554.61 29.3519 1384.16 62.4704 1222.08 98.789C1049.64 137.428 887.019 180.764 756.994 193.181C521.609 215.662 1.00098 -0.000137329 0.619629 0.0197601H2100.24V179.197Z"
         fill="black" />
   </mask>
</svg>

<div class="absolute left-0 -bottom-4 w-full h-180 -z-[1]">
    <div class="size-full [mask:url('#mask-top')_bottom/cover_no-repeat]"></div>
 </div>

<svg class="sr-only" width="2101" height="2000" viewBox="0 0 2101 2000" fill="none"
   xmlns="http://www.w3.org/2000/svg">
   <mask id="mask-top" maskUnits="userSpaceOnUse">
      <rect width="2101" height="2000" fill="white" />

      <path
         d="M2100.24 179.197C2100.24 179.197 1908.39 91.0483 1723.67 58.8345C1554.61 29.3519 1384.16 62.4704 1222.08 98.789C1049.64 137.428 887.019 180.764 756.994 193.181C521.609 215.662 1.00098 -0.000137329 0.619629 0.0197601H2100.24V179.197Z"
         fill="black" />
   </mask>
</svg>

but mask always take a place in the top no matter what what i specified as you can see it says url('#mask-top')_bottom but mask in the top any thoughts why this happening?

Kevin Powell•4mo ago

hmm, not 100%, I'd have to play with a working example

Gaming

Programming

Mask or Clip path for div with svg

Did you find this page helpful?