console
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg width="400px" height="400" viewBox="0 0 100 100" >
<!-- <rect width="500" height="300" x="100" y="100" fill="blue" stroke="black"
stroke-width="3px" rx="30" ry="50"/>
<path d="M40,40 L70,70" stroke="blue"/> -->
<path d="M0,0 L100,0 L100,100 0,100 L0,0"stroke="red" stroke-width="2" fill="none"
/>
<path d="M0,10 L100,10 M0,20 L100,20 M0,30 L100,30 M0,40
L100,40 M0,50 L100,50 M0,60 L100,60 M0,70 L100,70 M0,80
L100,80 M0,90 L100,90"stroke="red" stroke-width="0.5"/>
<path d="M10,0 L10,100 M20,0 L20,100 M30,0 L30,100 M40,0
L40,100 M50,0 L50,100 M60,0 L60,100 M70,0 L70,100 M80,0
L80,100 M90,0 L90,100"stroke="red" stroke-width="0.5"/>
<!-- <Path d="M20,20 H50 V10 L70,30 L50,50 V40 H20 V20" stroke="black" fill="red"/>
<Path d="M20,80 l20,-20 v10 h30 v20 h-30 v10 z "stroke="black" fill="red"/>
<rect width="60" height="60" fill="white" x="20" y="20" rx="10" ry="10"stroke="green"/>
<path d="M30,30 h40 v40 h-40 z fill="black" stroke="white"/>
<circle cx="30" cy="70" r=3 fill="red"/>
<circle cx="30" cy="30" r=3 fill="red"/>
<circle cx="70" cy="30" r=3 fill="red"/>
<circle cx="70" cy="70" r=3 fill="red"/>
<Path d="M40,40 h20 v20 h-20 v-20" fill="blue" stroke="orange" rx="10" ry="10"/>
<circle cx="50" cy="50" r=5 fill="yellow"/>
<line x1="50" y1="10" x2="90" y2="90" stroke="black"/>
<line x1="90" y1="90" x2="10" y2="90" stroke="black"/>
<path d="M30,30 Q 50,90 70,30" stroke="blue" />
<path d="M10,50 h80" stroke="black" fill="none"/>
<path d="M50,10 v80" stroke="black" fill="none"/>
<path d="M45,15 L50,10 L55,15" stroke="black" fill="none"/>
<path d="M85,45 L90,50 L85,55" stroke="black" fill="none"/>
<path d="M30,50 Q40,30 50,50 T70,50 "stroke="black" fill="none">
<path d="M20,50 Q22,30 50,50 Q78,30 80,50" stroke="black" fill="none"/>
<path d="M20,50 Q40,88 50,90 Q60,88 80,50" stroke="black" fill="none"/> -->
<!-- <defs><filter id="f1" x="0" y="0">
<feGaussianBlur stdDeviation="10"/></filter>
</defs>
<rect width="50" height="50" fill="blue" stroke="black" stroke-width="2" filter="url(#f1)"/> -->
<!-- <defs><g id="shape">
<rect width="50" height="50"/>
<circle r="30"/>
<use xlink href="#shape" x="30" y="30"></use>
<use xlink href="#shape" x="100" y="100"></use>
<use xlink href="#shape" x="150" y="150"></use>
</defs> -->
<!-- <defs>
<linearGradient id="gard1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:blue;stop-opacity:1"/>
<stop offset="40%" style="stop-color:green;"/>
<stop offset="100%" style="stop-color:yellow;stop-opacity:0.4"/>
</linearGradient>
</defs>
<circle cx="50" cy="50"r="20" fill="url(#gard1)"/> -->
<defts>
<g id="mz">
<circle cx="50" cy="50" r="3" fill="black"/>
<circle cx="50" cy="60" r="3" fill="white"/>
<circle cx="50" cy="70" r="3" fill="black"/>
<circle cx="60" cy="60" r="3" fill="white"/>
</g>
</defts>
<use xlink:href="#mz" cx="50" cy="50"></use>
<use xlink:href="#mz" cx="50" cy="60"></use>
<svg/>
</body>
<html/>