How can I scale clip-path area in CSS?

Question

I always get the same size for clipping area which is much smaller than the container size(300px here) I am trying to clip.

I tried to play with viewBox and width/height attributes for <svg> and <clipPath> tags but got no result. Is this possible to scale this area?

#clipped {
  width: 300px;
  height: 300px;
  background-color: #f00;
  -webkit-clip-path: url(#test);
          clip-path: url(#test);
}

<div id="clipped"></div>

<svg width="0" height="0">
    <defs>
        <clipPath id="test">
            <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
        </clipPath>
    </defs>
</svg>

Temani Afif · Accepted Answer · 2019-07-14T14:07:40.933

You can apply scale to the path:

#clipped {
  width: 300px;
  height: 300px;
  background-color: #f00;
  -webkit-clip-path: url(#test);
          clip-path: url(#test);
}

<div id="clipped"></div>

<svg width="0" height="0">
        <defs>
            <clipPath id="test">
                <path transform=scale(1.5) d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
    </svg>

And if you want to scale automatically to fit the size you may consider your element as an SVG one where you correctly define the viewBox and then adjust the width/height of the SVG as needed.

svg {
  border:1px solid;
}

<svg  viewBox="0 0 174 134" width=20>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>
    
    <svg  viewBox="0 0 174 134" width=100>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>
    <svg  viewBox="0 0 174 134" width=200>
        <defs>
            <clipPath id="test">
                <path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/>
            </clipPath>
        </defs>
        
        <rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(#test)" />
    </svg>

And if you still want to work with common HTML elements, you can use the SVG as background:

.box {
  border:1px solid;
  display:inline-block;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 134" ><defs><clipPath id="test"><path d="M163.3,112.12c9.83-13.64,2.9-38.95-3.9-58.06-4.93-13.83-11.42-23.17-19-29.36A46.5,46.5,0,0,0,124,16.19a74.54,74.54,0,0,0-20.86-2.67C77.61,13.14,72.32,2.57,52.16.3,41.2-.94,32.84,1.72,27.53,7.69c-3.27,3.68-5.39,8.63-6.23,14.7a114.29,114.29,0,0,1-2.67,15.25A85.23,85.23,0,0,1,14.86,49C12.55,54.6,9.59,60.44,5.73,68c-7.28,14.27-11.22,41.2,11,57.82,7.91,5.64,17.48,5.86,27.8,4.23,16.71-2.65,35.35-10.14,52-7.3C116.53,126.16,145.49,139.85,163.3,112.12Z"/></clipPath></defs><rect x="0" y="0" fill="red" width="174" height="134" clip-path="url(%23test)" /></svg>')0 0/100% 100% no-repeat;
  
 }

<div class="box" style="width:100px;height:100px;">

</div>

<div class="box" style="width:220px;height:200px;">

</div>
<div class="box" style="width:200px;height:150px;">

</div>

Thank you! May be you also know why this snipped doesn't work correctly in Safari(it's cropped)? — Sergey Novikov, May 21 '18 at 13:16
@SergeyNovikov not sure, will check maybe safari has some issues ... by the way I updated with another example — Temani Afif, May 21 '18 at 13:21

How can I scale clip-path area in CSS?

1 Answers1

Linked