SVG Isometric Grid C P’Thx
✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#AEF165; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 200 150"> <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> <!-- code here --> <svg> <!-- เงาตึก --> <g transform="translate(37.5 52.5)"> <path stroke="#f00" stroke-width="0" fill="#414C52 " d="m50 10 l70,35 l-75,37.5 l-70,-35"/> <!-- <path stroke="#f00" stroke-width="1" fill="#3B3E44 " d="m160 45 l-100,50"/> --> </g> </svg> <!--ถนน --> <g transform="translate(165 55)"> <path stroke="#f00" stroke-width="0" fill="#414C52 " d="m0 0 l30,15 l-40,20 l-30,-15"/> <!-- <path stroke="#f00" stroke-width="1" fill="#3B3E44 " d="m160 45 l-100,50"/> --> </g> <svg> <g transform="translate(15 52.5)"> <path stroke="#5C4444 " stroke-width="2" fill="#D46446 " d="m75 2.5 l50,25 l-20,10 l-50,-25"/> <!-- <path stroke="#f00" stroke-width="1" fill="#3B3E44 " d="m160 45 l-100,50"/> --> </g> </svg> <!-- น้ำพุ --> <svg> <g transform="translate(130,115)"> <path stroke="#f00" stroke-width="0" fill="#3A4042 " d="m10 0 l20,10 l-20,10 l-20,10 l-20,-10 "/> <path stroke="#f00" stroke-width="0" fill="#558CFF" d="m-5 -12.5 l20,10 l-20,10 l-20,10 l-20,-10 "/> <path stroke="#f00" stroke-width="0" fill="#9EA8B3 " d="m-45 7.5 v5 l20,10 v-5"/> <path stroke="#f00" stroke-width="0" fill="#58626D " d="m15 -2.5 v5 l-40,20 v-5"/> </g> </svg> <!--โรงอาหาร--> <svg> <g transform="translate(110,53)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-5 -22.5 l35,-17.5 l35,17.5 l-35,17.5 "/> <path stroke="#f00" stroke-width="0" fill="#333D49 " d="m15 -22.5 l15-7.5 l15,7.5 l-15,7.5 "/> <path stroke="#f00" stroke-width="0" fill="white" d="m5 10 l25,-12.5 l25,12.5 l-25,12.5 "/> <use href="#เสา" x="57.5" y="17.5"/> <use href="#เสา" x="-2.5" y="17.5"/> <!--บันได--> <g transform="translate(30,2)"> <ellipse fill="#ACACBD " cx="0" cy="13" rx="8" ry="5"/> <path fill="#ACACBD " 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> <!-- <path stroke="#f00" stroke-width="0.1" fill="#393E43 " d="m15.5 -22.5 l15,-2.5 v10"/>---> <path stroke="#f00" stroke-width="0" fill="#4E6F94 " d="m5 15 v-5 l25,12.5 v5"/> <path stroke="#f00" stroke-width="0" fill="#1C395B " d="m55 15 v-5 l-25,12.5 v5"/> <use href="#เสา" x="27.5" y="27.5"/> <path stroke="#f00" stroke-width="0" fill="#black " d="m15 -22.5 l15,7.5 v-15"/> <path stroke="#f00" stroke-width="0" fill="#CCCBD8" d="m-5 -2.5 v-20 l35,17.5 v20"/> <path stroke="#f00" stroke-width="0" fill="#807D99" d="m65 -2.5 v-20 l-35,17.5 v20"/> </g> </svg> <g transform="translate(-0, 15)"> <!-- ขยับทั้งตึก--> <!-- ตึกเตี้ย--> <svg> <g transform="translate(87,57.5)"> <path stroke="#f00" stroke-width="0" fill="#CCCBD8" d="m-10 5 v-40 l40,20 v40"/> <path stroke="#f00" stroke-width="0" fill="#807D99" d="m40 20 v-40 l-10,5 v40"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-10 -35 l10,-5 l40,20 l-10,5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m38.75 -10 v-5 l-7.5,3.75 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m38.75 -2 v-5 l-7.5,3.75 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m38.75 6 v-5 l-7.5,3.75 v5"/> </g> </svg> <!-- ตึกสูง--> <svg> <g transform="translate(90,55)"> <path stroke="#f00" stroke-width="0" fill="#CCCBD8" d="m-30 15 v-60 l40,20 v60"/> <path stroke="#f00" stroke-width="0" fill="#807D99" d="m25 27.5 v-60 l-15,7.5 v60"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m22.5 -21 v-5 l-10,5 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m22.5 -11 v-5 l-10,5 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m22.5 -1 v-5 l-10,5 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m22.5 9 v-5 l-10,5 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-25 -32.5 v-5 l30,15 v5"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-30 -45 l40,20 l15,-7.5 l-40,-20"/> </g> </svg> <!-- ตึกกลม--> <svg> <g transform="translate(72.5, 65)"> <ellipse fill="white" cx="-2" cy="21.5" rx="27.5" ry="16"/> <path fill="white" d="m-22,23.5 h47.5 v-20.5 h-47.5"/> <ellipse fill="#374669" cx="-2" cy="18" rx="27.5" ry="16"/> <path fill="#374669" d="m-23.5,18 h49 v-10 "/> <ellipse fill="white" cx="-2" cy="8" rx="27.5" ry="16"/> <ellipse cx="-2" cy="2.4" rx="27.5" ry="16" fill="#A4ABBB "/> </g> </svg> <!--ต้นไม้สามเหลี่ยม--> <g id="ต้นไม้สามเหลี่ยม"> <path stroke="#f00" stroke-width="0" fill="#82674A " d="m52.5 21.5 v-15 l2.5,1.25 v15"/> <path stroke="#f00" stroke-width="0" fill="#503921 " d="m55 22.5 v-15 l2.5,-1.25 v15"/> <path stroke="#f00" stroke-width="0" fill="#4D7926 " d="m45 7 l10,-10 l10,10 l-10,5 l-10,-5"/> <path stroke="#f00" stroke-width="0" fill="#6CC641 " d="m45 7 l10,-10 v15 z"/> </g> <!--ต้นไม้กลม--> <g id="ต้นไม้กลม"> <g transform="translate(7,3)"> <path stroke="#f00" stroke-width="0" fill="#82674A " d="m30 30 v-15 l2.5,1.25 v15"/> <path stroke="#f00" stroke-width="0" fill="#503921 " d="m32.5 31.5 v-15 l2.5,-1.25 v15"/> <ellipse fill="#0D6E0E " cx="32" cy="10" rx="7" ry="7"/> <ellipse fill="#438836 " cx="27" cy="15" rx="6" ry="6"/> <ellipse fill="#18520E " cx="37" cy="15" rx="6" ry="6"/> </g> </g> <svg> <use href="#ต้นไม้กลม" x="140" y="70"/> <use href="#ต้นไม้กลม" x="110" y="90"/> <use href="#ต้นไม้สามเหลี่ยม" x="130" y="30"/> <use href="#ต้นไม้สามเหลี่ยม" x="110" y="60"/> </svg> <!-- เสา--> <g id="เสา"> <path stroke="#f00" stroke-width="0" fill="#807D99" d="m2.5 1.25 v-30 l2.5,-1.25 v30"/> <ellipse fill="#807D99" cx="2.5" cy="0" rx="2.5" ry="1.25"/> <path stroke="#f00" stroke-width="0" fill="#CCCBD8" d="m0 0.5 v-30.5 l2.5,1.25 v30.5"/> </g> <path stroke="#f00" stroke-width="0" fill="#50505B " d="m-35,-40 l40,20 l40,20 l-40,20 l-40,-20"/> <!--ใช้เสา--> <svg> <use href="#เสา" x="57.5" y="105"/> <use href="#เสา" x="40" y="97.5"/> <use href="#เสา" x="25" y="90"/> </svg> <svg> <g transform="translate(30 65)"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-5 -22.5 l35,-17.5 l35,17.5 l-35,17.5 "/> <!-- เพดานบน --> <path stroke="#f00" stroke-width="0" fill="#CCCBD8" d="m-5 -2.5 v-20 l35,17.5 v20"/> <path stroke="#f00" stroke-width="0" fill="#807D99" d="m65 -2.5 v-20 l-35,17.5 v20"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-2.5 -13 v-5 l30,15 v5"/> <!-- หน้าต่าง--> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-2.5 -3 v-5 l30,15 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m62.5 -13 v-5 l-30,15 v5"/> <!-- หน้าต่าง--> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m62.5 -3 v-5 l-30,15 v5"/> </g> </svg> </g> <use href="#ต้นไม้สามเหลี่ยม" x="-10" y="110"/> <use href="#ต้นไม้กลม" x="-25" y="80"/> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>