SVG Isometric Grid (Branch 7039) (Copy 7114)
✨ นางสาวพิมพ์ชนก บุญทองนุ่ม
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#808080; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 300 300"> <defs> <!-- 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> <!-- ตึก --> <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 v10 l-45,22.5 l-45,-22.5 v-10 l45,-22.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-45,22.5 v10 l45,-22.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-45 22.5 l-45,-22.5 v10 l45,22.5 z" /> </g> <!-- บันไดโรงอาหาร --> <g id="stair-canteen"> <path stroke="black" stroke-width="0.2" d="m0,0 v4 l-25,12.5 l-25,-12.5 v-4 l25,-12.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-25,12.5 v4 l25,-12.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-25 12.5 l-25,-12.5 v4 l25,12.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="hsl(100, 50%, 50%)" d="m0 0 l320,160 v-160" > </path> </g> <!-- มอเตอร์เวย์ --> <g transform="translate(1,0)"> <path stroke=#808080 stroke-width="80" d="m-15 -5 l320,160" /> </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="hsl(100, 50%, 50%)" d="m-15 -5 l80,40 l-80 40 z" /> </g> <!-- พื้นบล็อกตึก --> <g transform="translate(110,115)"> <path stroke="hsl(100, 50%, 50%)" stroke-width="3" fill="hsl(100, 50%, 50%)" d="m-15 -5 l140,70 l-120 60 l-140 -70 z" /> </g> <!-- พื้นบล็อกโรงอาหาร --> <g transform="translate(280,200)"> <path stroke="hsl(100, 50%, 50%)" stroke-width="3" fill="hsl(100, 50%, 50%)" 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="hsl(100, 50%, 50%)" 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="hsl(100, 50%, 50%)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </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)"> <!-- บันได canteen --> <g transform="translate(-26, 29.1)"> <svg> <g transform="scale(1.3) translate(-15,-19)"> <use href="#stair-canteen"x=230 y=185 fill="hsl(60, 30%, 85%)"></use> </g> </svg> </g> <!-- พื้นโรงอาหาร --> <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> <!-- grid --> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>