SVG Isometric Grid (Copy 6927)
✨ SIRIBOON PANPIRIYA
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#AEF161; box-shadow:0 0 20px #0002; width:100%; } </style> </head> <body> <svg viewBox="0 0 290 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> <!-- code here --> <!-- floor --> <svg> <g transform="translate(-10 50)"> <path stroke="black" stroke-width="0" fill="#414C52" d="m45,60 L95,35 L165,70 L115,95 z"></path> </g> </svg> <svg> <g transform="translate(123 70)"> <path stroke="black" stroke-width=".5" fill="#414C52" d="m45,60 L95,35 L137,55 L87,80 z "></path> </g> </svg> <!-- ถนน --> <svg> <g transform="translate(40 78)"> <path stroke="black" stroke-width="0" fill="black" d="m45,60 L95,35 L130,52 l-50,25 z "></path> <path stroke="black" stroke-width=".3" fill="white" d="m45,60 L95,35 L100,37 L50,62.5 z "></path> <path stroke="black" stroke-width=".3" fill="white" d="m75,74.5 L125,50 L130,52 L80,77 z "></path> </g> </svg> <!-- ถนน --> <svg> <g transform="translate(88.9 53.2)"> <path stroke="black" stroke-width="0" fill="black" d="m45,60 L95,35 L130,52 l-50,25 z "></path> <path stroke="black" stroke-width=".3" fill="white" d="m45,60 L95,35 L100,37 L50,62.5 z "></path> <path stroke="black" stroke-width=".3" fill="white" d="m75,74.5 L125,50 L130,52 L80,77 z "></path> </g> </svg> <!-- ตึกโต๊ะตึกๆ --> <svg> <g transform="translate(105,90)"> <path stroke="#f00" stroke-width="0" fill="#e2e2e2" d="m-35,-15 v-45 l70,35 v45 "/> <path stroke="#f00" stroke-width="0" fill="#808080" d="m45 15 v-45 l-10,5 v45"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-35,-60 l10,-5 l70,35 l-10,5 z "/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m44 -22 v-5 l-7.5,3.75 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m44 -15 v-5 l-7.5,3.75 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m44 -8 v-5 l-7.5,3.75 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669" d="m44 -1 v-5 l-7.5,3.75 v5"/> </g> </svg> <!-- ตึกสูงผอม --> <svg> <g transform="translate(100,70)"> <path stroke="#f00" stroke-width="0" fill="#e2e2e2" d="m-30,15 v-60 l60,30 v60 z "/> <path stroke="#f00" stroke-width="0" fill="#949494" d="m40,40 v-60 l-10,5 v60"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m3 0 v-5 l20,10 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m3 8 v-5 l20,10 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m3 16 v-5 l20,10 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-29 -23 v-5 l30,15 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-29 -30 v-5 l30,15 v5"/> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m-30,-45 l60,30 l9.5,-5 l-60,-30 z"/> </g> </svg> <!-- กลมๆ --> <svg> <g transform="translate(79,86)"> <ellipse fill="white" cx="6" cy="26" rx="24" ry="16"/> <path d="m30,25 v-17 l-6,5 z" fill="white"></path> <path d="m-18,25 v-17 l6,5 z" fill="white"></path> <ellipse fill="#374669" cx="6" cy="22" rx="24" ry="16"/> <path d="m-18,21 v-12 l6,5 z" fill="#374669"></path> <path d="m30,21 v-12 l-6,5 z" fill="#374669"></path> <ellipse fill="white" cx="6" cy="10" rx="24" ry="16"/> </g> </svg> <!-- post--> <g id="post"> <path stroke="#f00" stroke-width="0" fill="#949494" d="m2.5,1.5, v-25 l2.4,-1.2 v25 "/> <path stroke="#f00" stroke-width="0" fill="#e2e2e2" d="m0,0.5 v-25 l2.4,1 v25 "/> </g> <svg> <use href="#post" x="65" y="124.2"/> <use href="#post" x="50" y="116.6"/> <use href="#post" x="35" y="109.6"/> <use href="#post" x="169" y="130"/> <use href="#post" x="207.5" y="148"/> <use href="#post" x="254.5" y="125"/> <use href="#post" x="215.5" y="107"/> </svg> <!-- โรงอาหาร --> <svg> <g transform="translate(123 45)"> <path fill="grey" stroke="black" stroke-width=".1" d="m48.5,81 L97.5,56.5 L131.5,73.5 "></path> <path fill="grey" stroke="black" stroke-width="0" d="m48.5,81 L84.5,98.5 v-30 "></path> <path fill="grey" stroke="black" stroke-width="0" d="m89.5,98 L134,75.9 L89.1,70 "></path> <path fill="grey" stroke="black" stroke-width="0" d="m89.5,98 L131.5,75.9 v-2 L100.1,59 "></path> <path fill="grey" stroke="black" stroke-width="0" d="m50.9,78 L92.3,57 v5 L50.9,80 "></path> <path stroke="black" stroke-width="0" fill="white" d="m46,60 v-20 L87,60 L87,80"></path> <path stroke="black" stroke-width="0" fill="white" d="m87,60 v20 L137,55 v-20 z"></path> <path stroke="black" stroke-width="0" fill="#414C52" d="m45,40 L95,15 L137,35 L87,60 z "></path> <path fill="black" stroke="red" stroke-width="0" d="m77,37.5 L92,29.5 L92,44.5 z"></path> <path fill="#333D49" stroke="red" stroke-width="0" d="m92,29.5 L107,37 L92,44.5 z "></path> <path fill="red" stroke="red" stroke-width=".1" d="m48.5,86.5 v-5.5 L84.5,98.5 v5.5 "></path> <path fill="red" stroke="red" stroke-width=".1" d="m89.7,103.5 v-5.5 L134,76 v5.5 "></path> </g> <!-- #333D49 --> </svg> <!-- เพดานตึก --> <svg> <g transform="translate(37 85)"> <path stroke="#f00" stroke-width="0" fill="blue" d="m-2,-20.5 l35,-17 l32,16 l-34.5,17 z "/> <!-- ขอบๆ --> <path stroke="black" stroke-width="0" fill="red" d="m-2,.5 v-20.9 l32.5,15.9 v20.5 "/> <path stroke="black" stroke-width="0" fill="green" d="m30.5,16.3 v-20.8 l34.5,-17 v20.5 "/> <!-- หน้าต่าง --> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-2,-11 v-5 l32.5,16 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m-2,-3 v-5 l32.5,16 v5"/> <!-- หน้าต่างอีกด้าน --> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m30.5,5 v-5 l34.5,-17 v5"/> <path stroke="#f00" stroke-width="0" fill="#374669 " d="m30.5,13 v-5 l34.5,-17 v5"/> </g> </svg> <!-- บ่อน้ำ --> <svg> <g transform="translate(-1 50)"> <path stroke="brown" stroke-width="1" fill="#558CFF" d="m210,125 L300,80 v90 z "></path> </g> </svg> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>