SVG Isometric Grid (Branch 7037) (Copy 7057)
✨ APHATSARA MORATSATHIAN
<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" width="100" height="500"> <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> <!-- l-40 20 l-10 5 l40 -20 l-40 20code here --> <rect fill="url(#isometric)" width="1000" height="1000"/> <g transform="translate(50 70)"> <!--หลัง1--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-10 -3 v35 l15 7 l60 -30 v-35 l-15 -7 l-60 30 l15 7 l60 -30 l-60 30 " > </path> <!--หลัง2--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m6 -15 v10 l12 6 l40 -20 v-10 l-12 -6 l-40 20 l12 6 l40 -20 l-40 20 " > </path> <!--หลัง2--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m-34 43 v5 l8 4 l20 -10 v-5 l-8 -4 l-20 10 l8 4 l20 -10 l-20 10 " > </path> <!-- หน้า --> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m0 0 v60 l15 7 l75 -37 v-60 l-15 -7 l-75 37 l15 7 l75 -37 l-75 37 " > </path> <!-- กล่องหน้า--> <path stroke="#282828" stroke-width="0.5" fill="#607D8B" d="m31 42 v17 l20 10 l30 -15 v-17 l-20 -10 l-30 15 l20 10 l30 -15 l-30 15 " > </path> <path stroke="#282828" stroke-width="0.5" fill="#37C3C3" d="m0 0 v60 l15 7 v-60 l-10 -5 z " > </path> <rect></rect> </g></svg> </body> </html>