<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.