SVG Isometric Grid (Branch 6969)
✨ นายสิทธิเจตน์ วานิชสรรพ์
<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> </defs> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> <svg viewbox="0 0 100 100"> <rect width="15" height="20" x="15" y="5" fill="grey"/> <rect width="10" height="15" x="17.5" y="7" fill="#30e9f2"/> <line x1="20" y1="15" x2="17" y2="10" stroke="blue" stroke-width="1"/> <line x1="" y1="" x2="" y2="" stroke="red" stroke-width="1"/> <line x1="" y1="" x2="" y2="" stroke="red" stroke-width="1"/> </svg> </body> </html>