SVG Isometric Grid (Branch 7002) (Copy 7041)
✨ นายพิชญ์รัฐ ไพบูลย์ธรรม
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:limegreen; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 200 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> <!-- code here --> <!-- First floor --> <rect fill="url(#isometric)" width="1000" height="1000"/> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m137 147 v10 l-5 -2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m142 149.5 v5 l-5 2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m152 154.5 v10 l-5 -2.5 v-10 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m157 157 v5 l-5 2.5 v-10z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m162 160.5 v10 l9 4.5 h9 v-10"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m130 145 l40 20 h10 v10 l30 -15 v-25 l-30 15 h-10 l-40 -20 "></path> <path stroke="#ddd" stroke-width="0.5" fill="#80DEEA" d="m130 143 l40 20 h8 v-11 h-8 l-40 -20 z"></path> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m30 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="#80DEEA" d="m130 155 l"></path> <path stroke="#ddd" stroke-width="0.5" d="m136 135 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m142 138 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m148 141 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m154 144 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m160 147 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m166 150 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m172 152 v11"></path> <path stroke="#ddd" stroke-width="0.5" fill="#80DEEA"d="m100 159 l-30 15 l-30 -15 v-11 l30 15 l30 -15 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m125 134 v12"></path> <path stroke="black" stroke-width="0.5" fill="#ddd"d="m130 130 l25 -12.5 l45 22.5 l-20 10 h-10 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m50 153 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m60 158 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m70 163 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m80 158 v11"></path> <path stroke="#ddd" stroke-width="0.5" d="m90 153 v11"></path> <!-- First floor --> <!-- Second floor --> <path stroke="black" stroke-width="0.5" fill="#ddd" d="m30 140 v-25 l40 20 l85 -42.5 v25 l-85 42.5 z"></path> <path stroke="black" stroke-width="0.5" d="m70 135 v25"></path> <path stroke="#ddd" stroke-width="0.5" fill="#80DEEA"d="m100 145 l-30 15 l-30 -15 v-22 l30 15 l30 -15 z"></path> <path stroke="#ddd" stroke-width="0.5" d="m50 128 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m60 133 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m70 138 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m80 133 v22"></path> <path stroke="#ddd" stroke-width="0.5" d="m90 128 v22"></path> <path stroke="#ddd" stroke-width="0.5" fill="transparent" d="m40 130 l30 15 l30 -15"></path> <path stroke="#ddd" stroke-width="0.5" fill="transparent" d="m40 137.5 l30 15 l30 -15"></path> <path stroke="black" stroke-width="0.5" fill="#ffcba4" d="m130 130 v-8.33 l25 -12.5 v8.33"></path> <path stroke="black" stroke-width="0.5" fill="#80DEEA" d="m130 121.67 v-8.33 l25 -12.5 v8.33"></path> <path stroke="black" stroke-width="0.5" fill="#ffcba4" d="m130 113.34 v-8.33 l25 -12.5 v8.33"></path> <!-- Second floor --> <!-- Third floor --> <path stroke="black" stroke-width="0.5" fill="#ccc" d="m30 115 v-25"></path> </svg> </body> </html>