SVG Isometric Grid (Copy 7008) (Copy 7015) (Copy ..
✨ นายดรณ์ นุตเวช
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 200 100"> <defs> <pattern id="isometric" width="10" height="5" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" > <g stroke="#0004" stroke-dasharray="2 1" stroke-width=".25"> <path d="m0,0 v100"/> <path d="m10,0 v100"/> </g> <path d="m5,0 v100" stroke-width=".25" stroke="#0004" stroke-dasharray=".5"/> <g stroke-width=".25" stroke="#0004"> <path d="m0,0 l10,5"/> <path d="m10,0 l-10,5"/> </g> </pattern> <g id="เสา"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m15 8 v-25 l5,2.5 v25"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m20 10.75 v-25 l5,-2 v25"/> <!-- <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -25 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> --> </g> <g id="เสา2"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m15 8 v-25 l15,7 v25"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m30 15 v-25 l15.5,-8 v25"/> <!-- <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -25 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> --> </g> <g id="เสา3"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m15 8 v-25 l15,7 v25"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m30 15 v-25 l30.5,-16 v25"/> <!-- <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -25 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> --> </g> <g id="เสา4"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-10 -5 v-7 l40,20 v7"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m30 15 v-7 l40.5,-20 v7"/> <!-- <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -25 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> --> </g> </defs> <!-- code here --> <!-- <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= #808080 x= 55 y= 145 width="50" height="40"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= green x=80 y= 120 width="50" height="40"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= green x=80 y= 120 width="50" height="40"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= white x=95 y= 130 width="20" height="20"/> --> <g transform=" translate(-200 0) skewY(-26.5) skewX(45)" fill= black> <rect fill= #808080 x= 50 y= 150 width="120" height="40"/> <rect fill= #808080 x= 55 y= 145 width="50" height="40"/> <rect fill= green x=80 y= 120 width="50" height="40"/> <rect fill= green x=80 y= 120 width="50" height="40"/> <rect fill= white x=95 y= 130 width="20" height="20"/> </g> <g transform="translate(-80 30) skewX(26.5)" fill= black> <rect fill= #808080 x=100 y= 50 width="5" height="4"/> </g> <rect fill="url(#isometric)" width="1000" height="1000"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= #808080 x= 55 y= 145 width="50" height="40"/> <rect transform=" translate(-80 35) skewY(-26.5) skewX(45)" fill= #808080 x= 55 y= 145 width="50" height="40"/> <use href="#เสา3" x="145" y="73"/> <use href="#เสา2" x="105" y="67"/> <use href="#เสา" x="125" y="77"/> <use href="#เสา" x="135" y="82"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= green x=80 y= 120 width="50" height="40"/> <rect transform=" translate(-80 30) skewY(-26.5) skewX(45)" fill= white x=95 y= 130 width="20" height="20"/> <use href="#เสา4" x="130" y="85.5"/> <use href="#เสา4" x="130" y="61.5"/> </svg> </body> </html>