SVG Isometric Grid (Branch 7099) (Copy 7265)
✨ Jakarin Yensuk
<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 420 420"> <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> </defs> <!--road--> <path d="M130,-30 l300,150 h70 l-300,-150" stroke="black" stroke-width="1" stroke="none" fill="#778899"></path> <path d="M-10,30 l140,-70 v30 l-130,65" stroke="black" stroke-width="1" fill="#778899"></path> <path d="M0,100 l240,120 h-90 l-155,-77.5" stroke="black" stroke-width="1" stroke="none" fill="#778899"></path> <!--building left--> <path d="M55,107.5 v-45 l30,15 v45 l-30,-15z" stroke-width="1"fill="#C1CDCD"></path> <path d="M85,77.5 v50 l5,2.5 v-50z" stroke-width="1"fill="#C1CDCD"></path> <path d="M55,55 v10 l35,17.5 v-10 l-35,-17.5z" stroke-width="1" fill="#C1CDCD"></path> <path d="M95,125 l20,-10 l15,-7.5 l5,-2.5 l20,-10 v-50 l-45,22.5 v5 l-15,7.5z" stroke-width="1" fill="#E0EEEE"></path> <path d="M90,130 l5,-2.5 v-50 l-5,2.5z" stroke-width="1" fill="#E0EEEE"></path> <path d="M90,72.5 l20,-10 v10 l-20,10z" stroke-width="1" fill="#E0EEEE"></path> <path d="M55,55 l15,-7.5 v5 l20,10 l10,-5 l10,5 l-20,10 l-35,-17.5z" stroke="black" stroke-width="1" fill="#F0FFFF"></path> <path d="M110,67.5 v-5 l-10,-5 l40,-20 l15,7.5 l-40,20z" stroke="black" stroke-width="1" fill="#F0FFFF"></path> <!--top window--> <path d="M70,32.5 v20, l20,10 v-20 l-20,-10z" stroke="black" stroke-width="1" fill="#104E8B"></path> <path d="M70,32.5 l45,-22.5 l20,10 l-45,22.5 l-20,-10z" stroke="black" stroke-width="1" fill="#104E8B"></path> <path d="M90,42.5 l50,-25 v20 l-50,25z" stroke="black" stroke-width="1" fill="#104E8B"></path> <!--top--> <path d="M115,-5 v15 l20,10 v-15 l-20,-10 z" stroke="black" stroke-width="1" fill="#C1CDCD"></path> <path d="M115,-5 l20,-10 l20,10 l-20,10 l-20,-10z" stroke="black" stroke-width="1" fill="#F0FFFF"></path> <path d="M155,-5 v15 l-10,5 v25 l-10,5 v-40 l20,-10z" stroke="black" stroke-width="1" fill="#E0EEEE"></path> <!--building right--> <path d="M145,15 l60,30 l30,-15 l-60,-30 l-30,15z" stroke="black" stroke-width="1" fill="#F0FFFF"></path> <path d="M205,45 v75 l30,-15 v-75 l-30,15z" stroke="black" stroke-width="1" fill="#E0EEEE"></path> <path d="M205,45 v75 l-50,-25 v-50 l-10,-5 v-25 l60,30z" stroke="black" stroke-width="1" fill="#C1CDCD"></path> <!--stair--> <ellipse rx=23 ry=10 cx=133 cy=115 fill="#3333CC"></ellipse> <path d="M110,95 h46 v20 h-46z" fill="#3333CC"></path> <ellipse rx=23 ry=10 cx=133 cy=95 fill="#F0FFFF"></ellipse> <!--door--> <path d="M145,127.5 v-20 l15,-7.5 v20 l-5,2.5 v-15 l-5,2.5 v15 l-5,2.5" stroke-width="1" fill="#E0EEEE"></path> <path d="M145,127.5 l-5,-2.5 v-20 l5,2.5 v20z" stroke-width="1" fill="#C1CDCD"></path> <path d="M145,107.5 l15,-7.5 l-5,-2.5 l-15,7.5 l5,2.5z" stroke-width="1" fill="#F0FFFF"></path> <path d="M155,122.5 l-5,-2.5 v-10 l5,-2.5 v15" stroke-width="1" fill="black"></path> <!--sign--> <path d="M155,151 l-5,2.5 v-12.5 l5,-2.5 v12.5z" stroke-width="1" fill="lightgrey"></path> <path d="M110,133.5 l40,20 v-12.5 l-40,-20 v12.5z" fill="#778899"></path> <path d="M110,121 l5,-2.5 l40,20 l-5,2.5z l40,20" stroke-width="1" fill="#C1CDCD"></path> <!--text--> <text x=119 y=144 transform-origin="152.5 115" transform="rotate(26, 0, 0)" font-size="4"fill="gold">คณะเทคโนโลยีสารสนเทศ</text> <text x=121.5 y=148 transform-origin="152.5 115" transform="rotate(26, 0, 0)" font-size="2.3" fill="gold">FACULTY OF INFORMATION TECHOLOGY</text> <!--window--> <path d="M155,32.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M185,47.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M175,42.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M165,37.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M185,67.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M175,62.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M165,57.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M155,52.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M95,82.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M105,77.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M115,72.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M125,67.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M135,62.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M145,57.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M95,97.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M105,92.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M115,87.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M125,82.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M135,77.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M145,72.5 v10 l10,-5 v-10 l-10,5" stroke="black" stroke-width=".5" fill="#3333CC"></path> <path d="M80,77.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M70,72.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M60,67.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M80,92.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M70,87.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <path d="M60,82.5 v10 l10,5 v-10 l-10,-5z " stroke="black" stroke-width=".5" fill="#104E8B"></path> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>