SVG Isometric Grid (Branch 6923) (Copy 6974) (Bra..
✨ นายอภิบุญ สมศรี
<html> <head> <title>Let's Start </title> <style> <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 180 170"> <defs> <pattern id="street" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4" > <rect width="100" height="100" fill="gray"/> </pattern> <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="sea" viewBox="0 0 10 10" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" > <rect width="100" height="100" fill="#4FC3F7"/> </pattern> <pattern id="concrete" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="5"> <rect fill="#3E2723" width="10" height="10"/> <ellipse fill="#fff1" cx="4" cy="2" rx="2" ry="1"/> <ellipse fill="#fff1" cx="7" cy="4" rx="1" ry=".6"/> <path stroke="#0003" stroke-width=".2" d="m0,0 l10,5"/> <path stroke="#0003" stroke-width=".2" d="m0,5 l10,-5"/> </pattern> <path id="tile" d="m0 0 l5,-2.5 l5,2.5 l-5,2.5,z"/> <g id="base" transform=" scale(2.5)"> <path stroke="#f000" stroke-width="1" d="m2 0 v0.5 l5,2.5 l5 -2.5 v-0.5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m2 0 l5,2.5 v0.5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m7 2.5 l5,-2.5 v0.5 l-5,2.5 z" /> </g> <path id="tile" d="m0 0 l5,-2.5 l5,2.5 l-5,2.5,z"/> <g id="wall" transform=" scale(2.5)"> <path stroke="#d9d6d2" stroke-width="2" fill="" d="m2 0 l5,2.5 v0.5 l-5,-2.5 z" /> </g> <g transform="translate(14 70)"> <g fill="#EEeEEE" transform=" scale(1)"> <use href="#เสาสูง" x="30" y="27.5"/></g></g> <g id="footpath" transform=" scale(2)"> <path stroke="#f000" stroke-width="1" fill="#f7aa83" d="m2 0 v0.2 l5,2.5 l5 -2.5 v-0.5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#f7712f" d="m2 0 l5,2.5 v0.5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#d94902" d="m7 2.5 l5,-2.5 v0.5 l-5,2.5 z" /> </g> <g id="base2" transform=" scale(0.5)" fill="white"> <path stroke="#f000" stroke-width="1" d="m0 0 v5 l5,2.5 l5 -2.5 v-5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> /> </g> <g id="หน้าต่าง1"> <path stroke="#f000" stroke-width="1" fill="#7D8B99 " d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> </g> <g id="หน้าต่าง2"> <path stroke="#f000" stroke-width="1" fill="#6B788E " d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> </g> <g id="ตึก"> <path stroke="#f000" stroke-width="z" d="m0 0 v5 l5,2.5 l5 -2.5 v-5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#7caabd" d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> <use href="#หน้าต่าง2" x="3" y="10" transform=" scale(0.2)"/> <use href="#หน้าต่าง2" x="11" y="14" transform=" scale(0.2)"/> <path stroke="#f000" stroke-width="1" fill="#a0c2cf" d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> <use href="#หน้าต่าง1" x="15" y="10" transform=" scale(0.3)"/> <use href="#หน้าต่าง1" x="19.9" y="7.5" transform=" scale(0.3)"/> </g> <!-----------------ฐาน ----------------------> <g id="ฐาน"> <path stroke="#f000" stroke-width="1" d="m0 0 v0.5 l5,2.5 l5 -2.5 v-0.5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v0.5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v0.5 l-5,2.5 z" /> </g> <g id="เสาสูง"> <path stroke="#f00" stroke-width="0" fill="#dddddd" d="m0 0 v-20 l2.5,1.25 v20"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m2.5 1.25 v-20 l2.5,-1.25 v20"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -20 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> </g> <g id="รั้ว"> <path stroke="#f00" stroke-width="0" fill="#dddddd" d="m0 77 v7 l2 0.9 v-7"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m2 78 v7 l2 -0.9 v-7"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 77.1 l2 0.9 l2 -0.9 l-2 -0.9"/> </g> </defs> <svg viewBox="0 0 130 130" width="200" height="200"> <!-- ground --> <g transform="translate(0 0)"> <rect width="200" height="200" fill="url(#grass)"/> <path fill="url(#concrete)" d="m0 20 l120 58 l-130 90 z" > </path> <path fill="url(#concrete)" d="m70 60 l140 60 l-130 80 z" > </path> </path> <path fill="url(#street)" d="m0 77 l140 70 l-140 70 z" > </path> <path stroke="#f000" stroke-width="1" fill="#fff" d="m1 100 l8 4 l4 -2 l-8 -4" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill:#181a1b; --darkreader-inline-stroke:rgba(255, 26, 26, 0);"></path> <path stroke="#f000" stroke-width="1" fill="#fff" d="m25 110 l8 4 l4 -2 l-8 -4" data-darkreader-inline-fill="" data-darkreader-inline-stroke="" style="--darkreader-inline-fill:#181a1b; --darkreader-inline-stroke:rgba(255, 26, 26, 0);"></path> </g> <svg> <!---footpath---> <g transform="translate(7 80.6)"> <g fill="#EEeEEE" transform=" scale(1)"> <use href="#footpath" x="-21" y="0.5"/> <use href="#footpath" x="-20" y="1"/> <use href="#footpath" x="-10" y="6"/> <use href="#footpath" x="0" y="11"/> <use href="#footpath" x="10" y="16"/> <use href="#footpath" x="20" y="21"/> <use href="#footpath" x="30" y="25.9"/> <use href="#footpath" x="40" y="30.9"/> </g> </g> <!---wall---> <!--- พื้น ---> <g transform="translate(0 70.6)"> <g fill="#EEeEEE" transform=" scale(2)"> <use href="#base" x="0" y="0"/> </g> </g> <!---โรงอาหาร-----> <g transform="translate(0 0)"> <g fill="#EEeEEE" transform=" scale()"> <use href="#รั้ว" x="41.9" y="13.8"/> <use href="#รั้ว" x="10.9" y="-1.2"/> <use href="#wall" x="-9" y="71"/> <use href="#wall" x="22" y="86.4"/> <use href="#wall" x="10.4" y="80.6"/> <use href="#wall" x="41" y="95.6"/> <use href="#wall" x="58" y="104.1"/> </g> </g> <!-- เสา --> <svg> <g transform="translate(37 65)"> <g transform="translate(9 45)"> <g fill="#EEeEEE" transform=" scale(2.5)"> <use href="#ฐาน" x="13" y="-8.5"/> <use href="#ฐาน" x="18" y="-6"/> <use href="#ฐาน" x="8" y="-6"/> <use href="#ฐาน" x="13" y="-3.5"/> </g> </g> <!-------เสา---------> <g transform="translate(30 45)"> <g transform=" scale(0.65)"> <use href="#เสาสูง" x="70" y="-23"/> <use href="#เสาสูง" x="34" y="-40"/> <use href="#เสาสูง" x="34.5" y="-24"/> <!--<use href="#เสาสูง" x="15.5" y="-14.8"/> --> <use href="#เสาสูง" x="-1.5" y="-23"/> <use href="#เสาสูง" x="34.6" y="-5.2"/> </g> </g> <!---------ตึก-----------> <g transform="translate(6.5 28)"> <g fill="#EEEEEE" transform=" scale(2.5)"> <use href="#ตึก" x="14" y="-10.5"/> <use href="#ตึก" x="19" y="-8"/> <use href="#ตึก" x="9" y="-8"/> <use href="#ตึก" x="14" y="-5.5"/> </g> </g> <g transform="translate(40) "> <g transform=" scale(0.55)"> <ellipse fill="#BDBDBD" cx="" cy="13" rx="8" ry="4"/> <path fill="#BDBDBD" d="m-8,13 h16 v-10 h-10 h-6 "/> <ellipse cx="0" cy="3" rx="8" ry="4" fill="#dddddd"/> <ellipse cx="0" cy="3" rx="7" ry="3.3" fill="#999"/> </g> </g> </svg> </svg><!---บล็อคฝั่งซ้ายแถวหลัง---> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="12" y="20.4"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="12" y="18"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="12" y="15.6"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="10" y="11.8"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="10" y="9.8"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="12" y="13.2"> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="12" y="10.8"> </g> <g transform="translate(0 0)"> <g fill="#EEeEEE" transform=" scale(5.5)"> <use href="#base2" x="3" y="8.9"/> <use href="#base2" x="3" y="8"/> <use href="#base2" x="3" y="7.4"/> </g></g> <!---บล็อคใหญ่ข้างหน้า---> <g transform="translate(0 0)"><g fill="#EEeEEE" transform=" scale(5.5)"> <use href="#base2" x="1.82" y="10.4"/> <use href="#base2" x="1.82" y="9.5"/> <use href="#base2" x="1.82" y="8"/> </g> <!--บล็อคกลางล่างสุด--> <g transform="translate(-34 116.2)"><g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="25.8" y="-17.1"/> </g> </g> <!---บล็อคขวาล่างสุด---> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="28.3" y="-14.98"/> </g> </g> <!----บล็อคหลัง----> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="25.8" y="-19.5"/> </g> </g> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="25.8" y="-21.5"/> </g> </g> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="25.8" y="-23.14"/> </g> </g> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="25.8" y="-23.14"/> </g> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="14.5" y="13.5"/> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="14.5" y="12"/> </g> <!-------เสา---------> <g transform="translate(30 45)"> <g transform=" scale(0.65)"> <use href="#เสาสูง" x="-5" y="52.4"/> <use href="#เสาสูง" x="26.5" y="46.7"/> <use href="#เสาสูง" x="5.5" y="57.5"/> <use href="#เสาสูง" x="17.5" y="51.5"/> <use href="#เสาสูง" x="-5" y="42.4"/> <use href="#เสาสูง" x="26.5" y="39.7"/> <use href="#เสาสูง" x="5.5" y="51.5"/> <use href="#เสาสูง" x="17.5" y="44.5"/> </g></g> <!---ชั้นลอย---> <g transform="translate(0 -1.3)"><g fill="#EEeEEE" transform=" scale(0.9)"> <use href="#base" x="33.9" y="67.7"/> <use href="#base" x="33.9" y="66.7"/> <use href="#base" x="33.9" y="65.7"/> <use href="#base" x="33.9" y="64.7"/> <use href="#base" x="33.9" y="63.7"/> <use href="#base" x="33.9" y="62.7"/> <use href="#base" x="33.9" y="61.7"/> <use href="#base" x="33.9" y="60.7"/> <use href="#base" x="21.5" y="74"/> <use href="#base" x="21.5" y="73"/> <use href="#base" x="21.5" y="72"/> <use href="#base" x="21.5" y="71"/> <use href="#base" x="21.5" y="70"/> <use href="#base" x="21.5" y="69"/> <use href="#base" x="21.5" y="68"/> <use href="#base" x="21.5" y="67"/> </g> </g> <!---บรรได----> <g transform="translate(16 87.5)"> <g fill="#EEeEEE" transform=" scale(0.7)"> <use href="#base" x="33" y="-9.5"/> </g> </g> <g transform="translate(18 85.6)"> <g fill="#EEeEEE" transform=" scale(0.6)"> <use href="#base" x="37" y="-10"/> </g> </g> <g transform="translate(22 84.6)"> <g fill="#EEeEEE" transform=" scale(0.5)"> <use href="#base" x="40" y="-12"/> </g> </g> <!-- common --> <g transform="translate(-34 116.2)"> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x=".5" y="-20.2"/> </g> </g> <!---บล็อคขวากลาง---> <g transform="translate(-34 116.2)"><g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="28.3" y="-17.1"/> </g> </g> <g transform="translate(-34 116.2)"><g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="28.3" y="-19.5"/> </g> </g> <!---บล็อคกลางบนสุด----> <g transform="translate(-34 116.2)"><g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="28.3" y="-21.9"/> </g> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="17" y="14.6"/> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="17" y="13.2"/> </g> <!----block----> <g transform="translate(-34 116.2)"><g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="28.3" y="-19.5"/> </g> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="17" y="17"/> </g> <g fill="#EEeEEE" transform=" scale(3)"> <use href="#base2" x="17" y="15.6"/> </g> </svg> <g transform="translate(20 70)"> <use href="#เสา" x="60" y="0"/> <use href="#เสา" x="65" y="0"/> <use href="#เสา" x="5" y="0"/> </g> </svg> </svg> </svg> </body> </html>