SVG Isometric Grid (Branch 7037) (Copy 7051)
✨ APHATSARA MORATSATHIAN
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 200 200" width="100" height="700"> <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 --> <rect fill="url(#isometric)" width="1000" height="1000"/> <g transform="translate(30 65)"> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m10 -10 v20 l10 5 l40 -20 v-30 " > </path> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m0 0 v40 l10 5 l60 -30 v-40 l-10 -5 l-60 30 l10 5 l60 -30 l-60 30 " > </path> <path stroke="#282828" stroke-width="0.5" fill="#37C3C3" d="m0 0 v40 l10 5 v-40 l-10 -5 " > </path> </g> <!-- โรงอาหาร--> <g transform="translate(110 130)"> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="M0,0 l40, 20 l40,-20 l-40,-20 z" > </path> <path stroke="#282828" stroke-width="0.5" fill="#37C3C3" d="M0,0 v5 l40,20 v-5 z" > </path> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="M40,25 l40,-20 v-5 l-40,20 z" > </path> <!-- เสา 1--> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m40.15 -14.9 v-10 l2.5,1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m42.6 -13.6 v-10 l2.5,-1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m40.15 -25 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> <!-- เสา 2--> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m60.15 -3 v-10 l2.5,1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m62.6 -1.8 v-10 l2.5,-1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m60.1 -12.9 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> <!-- กำแพง --> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m1 0 v-10 l39,19.5 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBF" d="m1 0 v-10 l20,-10 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m39.95 19.7 v-10 l39,-19.5 v10"/> <!-- กระจก --> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m10 3 v-6 l3,1.5 v6"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m15.1 5.8 v-6 l3,1.5 v6"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m20.6 8.6 v-6 l3,1.5 v6"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m25.9 11.2 v-6 l3,1.5 v6"/> </g> </svg> </body> </html>