SVG Isometric Grid (Branch 6998) (Copy 7035)
✨ นายศรัณย์ เชิดวงศ์ตระกูล
<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 100"> <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> <pattern id="glass" width="5" height="5" viewBox="0 0 5 5" patternUnits="userSpaceOnUse" x="0" y="0" > <rect width="5" height="5" fill="hsl(220,100%,70%)" /> <line x1="4.9" y1="4.9" x2="4.9" y2="0" stroke="white" /> </pattern> </defs> <!-- code here --> <path stroke="black" stroke-width="1" fill="#607D8B" d="m10 35 v50 l30 15 l70 -35 v-50 l-30 -15 vz" /> <line x1="10" y1="35" x2="40" y2="50" stroke="black"/> <line x1="40" y1="50" x2="110" y2="15" stroke="black"/> <!-- <line x1="110" y1="30" x2="80" y2="15" stroke="black"/> --> <line x1="10" y1="35" x2="80" y2="0" stroke="black"/> <!-- <line x1="10" y1="50" x2="10" y2="80" stroke="black"/> --> <line x1="40" y1="50" x2="40" y2="100" stroke="black"/> <!-- <line x1="110" y1="30" x2="110" y2="60" stroke="black"/> --> <path stroke="black" stroke-width="1" fill="url(#glass)" d="m40 50 v10 l70 -35 v-10" /> <path stroke="black" stroke-width="1" fill="url(#glass)" d="m40 60 v10 l70 -35 v-10" /> <path stroke="black" stroke-width="1" fill="url(#glass)" d="m40 70 v10 l70 -35 v-10" /> <path stroke="black" stroke-width="1" fill="black" d="m60 80 v10 l30 -15 v-10" /> <path stroke="#f000" stroke-width="1" fill="red" d="m10 45 v40 l30 15 l20 -10 v-40 l-30 -10 vz" /> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m120 10 v10 l30 15 l20 -10 v-10 l-30 -15 vz" /> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>