<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800">
     <symbol> 
    <g id="leaf">
        <path class="cls-1" d="M20.36,21.66a11.82,11.82,0,0,1-2.69,0s-.7-.08-1.38-.23c-3.9-.89-7.35-4.83-7.35-4.83C4.39,11.43,1.13,2,2.73,1,3.19.74,5,2.67,6.53,3.53a21.06,21.06,0,0,1,6.82,5.79,22.74,22.74,0,0,1,4.32,12.35"/>
        <path class="cls-1" d="M20.35,21.93a12.37,12.37,0,0,0-2.69-.2s-.69,0-1.39.14c-3.95.62-7.67,4.31-7.67,4.31C3.72,31-.19,40.18,1.33,41.29c.45.32,2.4-1.48,4-2.23a21.16,21.16,0,0,0,7.21-5.31,22.67,22.67,0,0,0,5.15-12"/>
    </g>
  </symbol>
    <defs>
      <!-- Define the fishnet pattern with a 90-degree rotation -->
      <pattern id="fishnet" width="50" height="50" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
        <line x1="0" y1="0" x2="0" y2="50" stroke="black" stroke-dasharray="5" stroke-width="2"/>
        <line x1="0" y1="0" x2="50" y2="0" stroke="black" stroke-dasharray="5" stroke-width="2"/>
        <circle cx="0" cy="0" r="6"/>
        <circle cx="45" cy="0" r="6"/>
        <circle cx="0" cy="50" r="6"/>
        <circle cx="45" cy="50" r="6"/>
      </pattern>
      <!-- leaves pattern -->

 
      <pattern id="leaves" x="6" y="18.5" width="5%" height="6%" patternUnits="userSpaceOnUse">
        <use xlink:href="#leaf" />
      </pattern>
    </defs>
   
   
    <!-- Use the rotated fishnet and leavespattern to fill a rectangle -->
    <rect width="100%" height="95%" fill="none" stroke="black" stroke-width="5"></rect>
    <rect width="100%" height="70%" fill="url(#fishnet)" stroke="black" stroke-width="5"></rect>
    <line x1="0" y1="75%" x2="100%" y2="75%" stroke="black" stroke-width="50" />
    <rect width="100%" height="12%" y="80%" fill="url(#leaves)" stroke="black" stroke-width="5"/>
body{
    display: flex;
    justify-content: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.