SVG Isometric Grid (Branch 6925) (Copy 6951) (Cop..
✨ นางสาวจุฑามาศ ชนาฐิติกุล
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#b39166; box-shadow:0 0 20px #0002; width:100%; } :root { --border: #c3ced7; --windows: #5385C6; --door: #444444; --border-left: #616364 ; --border-right: #545a5e ; --roof: #6b7176; --tree: #64995c; --clouds: #d0eaff; } </style> </head> <body> <svg viewBox="0 0 300 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> <defs> <linearGradient spreadMethod="pad" id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1;" /> <stop offset="44%" style="stop-color:rgb(31, 181, 243);stop-opacity:1;" /> <stop offset="100" style="stop-color:#7ac3ff;stop-opacity:1;" /> </linearGradient> </defs> <defs> <pattern id="footpath" width="8" height="8" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#e0e0e0" width="10" height="10" x="0" y="0"/> <rect fill="#e0e0e0" width="5" height="5" x="0" y="0"/> <rect fill="#d1d1d1" width="5" height="5" x="4" y="0"/> <rect fill="#d1d1d1" width="5" height="5" x="0" y="5"/> <!-- <rect fill="#C2C2C2" width="5" height="5" x="4" y="4"/> --> </pattern> </defs> <!-- !!!! หญ้า !!!! --> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5" > <rect width="100" height="100" fill="#8BC34A"/> <path stroke="#43A047" fill="transparent" stroke-linejoin="square" d="m1,0 l1,1 l-1,1 l1,1 m1,0 l1,1 l-1,1 l1,1" /> </pattern> </defs> <!-- <defs> <pattern id="build" width="10" height="100" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#7ab072" width="10" height="10" x="0" y="0"/> </pattern> </defs> --> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000" transform="scale(1.2)"/> <g transform="scale(1.5) translate(-32,0)"> <!-- <path d="M100, 10 v50 l-50,25 l50,25 l50,-25 l-50,-25 v-50 l50,25 v50 l-50,-25 v-50 l-50,25 v50" stroke="#0002" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> --> <!-- พื้น --> <rect width="300" height="300" fill="url(#gradient)" transform="rotate(-25 0 360) translate(50 0) skewX(39) "/> <rect width="500" height="500" fill="url(#grass)" transform="rotate(-26 0 360) translate(20 100) skewX(39.5) "/> <rect width="500" height="500" fill="#333333" transform="rotate(-25 0 360) translate(210 210) skewX(39) "/> <rect width="25" height="100" fill="url(#footpath)" transform="rotate(-25 0 360) translate(110 110) skewX(39) "/> <!-- ลายถนน --> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(239 225) skewX(39) "/> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(280 225) skewX(39) "/> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(315 225) skewX(39) "/> <!-- ชาน --> <!-- <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="scale(1) translate(44,67)"></path> --> <!-- <rect x="100.5" y="99.5" width="6.5" height="5" fill="#444444"></rect> <rect x="164.5" y="99.5" width="6.5" height="5" fill="#444444"></rect> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="#444444" stroke-width="0.2" transform="scale(1.2) translate(12.5,62)"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="var(--roof)" stroke-width="0.2" transform="scale(1.2) translate(12.5,58)"></path> --> <ellipse cx="126" cy="101" rx="28" ry="14" fill="#444444" /> <ellipse cx="125" cy="99" rx="28" ry="14" fill="#444494" /> <ellipse cx="123" cy="95" rx="28" ry="16" fill="#444444" /> <ellipse cx="122" cy="93" rx="28" ry="16" fill="#444494" /> <ellipse cx="119" cy="87" rx="30" ry="20" fill="#444444" /> <ellipse cx="118" cy="85" rx="30" ry="20" fill="#444494" /> <!-- พุ่มไม้บังทิพย์ (หลังตึกหลัก) --> <!-- <g transform="translate(-30,-24)"> --> <g transform="translate(-55,-90)"> <circle cx="117" cy="163" r="5" fill="#689F38"></circle> <circle cx="113" cy="165" r="5" fill="#1B5E20"></circle> <circle cx="115" cy="168" r="4" fill="#7CB342"></circle> <circle cx="110" cy="170" r="4" fill="#33691E"></circle> <circle cx="114" cy="172" r="4" fill="#43A047"></circle> <circle cx="116" cy="174" r="4" fill="#33691E"></circle> <circle cx="119" cy="167" r="4" fill="#1B5E20"></circle> <circle cx="121" cy="164" r="3" fill="#004D40"></circle> <circle cx="123" cy="170" r="4" fill="#1B5E20"></circle> <circle cx="122" cy="174" r="4" fill="#43A047"></circle> <circle cx="110" cy="167" r="1" fill="#d50000"></circle> <circle cx="113" cy="173" r="1.5" fill="#d50000"></circle> <circle cx="115" cy="163" r="1.3" fill="#d50000"></circle> <circle cx="116" cy="167" r="1.4" fill="#d50000"></circle> <circle cx="121" cy="165" r="1.5" fill="#d50000"></circle> <circle cx="124" cy="169" r="1.1" fill="#d50000"></circle> <circle cx="120" cy="173" r="1.3" fill="#d50000"></circle> </g> <!-- เมฆ --> <g transform="translate(0,-50) scale(0.7)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(3,-43) scale(0.5)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(-10,-26) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <!-- หมิว --> <path d="M99,67 v31 Q132,97 136,82 v-50" fill="var(--windows)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M65,51.5 v30 l36.2,18 v-30" fill="var(--windows)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- เสา --> <path d="M64,53 v35 Q63,88 70.5,88 v-35" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- <path d="M95,69 v31 Q94,105 101,103 v-31" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> --> <rect x="97" y="70" width="6.5" height="37" fill="var(--border)"></rect> <ellipse cx="100.2" cy="107" rx="3.3"ry="2" fill="var(--border)"></ellipse> <ellipse cx="67.2" cy="88" rx="3.3"ry="2" fill="var(--border)"></ellipse> <!-- พุ่มไม้บังทิพย์ (หน้าคอมม่อน) --> <!-- <g transform="translate(50,-20)"> --> <g transform="translate(25,-90)"> <circle cx="117" cy="163" r="5" fill="#33691E"></circle> <circle cx="113" cy="165" r="4" fill="#1B5E20"></circle> <circle cx="115" cy="168" r="5" fill="#7CB342"></circle> <circle cx="110" cy="170" r="5" fill="#33691E"></circle> <circle cx="114" cy="172" r="4" fill="#43A047"></circle> <circle cx="116" cy="174" r="4" fill="#33691E"></circle> <circle cx="119" cy="167" r="4" fill="#1B5E20"></circle> <circle cx="121" cy="164" r="5" fill="#558B2F"></circle> <circle cx="123" cy="170" r="5" fill="#1B5E20"></circle> <circle cx="122" cy="174" r="5" fill="#43A047"></circle> <circle cx="110" cy="167" r="1" fill="#d50000"></circle> <circle cx="113" cy="173" r="1.5" fill="#d50000"></circle> <circle cx="115" cy="163" r="1.3" fill="#d50000"></circle> <circle cx="116" cy="167" r="1.4" fill="#d50000"></circle> <circle cx="121" cy="165" r="1.5" fill="#d50000"></circle> <circle cx="124" cy="169" r="1.1" fill="#d50000"></circle> <circle cx="120" cy="173" r="1.3" fill="#d50000"></circle> </g> <!-- กลม --> <line x1="123" y1="50" x2="123" y2="95.7" stroke="white" stroke-width="0.3"></line> <line x1="128" y1="50" x2="128" y2="93.5" stroke="white" stroke-width="0.3"></line> <line x1="133" y1="50" x2="133" y2="88.8" stroke="white" stroke-width="0.3"></line> <line x1="108" y1="50" x2="108" y2="97.5" stroke="white" stroke-width="0.3"></line> <line x1="113" y1="50" x2="113" y2="97" stroke="white" stroke-width="0.3"></line> <line x1="118" y1="50" x2="118" y2="96" stroke="white" stroke-width="0.3"></line> <path d="M104,67 v5 Q137,75 138,58 v" fill="var(--border-right)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <circle cx="55" cy="37" r="25" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-10 50 100) translate(47.5 50) skewX(38.5) scale(1 0.5)" /> <!-- ประตูข้าง -->/ <line x1="75" y1="50" x2="75" y2="86.5" stroke="white" stroke-width="0.3"></line> <line x1="80" y1="50" x2="80" y2="89" stroke="white" stroke-width="0.3"></line> <line x1="85" y1="50" x2="85" y2="91.5" stroke="white" stroke-width="0.3"></line> <line x1="90" y1="50" x2="90" y2="94" stroke="white" stroke-width="0.3"></line> <line x1="95" y1="50" x2="95" y2="96.5" stroke="white" stroke-width="0.3"></line> <g transform="translate(213,8) scale(-1,0.9)"> <path d="M120,76 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="#7dd2fa" stroke="#7dd2fa" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1,-1.1)"/> </g> <!-- <path d="M79,74 v14.4 l10,5 v-14.4" stroke="none" stroke-width="0.5"></path> --> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="var(--border-right)"></path> <path d="M79,88.3 l-3,1.9 l-10,10 l10,5 l10,-10 l3,-1.9 l-10,-5" fill="var(--roof)"></path> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="var(--border-right)" transform="translate(10,5)"></path> <g transform="translate(10,5)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <g transform="translate(-0.1,0)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <!-- ประตู --> <path d="M120,76 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="#7dd2fa" stroke="#7dd2fa" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <!-- ชั้น2 --> <g transform="translate(0,12)"> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="var(--windows)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <g> <line x1="68" y1="30" x2="68" y2="42" stroke="white" stroke-width="0.2"></line> <line x1="73" y1="30" x2="73" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="78" y1="30" x2="78" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="83" y1="30" x2="83" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="88" y1="30" x2="88" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="93" y1="30" x2="93" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="100" y1="30" x2="100" y2="58" stroke="white" stroke-width="0.2"></line> <line x1="107" y1="30" x2="107" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="112" y1="30" x2="112" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="117" y1="30" x2="117" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="122" y1="30" x2="122" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="127" y1="30" x2="127" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="132" y1="30" x2="132" y2="42" stroke="white" stroke-width="0.2"></line> </g> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="var(--border-left)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="var(--border-right)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> <!-- พุ่มไม้บังทิพย์ (ข้างรันเวย์) --> <g transform="translate(-26,-69)"> <circle cx="117" cy="163" r="4" fill="#33691E"></circle> <circle cx="113" cy="165" r="4" fill="#1B5E20"></circle> <circle cx="115" cy="168" r="4" fill="#7CB342"></circle> <circle cx="110" cy="170" r="4" fill="#33691E"></circle> <circle cx="114" cy="172" r="4" fill="#43A047"></circle> <circle cx="116" cy="174" r="4" fill="#33691E"></circle> <circle cx="119" cy="167" r="4" fill="#1B5E20"></circle> <circle cx="121" cy="164" r="4" fill="#558B2F"></circle> <circle cx="123" cy="170" r="4" fill="#1B5E20"></circle> <circle cx="122" cy="174" r="4" fill="#43A047"></circle> <circle cx="110" cy="167" r="1" fill="#d50000"></circle> <circle cx="113" cy="173" r="1.5" fill="#d50000"></circle> <circle cx="115" cy="163" r="1.3" fill="#d50000"></circle> <circle cx="116" cy="167" r="1.4" fill="#d50000"></circle> <circle cx="121" cy="165" r="1.5" fill="#d50000"></circle> <circle cx="124" cy="169" r="1.1" fill="#d50000"></circle> <circle cx="120" cy="173" r="1.3" fill="#d50000"></circle> </g> <!-- ชั้นสาม --> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="var(--windows)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <g> <line x1="68" y1="30" x2="68" y2="42" stroke="white" stroke-width="0.2"></line> <line x1="73" y1="30" x2="73" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="78" y1="30" x2="78" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="83" y1="30" x2="83" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="88" y1="30" x2="88" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="93" y1="30" x2="93" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="100" y1="30" x2="100" y2="58" stroke="white" stroke-width="0.2"></line> <line x1="107" y1="30" x2="107" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="112" y1="30" x2="112" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="117" y1="30" x2="117" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="122" y1="30" x2="122" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="127" y1="30" x2="127" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="132" y1="30" x2="132" y2="42" stroke="white" stroke-width="0.2"></line> </g> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="gray" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="var(--border-left)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="var(--border-right)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="black" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> --> <!-- หลังคาส่วนนูน --> <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="var(--roof)" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> --> <!-- <circle cx="117" cy="163" r="4" fill="#33691E"></circle> <circle cx="113" cy="165" r="4" fill="#1B5E20"></circle> <circle cx="115" cy="168" r="4" fill="#7CB342"></circle> <circle cx="110" cy="170" r="4" fill="#33691E"></circle> <circle cx="114" cy="172" r="4" fill="#43A047"></circle> <circle cx="116" cy="174" r="4" fill="#33691E"></circle> <circle cx="119" cy="167" r="4" fill="#1B5E20"></circle> <circle cx="121" cy="164" r="4" fill="#558B2F"></circle> <circle cx="123" cy="170" r="4" fill="#1B5E20"></circle> <circle cx="122" cy="174" r="4" fill="#43A047"></circle> <circle cx="110" cy="167" r="1" fill="#d50000"></circle> <circle cx="113" cy="173" r="1.5" fill="#d50000"></circle> <circle cx="115" cy="163" r="1.3" fill="#d50000"></circle> <circle cx="116" cy="167" r="1.4" fill="#d50000"></circle> <circle cx="121" cy="165" r="1.5" fill="#d50000"></circle> <circle cx="124" cy="169" r="1.1" fill="#d50000"></circle> <circle cx="120" cy="173" r="1.3" fill="#d50000"></circle> --> </svg> </body> </html>