SVG Isometric Grid- team D (Copy 7300)
✨ นายภูฟ้า รุจิภาสวัฒน์
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:hsl(180, 20%, 30%); 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 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 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 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 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 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 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 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 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 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 d="m0 0 v3 l5,2.5 l5 -2.5 v-3 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v3 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v3 l-5,2.5 z" /> </g> <g id="stairr1"> <path 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 d="m0,0 v3 l-15,7.5 l-5,-2.5 v-3 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v3 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v3 l5,2.5 z" /> </g> <g id="stairr3"> <path d="m0,0 v2 l-15,7.5 l-5,-2.5 v-2 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v2 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v2 l5,2.5 z" /> </g> <!-- รั้วภ --> <g id="eieip"> <line x1="20" y1="13" x2="46" y2="26" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="20" y1="18" x2="46" y2="31" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> </g> <!-- รั้วภภ --> <g id="eieipp"> <use href="#เสา-canteen" x=144.5 y=71 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=123 y=63></use> <use href="#เสา-canteen" x=170.5 y=84 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=149 y=76></use> <use href="#เสา-canteen" x=197 y=97.5 fill="hsl(10, 50%, 50%)"></use> </g> <!-- น้ำพุ --> <g id="fountain"> <path 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 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" /> <path stroke="#f000" stroke-width="1" fill="#0006" d="m0 2 l-15,7.5 v3 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0005" d="m-15 9.5 l-25,-12.5 v3 l25,12.5 z" /> </g> <!-- พื้นโรงอาหาร --> <g id="ground-canteen"> <path 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 fill="hsl(60, 20%, 70%)" d="m0,0 v3 l30,15 v-3 l-30,-15"/> <path fill="hsl(60, 20%, 65%)" d="m45 7.5 l-15,7.5 v3 l15,-7.5 z"/> <path fill="hsl(60, 20%, 80%)" d="m0,0 l30,15 l15,-7.5 l-30, -15 "/> </g> <!-- หลังคา canteen --> <g id="roof-canteen"> <path 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 d="m-35,0 l-15,7.5 l-15,-7.5 l15,-7.5z"></path> <path 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 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> <!-- door ส้ม --> <g id="door"> <path stroke="#f000" stroke-width="1" fill="hsl(10, 50%, 50%)" d="m0 0 l-7,3.5 v13 l7,-3.5 z"/> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l-7,3.5 v1 l7,-3.5 z"/> <circle r=.6 fill="wheat" cx="-5.4" cy="9"></circle> </g> <!-- door --> <g id="door-it"> <path stroke="#666" stroke-width=".3" fill="hsl(180, 50%, 18%)" d="m11.5 6.5 l-6,-3 v11 l6,3 z"/> <path fill="hsl(180, 12%, 58%)" d="m11.5 6.5 l-6,-3 v1 l6,3 z"/> <!-- <path stroke="#666" stroke-width=".3" fill="hsl(180, 50%, 15%)" d="m14 8 l-6,-3 v11 l6,3 z"/> --> </g> <!-- ต้นไม้ --> <g id="tree1"> <path fill="hsl(40, 50%, 20%)" d="m120 115 l5 2.5 l5 -2.5 v-10 l-5 2.5 l-5 -2.5 v10"></path> <path stroke="#f000" stroke-width="1" fill="hsl(100 ,50%, 30%)" d="m110 100 l15 7.8 l15 -7.8 l-15 -40 z l15 7.8 v-48"></path> </g> <!-- ลำต้น --> <g id="tree2"> <path stroke="#f00" stroke-width="0" fill="#9b6631" d="m-20 34.7 v-20 l2.5,1.25 v20" /> <path stroke="#f00" stroke-width="0" fill="#704a24" d="m-17.6 35.9 v-20 l2.5,-1.25 v20" /> <path stroke="#f00" stroke-width="0" fill="#704a24" d="m-20 14.7 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25" /> </g> <!-- เส้นถนนมอเตอร์เวย์ --> <g id="motor-way" stroke="#bbb" stroke-width="1.5"> <path stroke-dasharray="3,5" stroke-linecap="round" d="M0 0 l50 25" /> </g> <g id="รั้ว"> <path stroke="#f00" stroke-width="0" fill="#9b6631" d="m-20 34.7 v-15 l2.5,1.25 v15" /> <path stroke="#f00" stroke-width="0" fill="#704a24" d="m-17.6 35.9 v-15 l2.5,-1.25 v15" /> <path stroke="#f00" stroke-width="0" fill="hsl(0, 40%, 35%)" d="m-20 19.7 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25" /> </g> </defs> <!-- code here!!! --> <!-- พื้นเขียวเฉียงบน --> <g transform="translate(-10 0)"> <path fill="hsla(90, 50%, 42%)" d="m0 0 l320,160 v-160" > </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="hsla(90, 50%, 42%, .5)" stroke-width="3" fill="hsla(90, 50%, 42%)" d="m-15 -5 l80,40 l-80 40 z" /> </g> <!-- พื้นบล็อกตึก --> <g transform="translate(110,115)"> <path stroke="hsla(90, 50%, 42%,.5)" stroke-width="3" fill="hsla(90, 50%, 42%)" d="m-15 -5 l140,70 l-120 60 l-140 -70 z" /> <!-- <path fill="hsl(30, 50%, 64%)" stroke="hsla(10, 30%, 45%, .5)" stroke-width="1.25" d="m-125 47.5 l140,70 l-10 5 l-140 -70 z" /> --> </g> <!-- พื้นบล็อกโรงอาหาร --> <g transform="translate(280,200)"> <path stroke="hsla(90, 50%, 42%, .5)" stroke-width="3" fill="hsla(90, 50%, 42%)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> <!-- พื้นบล็อกขอบซ้ายล่าง --> <g transform="translate(-20,200)"> <path stroke="hsla(90, 50%, 42%, .5)" stroke-width="3" fill="hsla(90, 50%, 42%)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> <!-- พื้นบล็อกขอบกลางล่าง --> <g transform="translate(130,275)"> <path stroke="hsla(90, 50%, 42%, .5)" stroke-width="3" fill="hsla(90, 50%, 42%)" d="m-15 -5 l120,60 l-120 60 l-120 -60 z" /> </g> </g> <!-- motor-way --> <use href="#motor-way" x="0" y="34"></use> <use href="#motor-way" x="135" y="101"></use> <use href="#motor-way" x="190" y="128"></use> <use href="#motor-way" x="240" y="153"></use> <use href="#motor-way" x="290" y="178"></use> <use href="#motor-way" x="0" y="183"></use> <use href="#motor-way" x="50" y="208"></use> <use href="#motor-way" x="100" y="233"></use> <use href="#motor-way" x="151" y="259"></use> <use href="#motor-way" x="201" y="284"></use> <g transform="translate(379, 265) rotate(126)"> <use href="#motor-way1" x="0" y="183"></use> <use href="#motor-way" x="50" y="208"></use> <use href="#motor-way" x="80" y="223"></use> <use href="#motor-way" x="155" y="260"></use> <use href="#motor-way" x="205" y="285"></use> </g> <!-- รั้วแดง --> <g> <use href="#eieip" x="-29" y="-13.5"></use> <use href="#เสา-canteen" x=20.5 y=8 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=-1 y="0"></use> <use href="#เสา-canteen" x=46.5 y=22 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=95 y=49></use> <use href="#eieipp"></use> <use href="#eieip" x=175 y=89></use> <use href="#เสา-canteen" x=225 y=111 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=203 y=103></use> <use href="#เสา-canteen" x=252 y=125 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=231 y=117></use> <use href="#เสา-canteen" x=279.5 y=139 fill="hsl(10, 50%, 50%)"></use> <use href="#eieip" x=258 y=131></use> <use href="#เสา-canteen" x=305.5 y=151.5 fill="hsl(10, 50%, 50%)"></use> <use href="#eieipp" x="-140" y="119"></use> <use href="#eieipp" x="-45" y="168"></use> <use href="#eieipp" x="7.5" y="194.5"></use> </g> <!-- ตึกหลัก --> <g transform="translate(-4, -15) scale(1.05)"> <g fill="hsl(60, 30%, 90%)" 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="hsl(180, 30%, 65%)"></use> <use href="#tt" x="100" y=75></use> <use href="#window" x="100" y=75 fill="hsl(180, 30%, 65%)"></use> <use href="#tt" x="100" y=65></use> <use href="#window" x="100" y=65 fill="hsl(180, 30%, 65%)"></use> <use href="#tt" x="100" y=55></use> <use href="#window" x="100" y=55 fill="hsl(180, 30%, 65%)"></use> <use href="#tt" x="100" y=45></use> <use href="#window" x="100" y=45 fill="hsl(180, 30%, 65%)"></use> <use href="#window" x="100" y="40"></use> <use href="#window" x="100" y="35"></use> </g> <!-- ตึกเล็ก --> <g fill="hsl(60, 30%, 90%)" transform="scale(1.3)"> <use href="#base_sml" x="55" y=92.5></use> <use href="#wsmall" x="55" y=87.5 fill="hsl(180, 30%, 65%)"></use> <use href="#wsmall" x="55" y=82.5></use> <use href="#wsmall" x="55" y=77.5 fill="hsl(180, 30%, 65%)"></use> <use href="#wsmall" x="55" y=72.5></use> <use href="#wsmall" x="55" y=67.5 fill="hsl(180, 30%, 65%)"></use> <use href="#wsmall" x="55" y=62.5></use> <use href="#wsmall" x="55" y=57.5 fill="hsl(180, 30%, 65%)"></use> <use href="#small" x="55" y=47.5></use> <use href="#floor" x="80" y=110></use> <path d="m40,96 v10 l15,-8 v-10z" fill="hsl(180, 20%, 45%)" /> <path d="m40,105 a2 1 0 0 0 15,-7.5" fill="hsl(180, 20%, 45%)"/> <path d="m39.9,102 a2 1 0 0 0 15,-7.5" fill="hsl(180, 20%, 45%)" stroke="#ccc" stroke-width=".1"/> <path d="m39.9,98.5 a2 1 0 0 0 15,-7.5" fill="hsl(180, 20%, 45%)" stroke="#ccc" stroke-width=".1"/> <path d="m57.8,91.3 v10 "stroke-width=".5" stroke="hsl(180, 20%, 45%)"/> <path d="m40,95 v10 "stroke-width=".3" stroke="#ccc"/> <path d="m40,95 a2 1 0 0 0 15,-7.5" fill="hsl(60, 10%, 70%)" stroke="#eee" stroke-width=".1"/> <path d="m44,96.2 v10 "stroke-width=".3" stroke="#ccc"/> <path d="m48,96.5 v10 "stroke-width=".3" stroke="#ccc"/> <path d="m52,96 v10 "stroke-width=".3" stroke="#ccc"/> <path d="m55.5,94.8 v10 "stroke-width=".3" stroke="#ccc"/> </g> <!-- บันได --> <g fill="hsl(60, 30%, 90%)" transform="scale(1.3)"> <use href="#stair2"x=22 y=106 ></use> <use href="#stair3"x=17 y=115.5 ></use> <use href="#stair3"x=17 y=112.5 ></use> <use href="#stair3"x=12 y=118 ></use> </g> <!-- น้ำพุ --> <svg> <g fill="hsl(60, 35%, 90%)" transform="scale(1.3)"> <use href="#fountain" x=65 y=117.5 ></use> <use href="#fountain2" x=60 y=130 fill="hsl(180, 50%, 60%)"></use> </g> <svg viewBox="0 0 200 30"> <text x="20" y="12.8" font-size="3.6px" fill="#666" transform="rotate(25 20,40)">IT .KMITL!</text> </svg> <circle cx="49" cy="165" r="3" fill="#0288D1" /> <circle cx="57" cy="165" r="3" fill="#0288D1" /> <ellipse cx="53" cy="156" rx="5" ry="12" fill="hsla(180, 50%, 50%, .8)" /> <circle cx="55" cy="167" r="3" fill="#039BE5" /> <circle cx="51" cy="167" r="3" fill="#03A9F4" /> </svg> <svg height="60" width="200"> </svg> <!-- ประตูหนีไฟสีส้ม --> <use href="#door" x="123" y="139"></use> <!-- ประตู it --> <use href="#door-it" x="30" y="120"></use> <!-- บันได2 --> <g fill="hsl(60, 30%, 90%)" transform="scale(1.3)"> <use href="#stairr1"x=85 y=117.5 ></use> <use href="#stairr2"x=90 y=127 ></use> <use href="#stairr2"x=90 y=125 ></use> <use href="#stairr2"x=90 y=123 ></use> <use href="#stairr2"x=95 y=129.5 ></use> <use href="#stairr2"x=95 y=128 ></use> <use href="#stairr3"x=100 y=133 ></use> </g> </g> <g transform="translate(-5, 5)"> <!-- พื้นโรงอาหาร --> <g transform="translate(13, 5)"> <g transform="scale(1.3) translate(-15,-19)"> <use href="#ground-canteen"x=230 y=185 fill="hsl(60, 30%, 25%)"></use> </g> <!-- เสา canteen --> <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> </g> <!-- หลังคา canteen --> <g transform="translate(19.5, -32)"> <g transform="scale(1.3) translate(-15,-19)"> <use href="#roof-canteen"x=230 y=185 fill="hsl(60, 30%, 80%)"></use> </g> </g> </g> <!-- บันได canteen --> <g transform="scale(1) translate(78,204)"> <use href="#stair-canteen" x="79" y="40"/> <use href="#stair-canteen" x="96" y="48.5"/> <use href="#stair-canteen" x="82" y="38"/> <use href="#stair-canteen" x="94" y="44"/> <use href="#stair-canteen" x="85" y="36"/> <use href="#stair-canteen" x="93" y="40"/> </g> <!-- ต้นสน --> <use href="#tree1" x="175" y="140"/> <use href="#tree1" x="150" y="155"/> <use href="#tree1" x="120" y="170"/> <!-- ต้นไม้ --> <svg> <g transform="translate(150 217)"> <use href="#tree2" x="-38" y="-40" /> <use href="#tree2" x="-14" y="-52" /> <use href="#tree2" x="35" y="-77" /> <use href="#tree2" x=55 y="-87" /> </g> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="10%" style="stop-color:rgb(139,195,74)" /> <stop offset="100%" style="stop-color:rgb(51,105,30)" /> </linearGradient> </defs> <ellipse cx="119" cy="170" rx="10" ry="17" fill="url(#grad1)"/> ใบ2 <ellipse cx="95" cy="180" rx="10" ry="17" fill="url(#grad1)"/> ใบ1 <ellipse cx="167" cy="145" rx="10" ry="17" fill="url(#grad1)"/> ใบ3 <ellipse cx="188" cy="135" rx="10" ry="17" fill="url(#grad1)"/> ใบ4 </svg> <!-- พุ่มไม้ --> <g transform="translate(20, 0)"> <path d="M14 290 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M-29 275 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M-29 288 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14" fill="hsl(90, 40%, 10%)"/> <path d="M 12 300 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M -39 299 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14" fill="hsl(90, 50%, 20%)"/> <circle r="1.5" cx="22" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="18" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="297" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="293" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="295" fill="#EB6A96"/> <circle r="1.5" cx="50" cy="280" fill="#FFF78F"/> <circle r="1.5" cx="46" cy="280" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="282" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="278" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="280" fill="#EB6A96"/> <circle r="1.5" cx="80" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="76" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="297" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="293" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="295" fill="#EB6A96"/> </g> <!-- พุ่มไม้ --> <g transform="translate(290, 300) rotate(-182)"> <path d="M14 290 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M-29 275 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M-29 288 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14" fill="hsl(90, 40%, 10%)"/> <path d="M 12 300 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14 M -39 299 q -5 -25 25 -10 q 5 -30 25 -10 q 25 -15 25 10 q 20 -0.5 0.5 14" fill="hsl(90, 50%, 20%)"/> <circle r="1.5" cx="22" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="18" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="297" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="293" fill="#FFF78F"/> <circle r="1.5" cx="20" cy="295" fill="#EB6A96"/> <circle r="1.5" cx="50" cy="280" fill="#FFF78F"/> <circle r="1.5" cx="46" cy="280" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="282" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="278" fill="#FFF78F"/> <circle r="1.5" cx="48" cy="280" fill="#EB6A96"/> <circle r="1.5" cx="80" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="76" cy="295" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="297" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="293" fill="#FFF78F"/> <circle r="1.5" cx="78" cy="295" fill="#EB6A96"/> </g> <!-- Bus --> <svg> <animate attributeName="y" values="-50;150" dur="19s" repeatCount="indefinite" /> <animate attributeName="x" values="-100;300" dur="19s" repeatCount="indefinite" /> <g id="bus" transform="translate(-50,80)"> <path fill="hsl(10, 50%, 50%)" d="m130 145 l20 10 v-5 l-20 -10 v5"></path> <path fill="hsl(180, 30%, 60%)" d="m130 140 l20 10 v-5 l-20 -10 v5"></path> <path fill="hsl(10, 50%, 50%)" 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 fill="hsl(180, 30%, 60%)" d="m150 150 l2.5 1.4 l5 -2.5 v-5 l-5 2.5 l-2.5 -1.4 z"></path> <path fill="hsl(10, 50%, 50%)" 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="152" r="2.5" fill="#1E262A"/> <circle cx="145" cy="152" 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="#eee" stroke-width="0.3" fill="#0000" stroke-linecap="round" d="m135 137.7 v4.5"></path> <path stroke="#eee" stroke-width="0.3" fill="#0000" stroke-linecap="round" d="m140 140.3 v4.5"></path> <path stroke="#eee" stroke-width="0.3" fill="#0000" stroke-linecap="round" d="m145 142.8 v4.5"></path> <path stroke="#eee" stroke-width="0.3" fill="#0000" stroke-linecap="round" d="m150 145.2 v4.5 l2.5 1.4 l5 -2.5"></path> </g> </svg> <!-- ดอกไม้ --> <g id="block glass" transform="translate(-30,115)"> <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> <!-- เส้นหลังคาโรงอาหาร --> <line x1="229" y1="155.5" x2="229." y2="179.5" style="stroke:hsl(60, 15%, 50%);stroke-width:.5" /> <line x1="294" y1="189" x2="248" y2="188.7" style="stroke:hsl(60, 15%, 60%);stroke-width:.5" /> <line x1="229" y1="198" x2="229" y2="222" style="stroke:hsl(60, 15%, 60%);stroke-width:.5" /> <line x1="164" y1="189" x2="210.5" y2="189" style="stroke:hsl(60, 15%, 60%);stroke-width:.5" /> <!-- อิอิ --> <line x1="229" y1="149" x2="168" y2="180" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <!-- ท่อซานต้า canteen --> <g transform="translate(190 169) scale(1.5)"> <ellipse fill="hsl(60, 25%, 74%)" cx="" cy="13" rx="8" ry="4"/> <path fill="hsl(60, 25%, 74%)" d="m-8,13 h16 v-17 l-10,8 h-6 "/> <ellipse cx="0" cy="0" rx="8" ry="4" fill="#dadada" transform="scale(1.15) rotate(-35 0 0)"/> <ellipse cx="0" cy="0" rx="8" ry="4" fill="hsl(60, 10%, 55%)" transform="rotate(-35 0 0)"/> </g> <!-- รั้วบนโรงอาหาร --> <line x1="168" y1="180" x2="168" y2="189" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="168" y1="180" x2="229" y2="210" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="229" y1="210" x2="229" y2="219" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="229" y1="210" x2="290" y2="179" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="290" y1="180" x2="290" y2="189" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="290" y1="179.5" x2="229" y2="149" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <line x1="229" y1="149" x2="229" y2="159" style="stroke:hsl(50, 60%, 20%);stroke-width:2; stroke-linecap:round;" /> <!-- ศาลพระภูมิ--> <g transform="translate(50 173) scale(.45)"> <path d="m50,50 v5 l15,7.5 v-5 z" stroke-width="0.5" fill="#dedede "/> <path d="m80,50 v5 l-15,7.5 v-5 z" stroke-width="0.5" fill="#bababa "/> <path d="m80,50 l-15,7.5 l-15,-7.5 l15,-7.5 z" stroke-width="1" fill="#f0f0f0 "/> <path d="m60,60 v10 l5,2.5 v-10 z" stroke-width="1" fill="#dedede "/> <path d="m70,60 v10 l-5,2.5 v-10 z" stroke-width="1" fill="#bababa "/> <path d="m75,40 v10 l-10,5 v-10 z" fill="#bababa "/> <path d="m55,40 v10 l10,5 v-10 z" fill="#dedede "/> <path d="m55,40 l10,5 l10,-5 l-10,-5 z" fill="#f0f0f0 "/> <path d="m50,40 l15,7.5 l-7.5,-19 z" fill="#873600 "/> <path d="m57.5,28.5 l14,-7 l8,18.5 l-14.5,7.7" fill="#6E2C00 "/> </g> <!-- <use href="#รั้ว" x="170" y="45"/> --> <!-- grid --> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>