SVG Isometric Grid (Branch 7055) (Copy 7083)
✨ VISAL SUWANARAT
<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="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="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> <!--ตึก--> <g id="long"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-20,10 l-45,-22.5 v-15 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v15 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v15 l45,22.5 z" /> </g> <!--หน้าต่าง--> <g id="window"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-20,10 l-45,-22.5 v-5 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v5 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v5 l45,22.5 z" /> </g> <!--ตึก2--> <g id="tt"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-20,10 l-45,-22.5 v-10 l20,-10z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-20,10 v10 l20,-10 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-20 10 l-45,-22.5 v10 l45,22.5 z" /> </g> <!--หลังคาตึกเร้กกกกกกก--> <g id="small"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-15,7.5 l-20,-10 v-10 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v10 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v10 l20,10 z" /> </g> <!--ฐานตึกเร้กกกกกกกกก--> <g id="base_sml"> <path stroke="black" stroke-width="0.2" d="m0,0 v20 l-15,7.5 l-20,-10 v-20 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v20 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v20 l20,10 z" /> </g> <!--ชั้นตึกเล็ก--> <g id="wsmall"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-20,-10 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-20,-10 v5 l20,10 z" /> </g> <!--ทางออก--> <g id="floor"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-15,7.5 l-25,-12.5 v-15 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v15 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-25,-12.5 v15 l25,12.5 z" /> </g> <!--บันไดเล็ก--> <g id="stair"> <path stroke="black" stroke-width="0.2" d="m0 0 v15 l5,2.5 l5 -2.5 v-15 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v15 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v15 l-5,2.5 z" /> </g> <g id="stair2"> <path stroke="black" stroke-width="0.2" d="m0 0 v10 l5,2.5 l5 -2.5 v-10 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v10 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v10 l-5,2.5 z" /> </g> <g id="stair3"> <path stroke="black" stroke-width="0.2" 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="stairr1"> <path stroke="black" stroke-width="0.2" d="m0,0 v10 l-15,7.5 l-5,-2.5 v-10 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v10 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v10 l5,2.5 z" /> </g> <g id="stairr2"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-5,-2.5 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-5,-2.5 v5 l5,2.5 z" /> </g> <!--น้ำพุ--> <g id="fountain"> <path stroke="black" stroke-width="0.2" d="m0,0 v15 l-5,2.5 l-25,-12.5 v-15 l5,-2.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-5,2.5 v15 l5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-5 2.5 l-25,-12.5 v15 l25,12.5 z" /> </g> <g id="fountain2"> <path stroke="black" stroke-width="0.2" d="m0,0 v5 l-15,7.5 l-25,-12.5 v-5 l15,-7.5z"></path> <path stroke="#f000" stroke-width="1" fill="#0004" d="m0 0 l-15,7.5 v5 l15,-7.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m-15 7.5 l-25,-12.5 v5 l25,12.5 z" /> </g> </defs> <!-- code here --> <!--ตึกหลัก--> <svg> <g fill="#EEEEEE" transform="scale(1)"> <use href="#long" x="100" y=100></use> <use href="#tt" x="100" y=90></use> <use href="#window" x="100" y=85 fill="lightblue"></use> <use href="#tt" x="100" y=75></use> <use href="#window" x="100" y=70 fill="lightblue"></use> <use href="#tt" x="100" y=60></use> <use href="#window" x="100" y=55 fill="lightblue"></use> <use href="#tt" x="100" y=45></use> <use href="#window" x="100" y=40 fill="lightblue"></use> <use href="#window" x="100" y="35"></use> </g> </svg> <!--ตึกเล็ก--> <svg> <g fill="#EEEEEE"> <use href="#base_sml" x="55" y=92.5></use> <use href="#wsmall" x="55" y=87.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=82.5></use> <use href="#wsmall" x="55" y=77.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=72.5></use> <use href="#wsmall" x="55" y=67.5 fill="lightblue"></use> <use href="#wsmall" x="55" y=62.5></use> <use href="#wsmall" x="55" y=57.5 fill="lightblue"></use> <use href="#small" x="55" y=47.5></use> <use href="#floor" x="80" y=110></use> <path d="m40,95 a2,1 0 0,0 15,-7.5" fill="blue" /> </g> </svg> <!--บันได--> <svg> <g fill="#EEEEEE"> <use href="#stair2"x=20 y=105 ></use> <use href="#stair3"x=15 y=112.5 ></use> </g> </svg> <!--น้ำพุ--> <svg> <g fill="#EEEEEE"> <use href="#fountain"x=65 y=117.5 ></use> <use href="#fountain2"x=60 y=130 fill="blue"></use> </g> </svg> <!--บันได2--> <svg> <g fill="#EEEEEE"> <use href="#stairr1"x=85 y=117.5 ></use> <use href="#stairr2"x=90 y=125 ></use> </g> </svg> <rect fill="url(#isometric)" width="1000" height="1000"/> <!-- left grass --> <path d="M0,140 l50,25 l-50,25 " stroke-width="0.25" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="url(#grass)" /> <!-- left grass2 --> <path d="M10,200 l55,-27.5 l55 27.5 " stroke-width="0.25" stroke="black" stroke-linecap="round" stroke-linejoin="round" fill="url(#grass)" /> <path d="M0,125 l65,32.5 l65,-32.5 " stroke-width="1" stroke="#fc0" stroke-linecap="round" stroke-linejoin="round" fill="#0000" /> </svg> </body> </html>