SVG Isometric (โรงอาหาร) (Copy 7116)
✨ JIRAYU TORRANATHITI
<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="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 --> <rect fill="url(#isometric)" width="1000" height="1000"/> <!-- กล่องสี่เหลี่ยม --> <path d="M100, 10 v50 l-50,25 l50,25 l50,-25 l-50,-25 v-50 l50,25 v50 l-50,-25 v-50 l-50,25 v50" stroke="#0002" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> <!-- พื้น --> <path d="M50,80 v10 l50,25 v-10" fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M150,80 v10 l-50,25 v-10" fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,55 l-50,25 l50,25 l50,-25 " fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- บันไดซ้าย --> <!-- <polygon points="100,115 100,120 45,92 50,90"fill="white"/> --> <polygon points="100,115 95,117.5 45,92 50,90"fill="white"/> <polygon points="45,92 45,97.5 95,122.5 95,117.5" fill="#e6e6e6"/> <polygon points="95,122.5 45,97.5 40,100 90,125"fill="white"/> <polygon points="90,125 40,100 40,105 90,130" fill="#e6e6e6"/> <polygon points="100,115 100,125 90,130 90,125 95,122.5 95,117.5 "fill="brown"/> <!-- บันไดขวา --> <polygon points="100,115 105,117.5 155,92.5 150,90" fill="#e6e6e6"/> <polygon points="105,117.5 105,122.5 155,97.5 155,92.5"fill="#d6d4d4"></polygon> <polygon points="105,122.5 155,97.5 160,100 110,125"fill="#e6e6e6"></polygon> <polygon points="110,125 160,100 160,105 110,130" fill="#d6d4d4"/> <polygon points="100,115 100,125 110,130 110,125 105,122.5 105,117.5" fill="grey"></polygon> <!-- เสาหน้า --> <ellipse cx="100" cy="129" rx="10" ry="5" fill="#dcdcdc"/> <rect x="90" y="70" width="20" height="60" fill="#dcdcdc"/> <!-- <polygon points="100, 50 100 ,105 90, 100 90, 50" fill=""/> <polygon points="100, 50 100 ,105 110, 100 110, 50" fill=""/> --> <!-- <rect x="97" y="60" width="6.5" height="42" fill="rgb(100 100 100)"></rect> --> <!-- <ellipse cx="100.2" cy="102" rx="3.3"ry="2" fill="rgb(100 100 100)"></ellipse> --> <!-- ผนังซ้าย --> <path d="M50,35 l0,45 l50,-25 l0,-45" fill="#7dd2fa"/> <!-- ผนังขวา --> <path d="M100,10 l0,45 l50,25 l0,-45" fill="#7dd2fa"/> <!-- เสาข้างซ้าย --> <polygon points="50,50 50,80 60,85 60,50" fill="#dcdcdc"/> <polygon points="60,50 60,85 70,80 70,50 " fill="#b8b8b8"/> <!-- <rect x="50" y="39" width="5.8" height="42" fill="rgb(100 100 100)"></rect> <ellipse cx="53" cy="80" rx="3" ry="2" fill="rgb(100 100 100)"></ellipse> --> <!-- เสาข้างขวา --> <polygon points="150,50 150,80 140,85 140,50" fill="#ababab"/> <polygon points="140,50 140,85 130,80 130,50" fill="#b8b8b8"/> <!-- <rect x="144" y="39" width="5.8" height="42" fill="rgb(100 100 100)"></rect> <ellipse cx="146.9" cy="80" rx="3.2" ry="2" fill="rgb(100 100 100)"></ellipse> --> <!-- หลังคา --> <path d="M45,35 v20 l55,25 v-20" fill="#a8a7a7" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M155,35 v20 l-55,25 v-20" fill="#999999" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,10 l-55,25 l55,25 l55,-25 " fill="#bebebe" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- มุงหลังคา --> <path d="M100,15 l0,35 l30,-13" fill="#6bb8db" stroke="" stroke-width="0.5"/> <path d="M100,15 l-30,22 l30,13" fill="#7dd2fa" stroke="" stroke-width="0.5"/> <!-- <path d="M100,20 l0,26 l20,-10" fill="#7dd2fa" stroke="black" stroke-width="0.5"/> <path d="M100,20 l-20,16.0 l20,10" fill="#7dd2fa" stroke="black" stroke-width="0.5"/> --> <!-- เสาบนหลังคา --> <ellipse cx="100" cy="50" rx="10" ry="5" fill="#dcdcdc"/> <rect x="90" y="30" width="20" height="20" fill="#dcdcdc"/> <ellipse cx="100" cy="30" rx="10" ry="5" fill="#dcdcdc"/> <!-- ถนน --> <polygon points="200 ,100 200 ,150 100,200 100,150" stroke="" stroke-width="0.5"/> <polygon points="100,200 100,150 0,100 0,150"></polygon> <polygon points="200,120 200,130 180,140 170,135" fill="yellow"/> <polygon points="160,140 170,145 130,165 120,160" fill="yellow"/> <polygon points="0,120 0,130 30,145 40,140" fill="yellow"/> <polygon points="50, 145 40,150 80,170 90,165 "fill="yellow"/> <!-- ต้นไม้ --> <polygon points="10,100 20,100 20,70 10,70" fill="brown"/> <ellipse cx="15" cy="100" rx="5" ry="2.5" fill="brown"/> <circle cx="15" cy="65" r="17" fill="green"/> <circle cx="28" cy="60" r="10" fill="green"/> <circle cx="28" cy="70" r="10" fill="green"/> <circle cx="20" cy="52" r="10" fill="green"/> <circle cx="7" cy="54" r="10" fill="green"/> <circle cx="20" cy="76" r="10" fill="green"/> <circle cx="7" cy="76" r="10" fill="green"/> <rect x="176.6" y="50" width="7" height="20" fill="brown"/> <ellipse cx="180" cy="70" rx="3.5" ry="1.25" fill="brown"/> <circle cx="180" cy="45" r="12" fill="green"/> <circle cx="189" cy="45" r="7" fill="green"/> <circle cx="185" cy="38" r="7" fill="green"/> <circle cx="177" cy="38" r="7" fill="green"/> <circle cx="172" cy="45" r="7" fill="green"/> <circle cx="176" cy="52" r="7" fill="green"/> <circle cx="185" cy="52" r="7" fill="green"/> <!-- ต้นไม้ของจิ --> <rect x="30" y="160" width="5" height="30" fill="brown"/> <ellipse cx="32.5" cy="190" rx="2.5" ry="1" fill="brown"/> <line stroke="brown" x1="25" x2="32" y1="177" y2="180"></line> <line stroke="brown" x1="35" x2="40" y1="172" y2="170"></line> <circle cx="25" cy="178" r="3" fill="green"/> <circle cx="40" cy="170" r="3" fill="green"/> <ellipse cx="25" cy="165" rx="8" ry="5" fill="green"/> <ellipse cx="40" cy="160" rx="8" ry="4" fill="green"/> <ellipse cx="32" cy="158" rx="12" ry="8" fill="green"/> <rect x="175" y="160" width="5" height="30" fill="brown"/> <ellipse cx="177.5" cy="190" rx="2.5" ry="1" fill="brown"/> <ellipse cx="177" cy="155" rx="12" ry="8" fill="green"/> <ellipse cx="177" cy="165" rx="10" ry="6" fill="green"/> <circle cx="185" cy="160" r="5" fill="green"/> <circle cx="168" cy="160" r="5" fill="green"/> <circle cx="177" cy="150" r="7" fill="green"/> <circle cx="177" cy="168" r="7" fill="green"/> <ellipse cx="172" cy="184" rx="4" ry="2" fill="green"/> <ellipse cx="183" cy="179" rx="4" ry="2" fill="green"/> </svg> </body> </html>