SVG Isometric Grid (Branch 7039) (Copy 7110)
✨ VISAL SUWANARAT
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#ECF0F1; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 300 300"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <rect width="100" height="100" fill="#F7DC6F "/> <path stroke="#F39C12 " fill="transparent" stroke-linejoin="square" d="m1,5 h1 l2,-1 l1,1 l1,-1 " /> </pattern> <g id="bus"> <path stroke="black" stroke-width="0.2" fill="#F55940" d="m130 145 l20 10 v-5 l-20 -10 v5"></path> <path stroke="black" stroke-width="0.2" fill="#A9F8FD" d="m130 140 l20 10 v-5 l-20 -10 v5"></path> <path stroke="black" stroke-width="0.2" fill="#FF2525" d="m130 135 l20 10 l2.5 1.4 l5 -2.5 l-2.5 -1.4 l-20 -10 l-5 2.5"></path> <path stroke="black" stroke-width="0.2" fill="#A9F8FD" d="m150 150 l2.5 1.4 l5 -2.5 v-5 l-5 2.5 l-2.5 -1.4 z"></path> <path stroke="black" stroke-width="0.2" fill="#A9F8FD" d="m150 155 l2.5 1.4 l5 -2.5 v-5 l-5 2.5 l-2.5 -1.4 z"></path> <circle cx="145" cy="153" r="2.5" fill="#1E262A"/> <circle cx="145" cy="153" r="1" fill="#696969"/> <circle cx="134" cy="147" r="2.5" fill="#1E262A"/> <circle cx="134" cy="147" r="1" fill="#696969"/> <path stroke="#1CB7FF" stroke-width="0.5" fill="#0000" d="m135 137.4 v5"></path> <path stroke="#1CB7FF" stroke-width="0.5" fill="#0000" d="m140 140 v5"></path> <path stroke="#1CB7FF" stroke-width="0.5" fill="#0000" d="m145 142.5 v5"></path> <path stroke="#1CB7FF" stroke-width="0.5" fill="#0000" d="m150 145 v5 l2.5 1.4 l5 -2.5"></path> </g> <pattern id="grass2" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <rect width="100" height="100" fill="#58D68D"/> <path stroke="#28B463 " fill="transparent" stroke-linejoin="square" d="m1,5 h1 l2,-1 l1,1 l1,-1 " /> </pattern> <!-- grid --> <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> <!-- ตึก --> <!-- flower --> <g id="block glass"> <path stroke="green" stroke-width="0.2" fill="green" d="m162 115 l3 1.5 l3 -1.5 v-3 l-3 -1.5 l-3 1.5 v3"></path> <path stroke="brown" stroke-width="1" fill="#0000" d="m162 115 l3 1.5 l3 -1.5 "></path> <circle cx="165" cy="110" r="2" fill="#FF6095"/> <circle cx="165" cy="110" r="1" fill="#CD1E60"/> </g> <g id="long"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-20,10 l-45,-22.5 v-15 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v15 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v15 l45,22.5 z" /> </g> <!-- หน้าต่าง --> <g id="window"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-20,10 l-45,-22.5 v-5 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v5 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v5 l45,22.5 z" /> </g> <!-- ตึก2 --> <g id="tt"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-20,10 l-45,-22.5 v-10 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v10 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v10 l45,22.5 z" /> </g> <!-- หลังคาตึกเร้กกกกกกก --> <g id="small"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-15,7.5 l-20,-10 v-10 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v10 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v10 l20,10 z" /> </g> <!-- ฐานตึกเร้กกกกกกกกก --> <g id="base_sml"> <path stroke="black" stroke-width="0.2" d="m0,0 v20 l-15,7.5 l-20,-10 v-20 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v20 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v20 l20,10 z" /> </g> <!-- ชั้นตึกเล็ก --> <g id="wsmall"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-20,-10 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v5 l20,10 z" /> </g> <!-- ทางออก --> <g id="floor"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-15,7.5 l-25,-12.5 v-15 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v15 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-25,-12.5 v15 l25,12.5 z" /> </g> <!-- บันไดเล็ก --> <g id="stair"> <path stroke="black" stroke-width="0.2" d="m0 0 v15 l5,2.5 l5 -2.5 v-15 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v15 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v15 l-5,2.5 z" /> </g> <g id="stair2"> <path stroke="black" stroke-width="0.2" d="m0 0 v10 l5,2.5 l5 -2.5 v-10 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v10 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v10 l-5,2.5 z" /> </g> <g id="stair3"> <path stroke="black" stroke-width="0.2" d="m0 0 v5 l5,2.5 l5 -2.5 v-5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> </g> <g id="stairr1"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-15,7.5 l-5,-2.5 v-10 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v10 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v10 l5,2.5 z" /> </g> <g id="stairr2"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-5,-2.5 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v5 l5,2.5 z" /> </g> <!-- น้ำพุ --> <g id="fountain"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-5,2.5 l-25,-12.5 v-15 l5,-2.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-5,2.5 v15 l5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-5 2.5 l-25,-12.5 v15 l25,12.5 z" /> </g> <g id="fountain2"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-25,-12.5 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-25,-12.5 v5 l25,12.5 z" /> </g> <!-- พื้นโรงอาหาร --> <g id="ground-canteen"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-45,22.5 l-45,-22.5 v-5 l45,-22.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-45,22.5 v5 l45,-22.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-45 22.5 l-45,-22.5 v5 l45,22.5 z" /> </g> <!-- บันไดโรงอาหาร --> <g id="stair-canteen"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-45,22.5 l-45,-22.5 v-5 l45,-22.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-45,22.5 v5 l45,-22.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-45 22.5 l-45,-22.5 v5 l45,22.5 z" /> </g> <!-- หลังคา canteen --> <g id="roof-canteen"> <path stroke="black" stroke-width="0.2" d="m0,0 v17 l-50,25.5 l-50,-25.5 v-17 l50,-25.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-50,25.5 v17 l50,-25.5 z"/> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-50 25.5 l-50,-25.5 v17 l50,25.5 z" /> <path stroke="black" stroke-width="0.2" d="m-35,0 l-15,7.5 l-15,-7.5 l15,-7.5z"></path> <path stroke="" stroke-width=".2" fill="#0004" d="m-50 -7.5 v15 l15,-7.5 z"/> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-65 0 l15,-7.5 v15 z" /> </g> <!-- เสา --> <g id="เสา-canteen"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-4,2 l-4,-2 v-15 l4,-2z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-4,2 v15 l4,-2 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-4 2 l-4,-2 v15 l4,2 z" /> </g> </defs> <!-- code here!!! --> <!-- พื้นเขียวเฉียงบน --> <g transform="translate(-10 0)"> <path fill="url(#grass)" d="m0 0 l320,160 v-160" > </path> </g> <!-- tree --> <g id="tree"> <path stroke="black" stroke-width="0.2" fill="brown" d="m120 115 l5 2.5 l5 -2.5 v-10 l-5 2.5 l-5 -2.5 v10"></path> <path stroke="black" stroke-width="0.2" fill="green" d="m110 100 l15 7.8 l15 -7.8 l-15 -40 z l15 7.8 v-48"></path> </g> <!-- ขอบพื้นสีน้ำตาลเข้มเฉียงบน --> <g transform="translate(10,10)"> <path stroke="hsl(60, 50%, 30%)" stroke-width="5" d="m-15 -5 l320,160" /> </g> <!-- ขอบพื้นสีน้ำตาลอ่อนเฉียงบน --> <g transform="translate(10,18)"> <path stroke="hsl(60, 20%, 50%)" stroke-width="10" d="m-15 -5 l320,160" /> </g> <!-- พื้นบล็อกขอบซ้ายบน --> <g transform="translate(-20,-25)"> <g transform="translate(0,60)"> <path stroke="hsl(100, 50%, 50%)" stroke-width="3" fill="url(#grass2)" d="m-15 -5 l80,40 l-80 40 z" /> </g> <!-- พื้นบล็อกตึก --> <g transform="translate(110,115)"> <path stroke="#717D7E" stroke-width="3" fill="#95A5A6" d="m-15 -5 l140,70 l-120 60 l-140 -70 z" /> </g> <!-- พื้นบล็อกโรงอาหาร --> <g transform="translate(280,200)"> <path stroke="#717D7E" stroke-width="3" fill="#95A5A6" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> <!-- พื้นบล็อกขอบซ้ายล่าง --> <g transform="translate(-20,200)"> <path stroke="hsl(100, 50%, 50%)" stroke-width="3" fill="url(#grass2)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> <!-- พื้นบล็อกขอบกลางล่าง --> <g transform="translate(130,275)"> <path stroke="hsl(100, 50%, 50%)" stroke-width="3" fill="url(#grass2)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> </g> </g> <!-- ตึกหลัก --> <g transform="translate(15, 0)"> <svg> <g fill="#EEEEEE" transform="scale(1.3)"> <use href="#long" x="100" y=100></use> <use href="#tt" x="100" y=90></use> <use href="#window" x="100" y=85 fill="lightblue"></use> <use href="#tt" x="100" y=75></use> <use href="#window" x="100" y=70 fill="lightblue"></use> <use href="#tt" x="100" y=60></use> <use href="#window" x="100" y=55 fill="lightblue"></use> <use href="#tt" x="100" y=45></use> <use href="#window" x="100" y=40 fill="lightblue"></use> <use href="#window" x="100" y="35"></use> </g> </svg> <!-- ตึกเล็ก --> <svg> <g fill="#EEEEEE" transform="scale(1.3)"> <use href="#base_sml" x="55" y=92.5></use> <use href="#wsmall" x="55" y=87.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=82.5></use> <use href="#wsmall" x="55" y=77.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=72.5></use> <use href="#wsmall" x="55" y=67.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=62.5></use> <use href="#wsmall" x="55" y=57.5 fill="lightblue"></use> <use href="#small" x="55" y=47.5></use> <use href="#floor" x="80" y=110></use> <path d="m40,95 a2 1 0 0 0 15,-7.5" fill="blue"/> </g> </svg> <!-- บันได --> <svg> <g fill="#EEEEEE" transform="scale(1.3)"> <use href="#stair2"x=20 y=105 ></use> <use href="#stair3"x=15 y=112.5 ></use> </g> </svg> <!-- น้ำพุ --> <svg> <g fill="#EEEEEE" transform="scale(1.3)"> <use href="#fountain" x=65 y=117.5 ></use> <use href="#fountain2" x=60 y=130 fill="blue"></use> </g> </svg> <!-- บันได2 --> <svg> <g fill="#EEEEEE" transform="scale(1.3)"> <use href="#stairr1"x=85 y=117.5 ></use> <use href="#stairr2"x=90 y=125 ></use> </g> </svg> </g> <!-- พื้นโรงอาหาร --> <g transform="translate(-5, 5)"> <g transform="translate(13, 5)"> <svg> <g transform="scale(1.3) translate(-15,-19)"> <use href="#ground-canteen"x=230 y=185 fill="hsl(60, 30%, 25%)"></use> </g> </svg> <!-- เสา canteen --> <svg> <g> <use href="#เสา-canteen" x=225 y=174 fill="hsl(60, 40%, 85%)"></use> <use href="#เสา-canteen" x=170.5 y=201 fill="hsl(60, 40%, 85%)"></use> <use href="#เสา-canteen" x=279.5 y=200.5 fill="hsl(60, 40%, 85%)"></use> <use href="#เสา-canteen" x=225 y=228 fill="hsl(60, 40%, 85%)"></use> </g> </svg> </g> <!-- หลังคา canteen --> <g transform="translate(19.5, -32)"> <svg> <g transform="scale(1.3) translate(-15,-19)"> <use href="#roof-canteen"x=230 y=185 fill="hsl(60, 30%, 85%)"></use> </g> </svg> </g> </g> <g> <use href="#tree" x="50" y="50"/> </g> <g> <use href="#block glass" x="" y="60"/> </g> <g> <use href="#bus" x=85></use> <use href="#bus" x=1 y=100></use> </g> <!-- grid --> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>