Creating an irregular border using an SVG clip-path

Question

Ultimately what I'm trying to create is this:

I almost have it completely working, but there seems to be a problem with the SVG path I need to use for the clip-path. In this CodePen, when I use #unusual-border2 as the clip-path, it works. However, I need to use #unusual-border1, which is the correct SVG path as depicted in the above screenshot but it does not work.

Sample element that works:

path element that I need to use:

What am I doing wrong?

Harry · Accepted Answer

As explained in my earlier comment to the question, when clipPathUnits = "objectBoundingBox" is specified, the coordinates should be provided like a ratio (and so it cannot exceed 1) like in the sample that works.

In the above path definition, (0,0.25) would refer to the point represented by 0% on X-axis and 25% of the container's height on Y-axis. The path that doesn't work should also be modified to be like this (or) clipPathUnits = objectBoundingBox should be avoided. I would recommend the former because it is then easier to use the same clip-path for multiple elements of different sizes.

Converting your existing path into ratio based values can be done but the complexity becomes pretty high when there are lot of path commands (which your path has). All that you'd have to see is find out the max coordinate in both X & Y-axis and then divide all values by that number to get the ratio. In the path that was provided in question, the highest X coordinate was 2049 and that for Y coordinate was 564. So the point (0,188) should be converted as (0/2049, 188/564) which is approximately (0,0.33).

The below snippet has the original and converted paths. I've put it as a snippet just to use the expand or collapse feature. A demo of this path is available here.

Though the above clip-path works, there are few things that I personally don't like about it and they are:

A large number of path commands are used. It may make the curves more gracious or aesthetic but editing/maintaining them would be a pain.
There is a mixture of absolute (C) and relative (c) commands. In my opinion, it is better to avoid a mixture. I think this one may have been generated by a tool.

So, I've created a simpler version of the same path and it is available in the below snippet. This is just a personal choice and you can choose whichever you like.

The SVG path commands are pretty simple to understand. In this snippet, we are using the following:

M - Move imaginary pen to point (absolute) represented by the coordinates provided next to it.
C - Draw a bezier curve where the first two sets of coordinates are control points for the curve and the third set is the end point of the curve.

You can read more about each command and their syntax in this MDN article.

body{
  background: url(http://lorempixel.com/800/800/people/3);
  padding: 0;
  margin: 0;
}  
.container {
  position: relative;
  height: calc(99.75vh - 50px);
  width: 100%;
  margin-top: 50px;
  -webkit-clip-path: url(#clipper);
}
.lightblue,
.navyblue {
  position: absolute;
  height: 100%;
  padding-top: 20px;
}
.lightblue {
  width: 65%;
  background: lightblue;
}
.navyblue {
  left: 65%;
  width: 35%;
  background: navy;
}


  
  content
  content

Creating an irregular border using an SVG clip-path

Answers (1)

Related Questions