console
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="500px" height="500px" viewBox="0 0 100 100">
<path d="M 0,0 L100,0 100,100 0,100 0,0" stroke="red" stroke-width="1" fill="none"/>
<path d="M 0,10 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,20 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,30 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,40 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,50 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,60 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,70 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,80 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 0,90 H 100" stroke="yellow" stroke-width="0.2"/>
<path d="M 10,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 20,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 30,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 40,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 50,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 60,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 70,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 80,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="M 90,0 V 100" stroke="green" stroke-width="0.2"/>
<path d="m20,20 h40 v40 h-40 z" fill="#E8E8E8" stroke="black" stroke-width="0.3"/>
<rect x="30" y="30" width="20" height="20" />
<circle cx="30" cy="30" r="1" fill="red"/>
<circle cx="50" cy="30" r="1" fill="red"/>
<circle cx="50" cy="50" r="1" fill="red"/>
<circle cx="30" cy="50" r="1" fill="red"/>
</svg>
</body>
</html>