SVG Isometric Grid (Branch 7079) (Copy 7101)
✨ นางสาวบุษยมาส อวะภาค
<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 200 200"> <defs> <pattern id="street" viewBox="0 0 5 5" patternUnits="userSpaceOnUse" x="0" y="0" width="1" height="1" > <rect width="10" height="10" 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="#B2FF59"/> <path stroke="#00C853" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </pattern> <pattern id="concrete" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="5"> <rect fill="#6C6C6C" width="10" height="10"/> <ellipse fill="#4A4A4A" cx="4" cy="3" rx="2" ry="1"> <animate attributeName="fill" values="#4A4A4A;#363D45;#1C2833;#424949 " dur="5s" repeatCount="indefinite" /></ellipse> <ellipse fill="#7B7D7D" cx="7" cy="4" rx="1" ry=".6"> <animate attributeName="cx" values=" 6; 8; 8; 8; 6" dur="4s" repeatCount="indefinite" /> <animate attributeName="cy" values=" 3; 2; 2; 2; 3" dur="1s" repeatCount="indefinite" /> </ellipse> <rect fill="#3A3A3A" width="2" height="1"/> <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="" fill="" d="m2 0 l5,2.5 v0.5 l-5,-2.5z" /> </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" /> <use href="#หน้าต่าง2" x="5" y="13" transform=" scale(0.2)"/> <use href="#หน้าต่าง2" x="11" y="16" transform=" scale(0.2)"/> <use href="#หน้าต่าง1" x="33" y="9" transform=" scale(0.2)"/> <!-- <use href="#หน้าต่าง1" x="30" y="14.5" transform=" scale(0.2)"/> --> </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> <g id="tree2" transform=" scale(0.8)"> <path fill="#82653b" d="M15.7 39.1 L16.6 40.2 L17.4 39.5 L17.4 37.5 Z"></path> <path fill="#937141" d="M15.7 39.1 L17.4 37.5 L16.0 35.7 Z"></path> <path fill="#735b39" d="M16.0 35.7 L17.4 37.5 L17.4 32.7 L16.1 33.9 Z"></path> <path fill="#7f6437" d="M17.4 32.7 L16.1 33.9 L16.3 30.9 L17.4 31.9 Z"></path> <path fill="#735934" d="M16.3 30.9 L17.4 31.9 L17.4 29.0 L16.4 30.1 Z"></path> <path fill="#947242" d="M17.4 29.0 L16.4 30.1 L16.5 28.3 L17.4 28.4 Z"></path> <path fill="#1D8348" d="M14.1 27.9 L18.2 28.6 L21.8 26.2 L16.7 22.9 Z"></path> <path fill="#239B56" d="M21.8 26.2 L16.7 22.9 L19.5 22.9 L23.4 21.9 Z"></path> <path fill="#28B463" d="M19.5 22.9 L23.4 21.9 L19.3 17.5 Z"></path> <path fill="#33DE7B" d="M19.5 22.9 L19.3 17.5 L14.6 17.3 L16.7 22.9 Z"></path> <path fill="#2DC56D" d="M16.7 22.9 L14.6 17.3 L10.8 21.5 Z"></path> <path fill="#27AE60" d="M16.7 22.9 L14.1 27.9 L11.1 25.7 L10.8 21.5 Z"></path> </g> <g id="tree" transform=" scale(0.8)"> <path fill="#82653b" d="M15.7 39.1 L16.6 40.2 L17.4 39.5 L17.4 37.5 Z"></path> <path fill="#937141" d="M15.7 39.1 L17.4 37.5 L16.0 35.7 Z"></path> <path fill="#735b39" d="M16.0 35.7 L17.4 37.5 L17.4 32.7 L16.1 33.9 Z"></path> <path fill="#7f6437" d="M17.4 32.7 L16.1 33.9 L16.3 30.9 L17.4 31.9 Z"></path> <path fill="#735934" d="M16.3 30.9 L17.4 31.9 L17.4 29.0 L16.4 30.1 Z"></path> <path fill="#947242" d="M17.4 29.0 L16.4 30.1 L16.5 28.3 L17.4 28.4 Z"></path> <path fill="#6B8034" d="M14.1 27.9 L18.2 28.6 L21.8 26.2 L16.7 22.9 Z"></path> <path fill="#748A3D" d="M21.8 26.2 L16.7 22.9 L19.5 22.9 L23.4 21.9 Z"></path> <path fill="#88A147" d="M19.5 22.9 L23.4 21.9 L19.3 17.5 Z"></path> <path fill="#A1B960" d="M19.5 22.9 L19.3 17.5 L14.6 17.3 L16.7 22.9 Z"></path> <path fill="#98B05A" d="M16.7 22.9 L14.6 17.3 L10.8 21.5 Z"></path> <path fill="#94AE4D" d="M16.7 22.9 L14.1 27.9 L11.1 25.7 L10.8 21.5 Z"></path> </g> <g id="พุ่ม"> <path fill="#6B8034" d="M14.1 27.9 L18.2 28.6 L21.8 26.2 L16.7 22.9 Z"></path> <path fill="#748A3D " d="M21.8 26.2 L16.7 22.9 L19.5 22.9 L23.4 21.9 Z"></path> <path fill="#88A147 " d="M19.5 22.9 L23.4 21.9 L19.3 17.5 Z"></path> <path fill="#A1B960" d="M19.5 22.9 L19.3 17.5 L14.6 17.3 L16.7 22.9 Z"></path> <path fill="#98B05A" d="M16.7 22.9 L14.6 17.3 L10.8 21.5 Z"></path> <path fill="#94AE4D " d="M16.7 22.9 L14.1 27.9 L11.1 25.7 L10.8 21.5 Z"></path> </g> <g id="พุ่ม2"> <path fill="#1D8348" d="M14.1 27.9 L18.2 28.6 L21.8 26.2 L16.7 22.9 Z"></path> <path fill="#239B56" d="M21.8 26.2 L16.7 22.9 L19.5 22.9 L23.4 21.9 Z"></path> <path fill="#28B463" d="M19.5 22.9 L23.4 21.9 L19.3 17.5 Z"></path> <path fill="#33DE7B" d="M19.5 22.9 L19.3 17.5 L14.6 17.3 L16.7 22.9 Z"></path> <path fill="#2DC56D" d="M16.7 22.9 L14.6 17.3 L10.8 21.5 Z"></path> <path fill="#27AE60 " d="M16.7 22.9 L14.1 27.9 L11.1 25.7 L10.8 21.5 Z"></path> </g> </defs> <svg viewBox="0 0 130 130" width="200" height="200"> <!-- ground --> <g transform="translate(0 0)"> <rect width="150" height="100" 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 fill="url(#street)" d="m0 77 l140 70 l-140 70 z" > </path> </g> <!---ถนน-------------> <svg> <animate attributeName="width" attributeType="XML" begin="0s" dur="6s" fill="freeze" from="0" to="100"/> <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="m21 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> <path stroke="#f000" stroke-width="1" fill="#fff" d="m41 120 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="m61 130 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> </svg> <svg> <!---footpath---> <g transform="translate(7 80.6)"> <g fill="#EEeEEE" transform=" scale(0.96)"> <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"/> <use href="#footpath" x="49.7" y="35.8"/> <use href="#footpath" x="59.7" y="40.8"/> <use href="#footpath" x="69.7" y="45.8"/> <use href="#footpath" x="79.7" y="50.8"/> <use href="#footpath" x="89.7" y="55.8"/> </g> </g> <!---wall---> <!--- พื้น ---> <g transform="translate(0 70.6)"> <g fill="#EEeEEE" transform=" scale(2)"> <use href="#base" x="0" y="0"/> </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="-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> <!-----tree----> <use href="#tree2" x="81" y="86"/> <use href="#tree2" x="91" y="81"/> <use href="#tree2" x="101" y="76"/> <use href="#tree2" x="111" y="71"/> <use href="#พุ่ม" x="4" y="126" transform=" scale(0.5)"/> <use href="#พุ่ม" x="14" y="130" transform=" scale(0.5)"/> <use href="#พุ่ม" x="24" y="134" transform=" scale(0.5)"/> <use href="#พุ่ม" x="34" y="138" transform=" scale(0.5)"/> <!---รั้ว------> <g transform="translate(0 0)"> <g fill="#EEeEEE" transform=" scale()"> <use href="#รั้ว" x="8.9" y="-1"/> <use href="#รั้ว" x="38.7" y="13.7"/> <use href="#รั้ว" x="70.5" y="29.3"/> <use href="#รั้ว" x="100.4" y="44.5"/> <use href="#wall" x="-9.8" y="72"/> <use href="#wall" x="8" y="80.6"/> <use href="#wall" x="20" y="86.6"/> <use href="#wall" x="37.8" y="95.6"/> <use href="#wall" x="51.9" y="102.7"/> <use href="#wall" x="69.8" y="111.7"/> <use href="#wall" x="81.8" y="117.7"/> <use href="#wall" x="99.6" y="126.7"/> <use href="#tree" x="25" y="90" transform=" scale(0.8)"/> <use href="#tree" x="55" y="105" transform=" scale(0.8)"/> <use href="#tree" x="90" y="122" transform=" scale(0.8)"/> </g> </g> </svg> </svg> </svg> </body> </html>