SVG Isometric Grid (Branch 7037) (Copy 7131)
✨ นายภูฟ้า รุจิภาสวัฒน์
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:hsl(160, 20%, 40%); 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 id="road"> <path stroke-linecap="round" stroke-linejoin="round" d="m40,40 l30,15 l30,-15 l-30,-15 l-30,15"/> </g> </pattern> </defs> <!-- l-40 20 l-10 5 l40 -20 l-40 20code here --> <rect fill="url(#isometric)" width="1000" height="1000"/> <g transform="scale(4) translate(-120,-45)"> <use href="#road" x="52" y="55" fill="hsl(20, 50%, 70%)" stroke="rgba(78,52,46 ,1) " stroke-width="0.4" stroke-opacity="0.6"/> <use href="#road" x="80" y="28.5" fill="hsl(100, 40%, 50%)" stroke="rgba(78,52,46 ,1) " stroke-width="0.4" stroke-opacity="0.6"/> <use href="#road" x="195" y="84" fill="hsl(40, 80%, 80%)" transform="scale(0.4) translate(80,49)" stroke="hsl(40, 80%, 80%)" /> </g> <g transform="translate(90 50)"> <!--หลัง1--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-10 -3 v35 l15 7 l60 -30 v-35 l-15 -7 l-60 30 l15 7 l60 -30 l-60 30 " > </path> <!--หลัง2--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m6 -15 v10 l12 6 l40 -20 v-10 l-12 -6 l-40 20 l12 6 l40 -20 l-40 20 " > </path> <!--นำ้พุ--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-34 43 v5 l8 4 l20 -10 v-5 l-8 -4 l-20 10 l8 4 l20 -10 l-20 10 " > </path> <!--บันได1--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-20 56 v2 l16 8 l30 -15 v-2 l-16 -8 l-30 15 l16 8 l30 -15 l-30 15 " > </path> <!--บันได2--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-14 55 v2 l12 6 l20 -10 v-2 l-12 -6 l-20 10 l12 6 l20 -10 l-20 10 " > </path> <!--บันได3--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-8 54 v2 l8 4 l20 -10 v-2 l-8 -4 l-20 10 l8 4 l20 -10 l-20 10 " > </path> <!-- หน้า --> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m0 0 v60 l15 7 l75 -37 v-60 l-15 -7 l-75 37 l15 7 l75 -37 l-75 37 " > </path> <!-- กล่องหน้า--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m31 42 v17 l20 10 l30 -15 v-17 l-20 -10 l-30 15 l20 10 l30 -15 l-30 15 " > </path> <path stroke="#282828" stroke-width="0.5" fill="#37C3C3" d="m0 0 v60 l15 7 v-60 l-10 -5 z " > </path> </g> <svg viewBox="0 0 200 200"> <g transform="translate(-60 120)"> <!-- พื้น --> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m70,62 v3 l30,15 v-3 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#546E7A" d="m100,77 v3 l30,-15 v-3 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#455A64" d="m70,62 l30,15 l30,-15 l-30,-15 l-30,15"/> <!-- เสา1 --> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m74,52 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m77,63.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m74,52 l3,1.5 l3,-1.5 l-3,-1.5 l-3,1.5"/> <!-- เสา2 --> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m97,63.5 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m100,75 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m97,63.5 l3,1.5 l3,-1.5 l-3,-1.5 l-3,1.5"/> <!-- เสา3 --> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m120,52 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m123,63.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m120,52 l3,1.5 l3,-1.5 l-3,-1.5 l-3,1.5"/> <!-- เสา4 --> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m98,41 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m101,52.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m98,41 l3,1.5 l3,-1.5 l-3,-1.5 l-3,1.5"/> <!-- ชั้นสอง --> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m70,50 v3 l30,15 v-3 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#546E7A" d="m100,65 v3 l30,-15 v-3 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#455A64" d="m70,50 l30,15 l30,-15 l-30,-15 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m70,40 v10 l30,15 v-10 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#E0E0E0" d="m100,55 v10 l30,-15 v-10 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#E0E0E0" d="m65,39.5 v3 l35,17.5 v-3 l-35,-17.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m100,57 v3 l35,-17.5 v-3 l-35,17.5"/> <path stroke="#f000" stroke-width="1" fill="#F5F5F5" d="m65,39.5 l35,17.5 l35,-17.5 l-35,-17.5 l-35,17.5"/> <!-- หลังคา --> <g transform="translate(80,40) scale(2)"> <path stroke="#f000" stroke-width="1" fill="#37474F" d="m0,0 l10,5 v-7.5 z"/> <path stroke="#f000" stroke-width="1" fill="#263238" d="m10,5 v-7.5 l10,2.5 z"/> <path stroke="#f000" stroke-width="1" fill="#546E7A" d="m0,0 l10,-5 v2.5 z"/> <path stroke="#f000" stroke-width="1" fill="#37474F" d="m20,0 l-10,-5 v2.5 z"/> </g> </g> </svg> </svg> </body> </html>