Custom cut-out like background using SVG - HTML CSS SVG

HTML CSS examples for SVG:Clippath

  1. HOME
  2. HTML CSS
  3. SVG
  4. Clippath

Description

Custom cut-out like background using SVG

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#bg {<!--   www .ja  va  2 s.c  o  m-->
   background: url(https://www.java2s.com/style/demo/InternetExplorer.png);
   padding: 10px;
   width: 180px;
}


      </style> 
 </head> 
 <body> 
  <div id="bg"> 
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="179.06497" height="215.83305" id="svg2"> 
    <defs id="defs4"> 
     <clippath id="my-clip-path-shape"> 
      <path d="m 195.2,188.2 c -11.372,0.2 -24.75862,-5.2 -34.12,3.2 -13.12,13.2284 -18.2,34.27062 -13.2,52.2 5.2,11.2 23.2,13.2 26.2,27.26168 5.2,12.2 -5.04045,24.77618 -16.64986,28.0771 -10.51409,4.73807 -24.16329,9.42762 -26.84744,22.20544 -3.99078,20.13851 9.97742,38.50337 24.6444,50.6134 17.80531,14.66127 14.55026,-18.18753 25.49708,-19.74801 11.03929,-4.33262 26.42591,0.66355 33.99366,-10.74628 6.58609,-11.78693 6.21486,-25.80123 7.48914,-38.85338 0.15118,-14.99038 -9.28977,-29.1231 -22.13708,-36.26927 -12.69842,-6.65175 -25.40893,4.45834 -31.68478,14.81059 -4.93722,10.02082 -15.80693,22.02005 -27.79727,13.91976 -7.90528,-3.22719 -9.78849,-14.65106 -19.21394,-14.29212 z" id="path3021" /> 
     </clippath> 
    </defs> 
    <g transform="translate(-108.02473,-141.42165)" id="layer1"> 
     <image xlink:href="defs4" x="40.2" y="168.2" width="304.2" height="228.2" transform="translate(-22.2,-30.2)" clip-path="url(#my-clip-path-shape)" id="image3001" /> 
    </g> 
   </svg> 
  </div>  
 </body>
</html>

Related Tutorials