SVG Isometric Grid (Branch 6923) (Copy 6933)
✨ นางสาวบุษยมาส อวะภาค
<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:85%; } </style> </head> <body> <svg viewBox="0 0 200 200"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="4" height="4" > <rect width="100" height="100" fill="#C6FF00"/> <path stroke="#AEEA00" fill="transparent" stroke-linejoin="square" d="m1,5 h1 l1,-1 l1,1 l1,-1 l1,1 h1" /> </pattern> <pattern id="sea" viewBox="0 0 10 10" x="0" y="0" width="5" height="5" patternUnits="userSpaceOnUse" > <rect width="100" height="100" fill="#4FC3F7"/> </pattern> <pattern id="concrete" viewBox="0 0 10 5" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="5"> <rect fill="#3E2723" width="10" height="10"/> <ellipse fill="#fff1" cx="4" cy="2" rx="2" ry="1"/> <ellipse fill="#fff1" cx="7" cy="4" rx="1" ry=".6"/> <path stroke="#0003" stroke-width=".2" d="m0,0 l10,5"/> <path stroke="#0003" stroke-width=".2" d="m0,5 l10,-5"/> </pattern> <path id="tile" d="m0 0 l5,-2.5 l5,2.5 l-5,2.5,z"/> <g id="base" transform=" scale(4.5)"> <path stroke="#f000" stroke-width="1" d="m0 0 v0.5 l5,2.5 l5 -2.5 v-0.5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v0.5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v0.5 l-5,2.5 z" /> </g> <g id="เสา"> <path stroke="#f00" stroke-width="0" fill="#ff1744" d="m0 0 v-20 l2.5,1.25 v20"/> <path stroke="#f00" stroke-width="0" fill="#F48FB1" d="m2.5 1.25 v-20 l2.5,-1.25 v20"/> <path stroke="#f00" stroke-width="0" fill="#FFD600" d="m0 -20 l2.5,1.25 l2.5,-1.25 l-2.5,-1.25"/> </g> </defs> <svg viewBox="0 0 100 100" width="200" height="200"> <!-- ground --> <g transform="translate(0 0)"> <rect width="100" height="100" fill="url(#grass)"/> <path fill="url(#sea)" d="m20 0 l80,40 v-100" > </path> <path fill="url(#concrete)" d="m0 25 l100 50 l-100 50 z" > </path> </g> <!-- พื้นโรงอาหาร --> <svg> </svg> <svg> <!-- ชั้น--> <g transform="translate(0 70.6)"> <g fill="#EEeEEE" transform=" scale(2)"> <use href="#base" x="0" y="0"/> </g> <!-- บรรไล --> </g> <g transform="translate(16 87.5)"> <g fill="#EEeEEE" transform=" scale(0.7)"> <use href="#base" x="60" y="3.5"/> </g> </g> <g transform="translate(18 85.6)"> <g fill="#EEeEEE" transform=" scale(0.6)"> <use href="#base" x="69" y="4"/> </g> </g> <g transform="translate(22 84.6)"> <g fill="#EEeEEE" transform=" scale(0.5)"> <use href="#base" x="77.5" y="3.5"/> </g> </g> <g transform="translate(22 84.6)"> <g fill="#EEeEEE" transform=" scale(0.4)"> <use href="#base" x="99.9" y=""/> </g> </g> </svg> <!-- เสา --> <svg> <g transform="translate(20 70)"> <use href="#เสา" x="60" y="0"/> <use href="#เสา" x="65" y="0"/> <use href="#เสา" x="5" y="0"/> </g> </svg> <!-- หลังคา --> <!-- บันได 2--> </svg> <!-- code here --> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>