SVG Isometric Grid (Copy 6915)
✨ นายธนเดช แซ่ฉั่ว
<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"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4" > <rect width="100" height="100" fill="#C6FF00"/> <path stroke="#AEEA00" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </pattern> <pattern id="foot" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> <rect fill="#cb4154" width="4" height="4"/> </pattern> <pattern id="ground" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4"> <rect fill="#FFCCBC" width="4" height="4"/> </pattern> <g id="เสา"> <ellipse fill="#EEEEEE" cx="2.5" cy="0" rx="2.5" ry="1.5"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m0 0 v-20 l2.5,1.25 v20"/> <ellipse fill="#BDBDBD" cx="2.5" cy="0" rx="2.5" ry="1.5"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m2.5 1.25 v-20 l2.5,-1.25 v20"/> </g> <g id="เส้นถนน"> <path stroke="#f00" stroke-width="0" fill="#E6E6E6" d="m0 0 l1,-0.5 l5,2.5 l-1,0.5"/> </g> <g id="เส้นถนนเฉียง"> <path stroke="#f00" stroke-width="0" fill="#E6E6E6" d="m0 0 l5,-2.5 l1,0.5 l-5,2.5"/> </g> <g id="เส้นจอดรถ"> <path stroke="#f00" stroke-width="0" fill="#E6E6E6" d="m0 0 l1,-0.5 10.15,5 l-1,0.5"/> </g> <g id="ต้นไม้1"> <!--ต้นไม้พุ่ม--> <path stroke="#f00" stroke-width="0" fill="#786027" d="m0 0 l0.25,-6 l0.5,0 l0,6.25"/><!--ต้น--> <path stroke="#f00" stroke-width="0" fill="#685723" d="m0.75 0.25 l0,-6 l0.5,0 l0.25,5.75"/> <circle cx="0.5" cy="-7" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <!--ใบกลางแรก--> <circle cx="-0.5" cy="-7.5" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="-1" cy="-7" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="-1.5" cy="-7" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="1.5" cy="-7.5" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="2" cy="-7" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="2.5" cy="-7" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="0.5" cy="-10" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /><!--ใบกลางสอง--> <circle cx="-1.5" cy="-9" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="2.5" cy="-9" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="0.5" cy="-11" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /><!--ใบกลางสาม--> <circle cx="-0.25" cy="-10.5" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> <circle cx="1.25" cy="-10.5" r="1.5" stroke="#f00" stroke-width="0" fill="#185937" /> </g> <g id="ต้นไม้2"> <!--ต้นไม้เหลี่ยม--> <path stroke="#f00" stroke-width="0" fill="#786027" d="m0 0.25 l0,-6 l-0.5,0 l-0.25,5.75"/><!--ต้น--> <path stroke="#f00" stroke-width="0" fill="#685723" d="m0 0.25 l0,-6 l0.5,0 l0.25,5.75"/> <polygon points="0,-4 -3.5,-5.25 0,-16" style="fill:#185937;stroke-width:0" /><!--ใบ--> <polygon points="0,-4 3.5,-5.25 0,-16" style="fill:#0f3a28;stroke-width:0" /> </g> <g id="ต้นไม้3"> <path stroke="#f00" stroke-width="0" fill="#786027" d="m0 0.25 l0,-6 l-0.5,0 l-0.25,5.75"/><!--ต้น--> <path stroke="#f00" stroke-width="0" fill="#685723" d="m0 0.25 l0,-6 l0.5,0 l0.25,5.75"/> <ellipse cx="0" cy="-7" rx="5" ry="3"style="fill:#0f3d26;stroke-width:0" /><!--ใบล่าง--> <rect x="-5" y="-9.75" width="10" height="3"style="fill:#0f3d26;stroke-width:0;" /> <ellipse cx="0" cy="-9.5" rx="5" ry="3"style="fill:#1f5e3f;stroke-width:0" /> <ellipse cx="0" cy="-10" rx="4" ry="2"style="fill:#0f3d26;stroke-width:0" /><!--ใบกลาง--> <rect x="-4" y="-13" width="8" height="3"style="fill:#0f3d26;stroke-width:0;" /> <ellipse cx="0" cy="-12.5" rx="4" ry="2"style="fill:#1f5e3f;stroke-width:0" /> <ellipse cx="0" cy="-13" rx="3" ry="1"style="fill:#0f3d26;stroke-width:0" /><!--ใบบน--> <rect x="-3" y="-15.25" width="6" height="2.5"style="fill:#0f3d26;stroke-width:0;" /> <ellipse cx="0" cy="-15.25" rx="3" ry="1"style="fill:#1f5e3f;stroke-width:0" /> </g> <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> <svg viewBox="0 0 100 100" width="200" height="200"> <g transform="translate(0 0)"> <rect width="100" height="100" fill="url(#grass)"/> </g> <!-- พื้น --> <g><path fill="url(#ground)"d="m0 70 L70 35 L105 52.5 L40 90"/></g> <g><path fill="url(#foot)"d="m0 70 L40 90 l5.5 -2.8 l-40 -20"/></g> <g><path fill="url(#foot)"d="m40 90 L120 50 l-4.5 -2.6 L40 85"/></g> <!--ตึกเหลี่ยม--> <g transform="scale(0.8) translate(1 19)"> <svg> <g transform="translate(30 35)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m0 20 v-30 l20,10 v30"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m20 30 v-30 l10,-5 v30"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -10 l20,10 l10,-5 l-20,-10"/> <path fill="#01579B" d="m23 1 l5 -2.5 v5 l-5 2.5"/> <path fill="#01579B" d="m23 8.5 l5 -2.5 v5 l-5 2.5"/> <path fill="#01579B" d="m23 16 l5 -2.5 v5 l-5 2.5"/> </g> </svg> <!--ตึกกลม --> <svg> <g transform="translate(33, 50)"> <ellipse fill="white" cx="-0.5" cy="12" rx="12.6" ry="6"/> <path fill="white" d="m-13,13 h25 v-16 h-25"/> <ellipse cx="-0.5" cy="-4" rx="12.5" ry="4" fill="#dadada"/> <ellipse cx="-0.5" cy="-4" rx="9" ry="3.3" fill="#999"/> <path fill="#1976D2" d="m-13,8 h25 v-6 h-25"/> <ellipse cx="-0.5" cy="8.7" rx="12.6" ry="5" fill="#1976D2"/> <ellipse cx="-0.5" cy="2.4" rx="12.5" ry="3." fill="white"/> </g> </svg> <!-- เสา --> <svg> <g transform="translate(20 70)"> <use href="#เสา" x="3" y="0"/> <use href="#เสา" x="-11" y="-5"/> </g> </svg> <!-- ตึกเหลี่ยมเล็ก --> <svg> <g transform="translate(10 35)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-5 10 v-10 l20,10 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m15 20 v-10 l22.5,-11.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#757575" d="m-5 0 l20,10 l23,-11.5 l-20,-10"/> <path fill="#01579B" d="m15 11.25 l22.5 -11 v2.5 l-22.5 11"/> <path fill="#01579B" d="m15 16 l22.5 -11 v2.5 l-22.5 11"/> <path fill="#03A9F4" d="m-5 1.25 l20 10 v2.5 l-20 -10"/> <path fill="#03A9F4" d="m-5 6 l20 10 v2.5 l-20 -10"/> </g> </svg> <!-- น้ำพุ --> <svg> <g transform="translate(46 65)"> <path stroke="#f00" stroke-width="0" fill="#26C6DA" d="m0 2.5 l10 5 l15,-7.5 l-10,-5 z"/> <path fill="black" d="m0 2.25 l10 5 v1.5 l-10 -5"/> <path fill="black" d="m10 7.25 l15 -7.5 v1.5 l-15 7.5"/> </g> <g transform="translate(46 65)"> <!--32,74--> <animate attributeName="opacity" values="1;0;1" dur="4s" repeatCount="indefinite" /> <path fill="#42A5F5" d="m4 3 v-10 h-2" stroke-linejoin="round" stroke="#42A5F5" stroke-width="0.5" opacity="1"/> <path fill="#42A5F5" d="m11 6 v-10 h-2" stroke-linejoin="round" stroke="#42A5F5" stroke-width="0.5" opacity="1"/> <path fill="#42A5F5" d="m20 1 v-10 h-2" stroke-linejoin="round" stroke="#42A5F5" stroke-width="0.5" opacity="1"/> <path fill="#42A5F5" d="m15 -2 v-10 h-2" stroke-linejoin="round" stroke="#42A5F5" stroke-width="0.5" opacity="1"/> </g> </svg> </g> </svg> <!-- โรงอาหาร --> <!-- พื้นชั้นล่าง --> <svg> <g transform="translate(100 90)"> <path stroke="#000" stroke-width="0.1" fill="#4957c9" d="m0 0 v1.4 l30 15 l30 -15 v-1.5 l-30 -15 " /> </g> </svg> <!-- พื้น ชั้น2--> <svg> <g transform="translate(100 83)"> <path stroke="#000" stroke-width="0.1" fill="#4550a8" d="m0 0 v1.4 l30 15 l30 -15 v-1.5 l-30 -15 " /> </g> </svg> <!-- บรรได --> <g transform="translate(130 85)"> <ellipse fill="#eddffe" cx="0" cy="13" rx="8" ry="5"/> <path fill="#eddff0" d="m-8,12 h16 v-16 h-10 h-6 "/> <ellipse cx="0" cy="-3" rx="8" ry="4" fill="#dadada"/> <ellipse cx="0" cy="-3" rx="7" ry="3.3" fill="#999"/> </g> <!--เสา--> <svg> <g transform="translate(100 90)"> <use href="#เสา" x="27" y="14"/> <use href="#เสา" x="1" y="1"/> <use href="#เสา" x="28" y="-13"/> <use href="#เสา" x="55" y="0"/> </g> </svg> <!-- หลังคา --> <svg> <g transform="translate(100 65)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-5 12 v-10 l30,15 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m25 27 v-10 l37,-18 v10"/> <path stroke="#f00" stroke-width="0" fill="#757575" d="m-5 2, l30,15 l37,-18 l-31,-15"/> </g> </svg> <!--แต้มบนหลังคา --> <svg> <g transform="translate(115.5 65.5)"> <path stroke="#f00" stroke-width="0" fill="#5a5b63" d="m-2 0 l14,7 l16,-8 l-14,-7"/> </g> </svg> <!--ชั้น2 --> <svg> <g transform="translate(105 82)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-5 5 v-5 l30,15 v5"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m25 19 v-5 l30,-15 v5"/> </g> </svg> <!--ถนนระหว่างอาคาร--> <svg> <g transform="translate(97.5 111)"> <path stroke="#f00" stroke-width="0" fill="#353535" d="m0 0 l0,-15 l55,28 l-15,7.5"/> </g> </svg> <!--ที่จอดรถ--> <svg> <g transform="translate(130 127)"> <path stroke="#f00" stroke-width="0" fill="#353535" d="m5 -11 l6,-3 l-10,-5 l31,-15.5 l36.5,18.5 l-31,15.5 l-10,-5 l-5.5,2.75"/> </g> </svg> <svg> <use href="#เส้นถนน" x="98" y="104"/> <use href="#เส้นถนน" x="108" y="109"/> <use href="#เส้นถนน" x="118" y="114"/> <use href="#เส้นถนน" x="128" y="119"/> <use href="#เส้นถนนเฉียง" x="140" y="121"/> <use href="#เส้นจอดรถ" x="137" y="105"/> <use href="#เส้นจอดรถ" x="143" y="102"/> <use href="#เส้นจอดรถ" x="149" y="99"/> <use href="#เส้นจอดรถ" x="155" y="96"/> <use href="#เส้นจอดรถ" x="164" y="118.1"/> <use href="#เส้นจอดรถ" x="170" y="115.1"/> <use href="#เส้นจอดรถ" x="176" y="112.1"/> <use href="#เส้นจอดรถ" x="182" y="109.1"/> </svg> <!--ทางเดิน--> <svg> <g transform="translate(68 162.75)"> <path stroke="#f00" stroke-width="0" fill="#C2C2C2" d="m0 0 l60,-30 l8,4.25 l-60 30"/> </g> </svg> <!--ต้นไม้--> <svg> <use href="#ต้นไม้1" x="165" y="94"/> <use href="#ต้นไม้1" x="135" y="114"/> <use href="#ต้นไม้1" x="120" y="106"/> <use href="#ต้นไม้1" x="158" y="125"/> <use href="#ต้นไม้1" x="120" y="148"/> <use href="#ต้นไม้1" x="58" y="155"/> <use href="#ต้นไม้2" x="104" y="120"/> <use href="#ต้นไม้2" x="174" y="97"/> <use href="#ต้นไม้2" x="90" y="151"/> <use href="#ต้นไม้2" x="125" y="132"/> <use href="#ต้นไม้2" x="148" y="129"/> <use href="#ต้นไม้2" x="138" y="135"/> <use href="#ต้นไม้3" x="70" y="155"/> <use href="#ต้นไม้3" x="190" y="106"/> <use href="#ต้นไม้3" x="116" y="129"/> <use href="#ต้นไม้3" x="110" y="153"/> <use href="#ต้นไม้3" x="95" y="161"/> <use href="#ต้นไม้3" x="106" y="99"/> </svg> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>