SVG Isometric Grid (Branch 7037) (Copy 7090) (Bra..
✨ นายสรรค์ธกรณ์ วงศ์ศิริภา
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#e4f5f7; box-shadow:0 0 20px #0002; width:100%; } #ear-right{ transform: rotate(-30deg); } </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> <!-- l-40 20 l-10 5 l40 -20 l-40 20code here --> <!--<rect fill="url(#isometric)" width="1000" height="1000"/>--> <!-- พื้นนหลัง --> <linearGradient id="e" x1="3" y1="100" x2="10" y2="-20" gradientUnits="userSpaceOnUse"> <stop stop-color="#a6dfed" offset="0" /> <stop stop-color="#54a1c7" offset="1" /> </linearGradient> <linearGradient id="a" x1="-80" y1="100" x2="-5" y2="-1" gradientUnits="userSpaceOnUse"> <stop stop-color="#87c792" offset="0" /> <stop stop-color="#41ba64" offset="1" /> </linearGradient> <rect width="300" height="80" x="-2.6" fill="url(#e)" /> <rect width="300" height="200" x="-2.6"y="81"fill="url(#a)" /> <svg viewBox="0 0 200 200"> <!-- ต้นที่1 --> <g transform="translate(-130 100)"> <!-- ต้น1 --> <ellipse cx="176" cy="-13.5" rx="4" ry="3" fill="#0B6623"#4CBB17/> <ellipse cx="176" cy="-13.5" rx="2" ry="1" fill="#A16B34"/> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m176 -13.5 h1.4 v-25 h-2.8 v25" /> <ellipse cx="178" cy="-39" rx="3" ry="6" stroke="#A16B34" fill="none"/> <circle cx="173" cy="-35" r="4" stroke="#A16B34" fill="none"/> <circle cx="169" cy="-43" r="11"fill="#708238" /> <circle cx="168" cy="-43.5" r="10"fill="#4CBB17"/> <circle cx="180" cy="-45" r="9"fill="#708238" /> <circle cx="179" cy="-46" r="8"fill="#4CBB17"/> <circle cx="174" cy="-52" r="10"fill="#708238" /> <circle cx="173.5" cy="-53" r="9"fill="#4CBB17"/> <!-- ต้น2 --> <ellipse cx="150" cy="25" rx="4" ry="3" fill="#0B6623"#4CBB17/> <ellipse cx="150" cy="25" rx="2" ry="1" fill="#A16B34"/> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m150 25 h1.4 v-35 h-2.8 v35" /> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m150 15 h1.4 l6 -8" /> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m148.5 3 h1.4 l-7 -10" /> <circle cx="146" cy="10" r="7"fill="#708238" /> <circle cx="145" cy="9" r="6"fill="#4CBB17" /> <circle cx="158" cy="7" r="5"fill="#708238" /> <circle cx="157.5" cy="6.5" r="4.5"fill="#4CBB17" /> <circle cx="141" cy="-6" r="5"fill="#708238" /> <circle cx="140.5" cy="-6.5" r="4.5"fill="#4CBB17" /> <circle cx="150" cy="-14" r="8"fill="#708238" /> <circle cx="149" cy="-15" r="7"fill="#4CBB17" /> <!-- ต้น3 --> <ellipse cx="210" cy="90" rx="4" ry="3" fill="#0B6623"#4CBB17/> <ellipse cx="210" cy="90" rx="2" ry="1" fill="#A16B34"/> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m210 90 h1.4 v-35 h-2.8 v35" /> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m210 75 h1.4 l6 -8" /> <path stroke="#A16B34" stroke-width="1" fill="#A16B34" d="m210 70 h1.4 l-7 -10" /> <circle cx="205" cy="59" r="5"fill="#708238" /> <circle cx="204.5" cy="58" r="4"fill="#4CBB17" /> <circle cx="221" cy="61" r="11"fill="#708238" /> <circle cx="220" cy="60" r="10"fill="#4CBB17" /> <circle cx="211" cy="49.5" r="8.5"fill="#708238" /> <circle cx="210.5" cy="48" r="8.5"fill="#4CBB17" /> </g></svg> <!-- เครื่องบิน --> <g transform="translate(5 10)"> <!--หลัง1--> <ellipse id="ear-right"cx="0.3" cy="5.8" fill="#d2d8d9" rx="4" ry="8"/> <rect rx="40" ry="20" width="60" height="15" fill="#d2d8d9"/> <circle cx="16" cy="7.5" fill="#828687" r="2"/> <circle cx="23" cy="7.5" fill="#828687" r="2"/> <circle cx="30" cy="7.5" fill="#828687" r="2"/> <circle cx="37" cy="7.5" fill="#828687" r="2"/> <path fill="#37C3C3" d="m49,5 l6,-1.5 l4,1.6 l-5,1.5 z"></path> <ellipse cx="51.2" cy="5.9" fill="#37C3C3" rx="3.4" ry="1"/> <path fill="#37C3C3" d="m25,12 l8,0 l-7,10 l-3,-1 l1,-9 z"></path> </g> <g transform="translate(80 50)"> <!--หลัง1--> <path 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> <path fill="#8db4c7" d="m-10 -3 v35 l15 7 v-35 z" > </path> <!--หลัง2--> <path 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 fill="#8db4c7" d="m6 -15 v10 l12 6 v-10 z" > </path> <!--นำ้พุ--> <path 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> <path fill="#37C3C3" d="m-34 43 l8,4 l20,-10 l-8,-4 z" > </path> <!--บันได1--> <path fill="#607D8B" d="m-16 50 v2 l16 8 l30 -15 v-2 l-16 -8 l-30 15 l16 8 l30 -15 l-30 15 " > </path> <path fill="#8db4c7" d="m-16 50 l16,8 v2 l-16,-8 z" > </path> <path fill="#475a63" d="m14 51 l-16,8 v2 l16, -8 z" > </path> <!--บันได2--> <path fill="#56707d" d="m-12 48 v2 l12 6 l20 -10 v-2 l-12 -6 l-20 10 l12 6 l20 -10 l-20 10 " > </path> <path fill="#8db4c7" d="m-12 48 l12,6 v2 l-12,-6 z" > </path> <path fill="#475a63" d="m12 48 l-12,6 v2 l12, -6 z" > </path> <!--บันได3--> <path fill="#607D8B" d="m-8 46 v2 l8 4 l20 -10 v-2 l-8 -4 l-20 10 l8 4 l20 -10 l-20 10 " > </path> <path fill="#8db4c7" d="m-8 46 l8,4 v2 l-8,-4 z" > </path> <path fill="#475a63" d="m8 56 l-8,4 v2 l8, -4 z" > </path> <!-- หน้า --> <path 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 fill="#465a63" d="m0 0 l15 7 l75 -37 l-15 -7 l-75 37" > </path> <!-- กล่องหน้า--> <path 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 fill="#8db4c7" d="m31 42 v17 l20 10 v-17 z" > </path> <path fill="#465a63" d="m31 42 l20 10 l30 -15 l-20 -10 l-30 15 l30 -15 " > </path> <path 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(-130 100)"> <!-- พื้น --> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m140,62 v3 l30,15 v-3 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#546E7A" d="m170,77 v3 l30,-15 v-3 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#455A64" d="m140,62 l30,15 l30,-15 l-30,-15 l-30,15"/> <svg viewBox="0 0 200 200"> <!-- เสา1 --> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m144,52 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m147,63.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m144,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="m167,63.5 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m170,75 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m167,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="m190,52 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m193,63.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m190,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="m168,41 v10 l3,1.5 v-10 l-3,-1.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m171,52.5 l3,-1.5 v-10 l-3,1.5 v10"/> <path stroke="#f000" stroke-width="1" fill="#616161" d="m168,41 l3,1.5 l3,-1.5 l-3,-1.5 l-3,1.5"/> <!-- ชั้นสอง --> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m140,50 v3 l30,15 v-3 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#546E7A" d="m170,65 v3 l30,-15 v-3 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#455A64" d="m140,50 l30,15 l30,-15 l-30,-15 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#EEEEEE" d="m140,40 v10 l30,15 v-10 l-30,-15"/> <path stroke="#f000" stroke-width="1" fill="#E0E0E0" d="m170,55 v10 l30,-15 v-10 l-30,15"/> <path stroke="#f000" stroke-width="1" fill="#E0E0E0" d="m135,39.5 v3 l35,17.5 v-3 l-35,-17.5"/> <path stroke="#f000" stroke-width="1" fill="#BDBDBD" d="m170,57 v3 l35,-17.5 v-3 l-35,17.5"/> <path stroke="#f000" stroke-width="1" fill="#F5F5F5" d="m135,39.5 l35,17.5 l35,-17.5 l-35,-17.5 l-35,17.5"/> <!-- หลังคา --> <g transform="translate(150,40) scale(2)"> <path fill="#37474F" d="m0,0 l10,5 v-7.5 z"/> <path fill="#263238" d="m10,5 v-7.5 l10,2.5 z"/> <path fill="#546E7A" d="m0,0 l10,-5 v2.5 z"/> <path fill="#37474F" d="m20,0 l-10,-5 v2.5 z"/> </g> </svg></g></svg> </svg> </body> </html>