SVG Isometric Grid (Branch 6998) (Copy 7045)
✨ th pvrs
<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="green" d="m20 40 v40 l30 15 l70 -35 v-40 l-30 -15 vz" /> <line x1="110" y1="25" x2="120" y2="20" stroke="black"/> <path stroke="black" stroke-width="1" fill="url(#glass)" d="m50 55 v10 l70 -35 v-10" /> <path stroke="black" stroke-width="1" fill="url(#glass)" d="m50 70 v10 l70 -35 v-10" /> <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="black" stroke-width="1" fill="red" d="m20 35 v60 l5 2.5 l5 -2.5 v-60 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m120 10 v10 l30 15 l20 -10 v-10 l-30 -15 vz" /> <line x1="140" y1="0" x2="120" y2="10" stroke="black"/> <line x1="150" y1="25" x2="120" y2="10" stroke="black"/> <line x1="150" y1="25" x2="150" y2="35" stroke="black"/> <line x1="120" y1="20" x2="150" y2="35" stroke="black"/> <line x1="170" y1="15" x2="150" y2="25" stroke="black"/> <line x1="170" y1="15" x2="170" y2="25" stroke="black"/> <line x1="140" y1="0" x2="170" y2="15" stroke="black"/> <line x1="120" y1="20" x2="120" y2="10" stroke="black"/> <path fill="#37474F" d="m135,10 l10,5 v-7.5 z"/> <path fill="#263238" d="m145,15 v-7.5 l10,2.5 z"/> <path fill="#546E7" d="m135,10 l10,-5 v2.5 z"/> <path fill="#263238" d="m155,10 l-10,-5 v2.5 z"/> <line x1="170" y1="25" x2="150" y2="35" stroke="black"/> <line x1="20" y1="35" x2="25" y2="37.5" stroke="black"/> <line x1="25" y1="97" x2="25" y2="37.5" stroke="black"/> <line x1="30" y1="35" x2="25" y2="37.5" stroke="black"/> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>