SVG Isometric Grid (Branch 7145)
✨ `YUSoSerious
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#0CC61E; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="10 -10 500 500"> <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="m30,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="m30,0 l-10,5"/> </g> </pattern> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="30" height="30" > <rect width="100" height="100" fill="#0CC61E"/> <path stroke="#4CEA00" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </pattern> </defs> <!-- code here --> <!-- First floor --> <rect width="1000" height="1000" fill="url(#grass)"/> <!-- บาทวิถี --> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m190 155.5 v5 l120 60 l95 -47.5 v-5"></path> <path stroke="black" stroke-width="0.5" fill=" #485254" d="m200 160 l110 55 l95 -47.5 l-120 -60 z"></path> <rect ></rect> <!-- road --> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m337 147 v10 l-5 -2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m237 147 v10 l-5 -2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m342 149.5 v5 l-5 2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m352 154.5 v10 l-5 -2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m357 157 v5 l-5 2.5 v-10z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m362 160.5 v10 l9 4.5 h9 v-10"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m330 145 l40 20 h10 v10 l20 -10 v-25 l-20 10 h-10 l-40 -20 z"></path> <path stroke="#ddd" stroke-width="0.5" fill="#2980DA" d="m330 143 l40 20 h8 v-11 h-8 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m230 140 v25 l40 20 v-25 m0 25 l60 -30 v-25 l-60 30 l-40 -20"></path> <path stroke="#ddd" stroke-width="0.5" fill="#2980DA" d="m330 155 l"></path> <path stroke="#ddd" stroke-width="0.5" d="m336 135 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m342 138 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m348 141 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m354 144 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m360 147 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m366 150 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m372 152 v11"></path> <path stroke="#ddd" stroke-width="0.5" fill="#2980DA"d="m300 159 l-30 15 l-30 -15 v-11 l30 15 l30 -15 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m325 134 v12"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m330 130 l25 -12.5 l45 22.5 l-20 10 h-10 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m250 153 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m260 158 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m270 163 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m280 158 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m290 153 v11"></path> <!-- First floor --> <!-- Second floor --> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m230 140 v-25 l40 20 l85 -42.5 v25 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" d="m270 135 v25"></path> <path stroke="#ddd" stroke-width="0.5" fill="#2980DA"d="m300 145 l-30 15 l-30 -15 v-22 l30 15 l30 -15 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m250 128 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m260 133 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m270 138 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m280 133 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m290 128 v22"></path> <path stroke="#ddd" stroke-width="0.5" fill="transparent" d="m240 130 l30 15 l30 -15"></path> <path stroke="#ddd" stroke-width="0.5" fill="transparent" d="m240 137.5 l30 15 l30 -15"></path> <path stroke="black" stroke-width="0.5" fill="#ffcba4" d="m330 130 v-8.33 l25 -12.5 v8.33"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m330 121.67 v-8.33 l25 -12.5 v8.33"></path> <path stroke="black" stroke-width="0.5" fill="#ffcba4" d="m330 113.34 v-8.33 l25 -12.5 v8.33"></path> <!-- Second floor --> <!-- Third floor --> <path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m230 115 v-25 l40 20 l85 -42.5 v25 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m230 110 l40 20 l85 -42.5 v-10 l-85 42.5 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m270 110 v25"></path> <!-- Third floor --> <!-- four floor --> <path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m230 90 v-20 l40 20 l85 -42.5 v20 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m230 85 l40 20 l85 -42.5 v-10 l-85 42.5 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m270 90 v20"></path> <!-- four floor --> <!-- five floor --> <path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m230 70 v-20 l40 20 l85 -42.5 v20 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m230 65 l40 20 l85 -42.5 v-10 l-85 42.5 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m270 70 v20"></path> <!--<path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m29 70 v-5 l41 20 l85.5 -42 v5 l-85.5 42 z"></path> <path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m29 75 v-5 l41 20 l85.5 -42 v5 l-85.5 42 z"></path>--> <!-- five floor --> <!-- six floor --> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m230 50 v-20 l40 20 l85 -42.5 v20 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" fill="#CECDD3" d="m230 50 v-5 l40 20 l85 -42.5 v5 l-85 42.5 z"/> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m230 45 l40 20 l85 -42.5 v-10 l-85 42.5 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#2980DA" d="m270 50 v20"></path> <!-- six floor --> <!-- top --> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m230 30 l85 -42.5 l40 20 l-85 42.5 z"></path> <!-- top --> <!-- บันได --> <path stroke="black" stroke-width="0.5" fill="transparent" d="m200 140 l30 15 v5 l-5 2.5 l-30 -15"></path> <path stroke="black" stroke-width="0.5" fill="#" d="m225 162.5 v5 l-30 -15 v-5 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m225 167.5 l-30 -15 l-5 2.5 l30 15 z"></path> <path stroke="black" stroke-width="0.5" fill="#" d="m200 145 l30 15 v-5 l-30 -15 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m200 145 l30 15 l-5 2.5 l-30 -15 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m200 140 l30 -15 v30 z"></path> <!-- บันได --> <!-- Road --> <path stroke="black" stroke-width="0.5" fill="#454545" d="m0 65 l310 155 l150 -75 l50 25 l-200 100 l-310 -155"></path> <!--lane--> <path stroke="black" stroke-width="0.5" fill="yellow" d="m30 110 l50 25 l10 -5 l-50 -25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m100 145 l50 25 l10 -5 l-50 -25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m170 180 l50 25 l10 -5 l-50 -25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m240 215 l50 25 l10 -5 l-50 -25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m310 250 l50 -25 l-10 -5 l-50 25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m370 220 l50 -25 l-10 -5 l-50 25 z"></path> <path stroke="black" stroke-width="0.5" fill="yellow" d="m430 190 l50 -25 l-10 -5 l-50 25 z"></path> <!-- พื้นโรงอาหาร --> <!-- โรงอาหาร --> <path stroke="black" stroke-width="0.5" fill="#CECECE" d="m0 110 l310 155 l200 -100 v500 h-500 z"></path> <!-- โรงอาหาร --> <path stroke="black" stroke-width="0.5" fill="white" d="m100 200 l150 75 l-150 75 l-150 -75 z"></path> <path stroke="black" stroke-width="0.5" fill="#424242" d="m250 275 v-10 l-150 75 v10 z"></path> <path stroke="black" stroke-width="0.5" fill="grey" d="m100 350 v-10 l-150 -75 v10 z"></path> <path stroke="black" stroke-width="0.5" fill="#6D6D6D" d="m250 265 l-150 -75 l-150 75 l150 75 z"></path> <!-- ห้องครัว --> <path stroke="black" stroke-width="0.5" fill="#848484" d="m240 265 v-50 l-140 70 v50 z"></path> <path stroke="black" stroke-width="0.5" fill="#D2D2D2" d="m100 335 v-50 l-140 -70 v50 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m240 215 l-140 70 l-140 -70 l140 -70 z"></path> <!-- ชั้น 2 โรงอาหาร --> <path stroke="black" stroke-width="0.5" fill="white" d="m255 215 l-160 80 l-160 -80 l160 -80 z"></path> <!--ฐานแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m255 215 v-5 l-160 80 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#5B5B5B" d="m255 215 v-5 l-160 80 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#B4B4B4" d="m95 295 v-5 l-160 -80 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#A3A3A3" d="m255 210 l-160 80 l-160 -80 l160 -80 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m230 210 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m240 215 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m240 185 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m220 215 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m230 220 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m230 190 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m210 220 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m220 225 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m220 195 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m200 225 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m210 230 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m210 200 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m190 230 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m200 235 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m200 205 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m180 235 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m190 240 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m190 210 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m170 240 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m180 245 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m180 215 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m160 245 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m170 250 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m170 220 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m150 250 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m160 255 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m160 225 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m140 255 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m150 260 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m150 230 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m130 260 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m140 265 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m140 235 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m120 265 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m130 270 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m130 240 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m110 270 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m120 275 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m120 245 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูน --> <path stroke="black" stroke-width="0.5" fill="white" d="m100 275 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#505050" d="m110 280 v-30 l-5 2.5 l-10 -5 v30 l10 5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m110 250 l-5 2.5 l-10 -5 l5 -2.5 z"></path> <!--เสาแท่งปูนยาว --> <path stroke="black" stroke-width="0.5" fill="#6C6C6C" d="m90 280 l10 5 l-5 2.5 l-10 -5 z"></path> <path stroke="black" stroke-width="0.5" fill="#6C6C6C" d="m100 285 v-30 l-5 2.5 l-158 -79 v30 l158 79 z"></path> <!-- ชั้น 2 โรงอาหารฐานหลังคา --> <path stroke="black" stroke-width="0.5" fill="white" d="m255 185 l-160 80 l-160 -80 l160 -80 z"></path> <path stroke="black" stroke-width="0.5" fill="#7C7C7C" d="m255 185 v-5 l-160 80 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#B3B3B3" d="m95 265 v-5 l-160 -80 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#E7E7E7" d="m255 180 l-160 80 l-160 -80 l160 -80 z"></path> <!-- หลังคา --> <path stroke="black" stroke-width="0.5" fill="#91FFF3" d="m50 180 l60 30 l60 -30 l-60 -30 z"></path> <path stroke="black" stroke-width="0.5" fill="#2BAEA0" d="m50 180 l60 -18 v48 z"></path> <path stroke="black" stroke-width="0.5" fill="#18786E" d="m170 180 l-60 -18 v48 z"></path> <path stroke="black" stroke-width="0.5" fill="#2BAEA0" d="m110 150 v12 l60 17 z"></path> <!-- หลังคา --> <path stroke="black" stroke-width="0.5" fill="Brown" d="m340 170 v15 v-15 l5 -2.5 v15 l-5 2.5"></path> <path stroke="black" stroke-width="0.5" fill="Brown" d="m340 170 v15 v-15 l-5 -2.5 v15 l5 2.5"></path> <ellipse cx="340" cy="150" rx="20" fill="green"/> <!-- ตันไม้ --> <!-- ตันไม้ --> <path stroke="black" stroke-width="0.5" fill="Brown" d="m300 190 v15 v-15 l5 -2.5 v15 l-5 2.5"></path> <path stroke="black" stroke-width="0.5" fill="Brown" d="m300 190 v15 v-15 l-5 -2.5 v15 l5 2.5"></path> <ellipse cx="300" cy="170" rx="20" fill="green"/> <!-- ตันไม้ --> <!-- คาน --> <path stroke="black" stroke-width="0.5" fill="#424242" d="m275 276 v-5 l-30 15 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="grey" d="m245 291 v-5 l-5 -2.5 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#6D6D6D" d="m275 271 l-5 -2.5 l-30 15 l5 2.5 z"></path> <!-- คาน --> <path stroke="black" stroke-width="0.5" fill="#424242" d="m185.5 325 v-5 l-30 15 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="grey" d="m155 340 v-5 l-5 -2.5 v5 z"></path> <path stroke="black" stroke-width="0.5" fill="#6D6D6D" d="m185 320 l-5 -2.5 l-30 15 l5 2.5 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m190 370 l-50 -25 l-5 2.5 l50 25 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m250 340 l-50 -25 l-5 2.5 l50 25 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m290 320 l-50 -25 l-5 2.5 l50 25 z"></path> <path stroke="black" stroke-width="0.5" fill="white" d="m333 297 l-50 -25 l-5 2.5 l50 25 z"></path> </svg> </body> </html>