SVG Isometric Canteen Jabont (Copy 7004)
✨ veerawat boontham
<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"/> <path stroke="#03A9F4" fill="transparent" stroke-linejoin="square" d="m1,1 v5 l4,-2.5 z" > </path> </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> </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> </body> </html>