SVG Isometric
✨ นายพิชญ์รัฐ ไพบูลย์ธรรม
<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" > <animate attributeName="d" values=" m1,1 v5 l4,-2.5 z; m1,1 v5 l2,-2.5 z; m1,1 v5 l4,-2.5 z" dur="1s" repeatCount="indefinite" /> </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> <path id="tile" d="m0 0 l5,-2.5 l5,2.5 l-5,2.5,z"/> <g id="base"> <path stroke="#f000" stroke-width="1" d="m0 0 v5 l5,2.5 l5 -2.5 v-5 l-5 -2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0002" d="m0 0 l5,2.5 v5 l-5,-2.5 z" /> <path stroke="#f000" stroke-width="1" fill="#0004" d="m5 2.5 l5,-2.5 v5 l-5,2.5 z" /> </g> <path id="side-1" d="m0 0 l5,2.5 v5 l-5,-2.5 z" fill="#0002"/> <path id="side-2" d="m0 0 l5,-2.5 v5 l-5,2.5 z" fill="#0004"/> <pattern id="isometric" width="20" height="10" 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> <g id="เสา"> <path stroke="#f00" stroke-width="0" fill="#EEEEEE" d="m0 0 v-10 l2.5,1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#BDBDBD" d="m2.5 1.25 v-10 l2.5,-1.25 v10"/> <path stroke="#f00" stroke-width="0" fill="#616161" d="m0 -10 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> <animate attributeName="x" values="-100;0;0;0;0;0;0;0" dur="10s" repeatCount="indefinite" /> <g transform="translate(20 70)"> <path stroke="#f000" stroke-width="1" fill="#607D8B" d="m0 0 v5 l30 15 l30 -15 v-5l-30 -15 vz" > </path> <use href="#tile" x="0" y="0" transform="scale(6)" fill="#37474F"/> <use href="#tile" x=".5" y="0" transform="scale(5.5)" fill="#eef"/> <use href="#tile" x="10" y="0" transform="scale(2)" fill="#FFF8E1"/> <use href="#side-2" x="30" y="15" transform="scale(1)" fill="#eef"/> <use href="#side-2" x="35" y="12.5" transform="scale(1)" fill="#eef"/> <use href="#side-2" x="40" y="10" transform="scale(1)" fill="#eef"/> <use href="#side-2" x="45" y="7.5" transform="scale(1)" fill="#eef"/> <use href="#side-2" x="50" y="5" transform="scale(1)" fill="#eef"/> <use href="#side-2" x="55" y="2.5" transform="scale(1)" fill="#eef"/> </g> </svg> <!-- เสา --> <svg> <animate attributeName="y" values="-100;-50;0;0;0;0;0;0" dur="10s" repeatCount="indefinite" /> <g transform="translate(20 70)"> <use href="#เสา" x="0" y="0"/> <use href="#เสา" x="15" y="0"/> <use href="#เสา" x="40" y="0"/> <use href="#เสา" x="55" y="0"/> <use href="#เสา" x="27.5" y="-13.75"/> <use href="#เสา" x="27.5" y="-6.25"/> <g transform="translate(30 -5)"> <ellipse fill="#bbb" cx="" cy="13" rx="8" ry="4"/> <path fill="#bbb" d="m-8,13 h16 v-10 h-10 h-6 "/> <ellipse cx="0" cy="3" rx="8" ry="4" fill="#dadada"/> <ellipse cx="0" cy="3" rx="7" ry="3.3" fill="#999"/> </g> <use href="#เสา" x="27.5" y="13.75"/> </g> </svg> <!-- ชั้นสอง --> <svg> <animate attributeName="y" values="-200;-200;-50;0;0;0;0;0" dur="10s" repeatCount="indefinite" /> <g transform="translate(10 60)"> <g fill="#EEEEEE" transform=" scale(3)"> <use href="#base" x="calc(5 * 1.6666)" y="calc(2.5 * -3.6666)"/> <use href="#base" x="calc(5 * 1)" y="calc(2.5 * -3)"/> <use href="#base" x="calc(5 * 2.6666)" y="calc(2.5 * -2.6666)"/> <use href="#base" x="calc(5 * 0)" y="calc(2.5 * -2)"/> <use href="#base" x="calc(5 * 1)" y="calc(2.5 * -1)"/> <use href="#base" x="calc(5 * 3.3333)" y="calc(2.5 * -2)"/> <use href="#base" x="calc(5 * 2.6666)" y="calc(2.5 * -1.3333)"/> <use href="#base" x="calc(5 * 1.6666)" y="calc(2.5 * -0.3333)"/> </g> </g> </svg> <!-- หลังคา --> <svg> <animate attributeName="x" values="200;200;100;50;0;0;0;0" dur="10s" repeatCount="indefinite" /> <animate attributeName="y" values="100;100;50;25;0;0;0;0" dur="10s" repeatCount="indefinite" /> <g transform="translate(35 45) scale(1.5)"> <path fill="#37474F" d="m0,0 l10,5 v-7.5 z"/> <path fill="#263238" d="m10,5 v-7.5 l10,2.5 z"/> <path fill="#546E7A" d="m0,0 l10,-5 v2.5 z"/> <path fill="#37474F" d="m20,0 l-10,-5 v2.5 z"/> </g> </svg> <!-- บันได 2--> <svg> <animate attributeName="y" values="-100;-100;-100;-100;-100;0;0;0" dur="10s" repeatCount="indefinite" /> <g transform="translate(50 45) scale(1)"> <ellipse fill="#bbb" cx="" cy="13" rx="8" ry="4"/> <path fill="#bbb" d="m-8,13 h16 v-17 l-10,8 h-6 "/> <ellipse cx="0" cy="0" rx="8" ry="4" fill="#dadada" transform="scale(1.15) rotate(-35 0 0)"/> <ellipse cx="0" cy="0" rx="8" ry="4" fill="#999" transform="rotate(-35 0 0)"/> </g> </svg> </svg> <!-- code here --> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> </svg> </body> </html>