SVG Isometric Grid (Branch 6925) (Copy 6951) (Bra..
✨ นางสาวจุฑามาศ ชนาฐิติกุล
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#b39166; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 300 200"> <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> <defs> <!-- <pattern id="footpath" width="5" height="5" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#ac846c" width="10" height="10" x="0" y="0"/> <rect fill="#ac846c" width="5" height="5" x="0" y="0"/> <rect fill="#967157" width="5" height="5" x="4" y="0"/> <rect fill="#967157" width="5" height="5" x="0" y="4"/> <rect fill="#ac846c" width="5" height="5" x="4" y="4"/> </pattern> --> <pattern id="footpath" width="8" height="8" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#C2C2C2" width="10" height="10" x="0" y="0"/> <rect fill="#C2C2C2" width="5" height="5" x="0" y="0"/> <rect fill="#b8b6b6" width="5" height="5" x="4" y="0"/> <rect fill="#b8b6b6" width="5" height="5" x="0" y="5"/> <!-- <rect fill="#C2C2C2" width="5" height="5" x="4" y="4"/> --> </pattern> </defs> <defs> <pattern id="grass" width="10" height="10" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#7ab072" width="10" height="10" x="0" y="0"/> <!-- style="fill:none;stroke:black;stroke-width:1" /> --> </pattern> </defs> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000" transform="scale(1.2)"/> <g transform="scale(1.5) translate(-32,0)"> <!-- <path d="M100, 10 v50 l-50,25 l50,25 l50,-25 l-50,-25 v-50 l50,25 v50 l-50,-25 v-50 l-50,25 v50" stroke="#0002" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> --> <!-- พื้น --> <rect width="600" height="500" fill="url(#footpath)" transform="rotate(-25 0 360) translate(50 20) skewX(39) "/> <rect width="500" height="500" fill="url(#grass)" transform="rotate(-26 0 360) translate(20 100) skewX(39.5) "/> <rect width="500" height="500" fill="#333333" transform="rotate(-25 0 360) translate(210 210) skewX(39) "/> <rect width="25" height="100" fill="url(#footpath)" transform="rotate(-25 0 360) translate(110 110) skewX(39) "/> <!-- ชาน --> <!-- <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="scale(1) translate(44,67)"></path> --> <rect x="100.5" y="99.5" width="6.5" height="5" fill="rgb(82, 81, 81)"></rect> <rect x="164.5" y="99.5" width="6.5" height="5" fill="rgb(82, 81, 81)"></rect> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="rgb(82, 81, 81)" stroke-width="0.2" transform="scale(1.2) translate(12.5,62)"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(12.5,58)"></path> <!-- พุ่มไม้บังทิพย์ (หลังตึกหลัก) --> <g transform="translate(-30,-24)"> <circle cx="92" cy="92" r=5 fill="#64995c"></circle> <circle cx="89" cy="95" r=5 fill="#64995c"></circle> <circle cx="93" cy="102" r=5 fill="#64995c"></circle> <circle cx="96" cy="101" r=5 fill="#64995c"></circle> <circle cx="94" cy="96" r=5 fill="#64995c"></circle> <circle cx="89" cy="100" r=5 fill="#64995c"></circle> </g> <!-- ลูกตาล --> <!-- กระจกฟ้า --> <path d="M138,20 v60 1.2 l33,16 v-60" fill="#5b80a3" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- กำแพงขาว --> <path d="M129,17 v46 l5,3 v-46" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,65 v6 l30,15 v-6" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,14.5 v8 l30,16 v-8" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M154,30 v48 l5,3 v-48" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,32 v2 l30,16 v-2" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,43 v2 l30,16 v-2" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,54 v2 l30,16 v-2" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16,-1.5)"></path> <path d="M129,17 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- หมิว --> <path d="M99,67 v31 Q132,97 136,82 v-50" fill="#5b80a3" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M65,51.5 v30 l36.2,18 v-30" fill="#5b80a3" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- เสา --> <path d="M64,53 v35 Q63,88 70.5,88 v-35" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- <path d="M95,69 v31 Q94,105 101,103 v-31" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> --> <rect x="97" y="70" width="6.5" height="37" fill="rgb(100 100 100)"></rect> <ellipse cx="100.2" cy="107" rx="3.3"ry="2" fill="rgb(100 100 100)"></ellipse> <ellipse cx="67.2" cy="88" rx="3.3"ry="2" fill="rgb(100 100 100)"></ellipse> <!-- พุ่มไม้บังทิพย์ (หน้าคอมม่อน) --> <g transform="translate(50,-20)"> <circle cx="89" cy="94" r=5 fill="#64995c"></circle> <circle cx="93" cy="102" r=5 fill="#64995c"></circle> <circle cx="96" cy="101" r=5 fill="#64995c"></circle> <circle cx="94" cy="96" r=5 fill="#64995c"></circle> <circle cx="89" cy="100" r=5 fill="#64995c"></circle> </g> <!-- กลม --> <line x1="123" y1="50" x2="123" y2="95.7" stroke="white" stroke-width="0.3"></line> <line x1="128" y1="50" x2="128" y2="93.5" stroke="white" stroke-width="0.3"></line> <line x1="133" y1="50" x2="133" y2="88.8" stroke="white" stroke-width="0.3"></line> <line x1="108" y1="50" x2="108" y2="97.5" stroke="white" stroke-width="0.3"></line> <line x1="113" y1="50" x2="113" y2="97" stroke="white" stroke-width="0.3"></line> <line x1="118" y1="50" x2="118" y2="96" stroke="white" stroke-width="0.3"></line> <path d="M104,67 v5 Q137,75 138,58 v" fill="rgb(123 121 130)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <circle cx="55" cy="37" r="25" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-10 50 100) translate(47.5 50) skewX(38.5) scale(1 0.5)" /> <!-- ประตูข้าง --> <g transform="translate(213,8) scale(-1,0.9)"> <path d="M120,76 v20 l2,1 v-20z" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="#7dd2fa" stroke="#7dd2fa" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1,-1.1)"/> </g> <!-- <path d="M79,74 v14.4 l10,5 v-14.4" stroke="none" stroke-width="0.5"></path> --> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="#777"></path> <path d="M79,88.3 l-3,1.9 l-10,10 l10,5 l10,-10 l3,-1.9 l-10,-5" fill="#888"></path> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="#777" transform="translate(10,5)"></path> <g transform="translate(10,5)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <g transform="translate(-0.1,0)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <!-- ประตู --> <path d="M120,76 v20 l2,1 v-20z" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="rgb(100 100 100)" stroke="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="#7dd2fa" stroke="#7dd2fa" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <line x1="75" y1="50" x2="75" y2="86.5" stroke="white" stroke-width="0.3"></line> <line x1="80" y1="50" x2="80" y2="89" stroke="white" stroke-width="0.3"></line> <line x1="85" y1="50" x2="85" y2="91.5" stroke="white" stroke-width="0.3"></line> <line x1="90" y1="50" x2="90" y2="94" stroke="white" stroke-width="0.3"></line> <line x1="95" y1="50" x2="95" y2="96.5" stroke="white" stroke-width="0.3"></line> <!-- ชั้น2 --> <g transform="translate(0,12)"> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="#5b80a3" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="rgb(123 121 130)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> <!-- พุ่มไม้บังทิพย์ (ข้างรันเวย์) --> <circle cx="93" cy="102" r=5 fill="#64995c"></circle> <circle cx="96" cy="101" r=5 fill="#64995c"></circle> <circle cx="94" cy="96" r=5 fill="#64995c"></circle> <circle cx="89" cy="100" r=5 fill="#64995c"></circle> <!-- ชั้นสาม --> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="#5b80a3" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="rgb(172 172 172)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="rgb(123 121 130)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="black" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> --> <!-- หลังคาส่วนนูน --> <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> <!-- หญ้า --> <circle cx="110" cy="170" r="4" fill="#004D40"></circle> <circle cx="115" cy="170" r="4" fill="#558B2F"></circle> <!-- <circle cx="110" cy="170" r="4" fill="#64995c"></circle> <circle cx="110" cy="170" r="4" fill="#64995c"></circle> --> </svg> </body> </html>