SVG Isometric Grid (Branch 6998)
✨ นางสาวรจนา หอมประสิทธิ์
<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="5" y1="5" x2="5" y2="0" stroke="white" stroke-width="0.65"/> <line x1="0" y1="0" x2="0" y2="5" stroke="white" stroke-width="0.65"/> </pattern> <pattern id="fence" width="5" height="5" viewBox="0 0 5 5" patternUnits="userSpaceOnUse"> <rect width="5" height="5" fill="white" /> <line x1="5" y1="5" x2="5" y2="0" stroke="#DC5539" stroke-width="1.5" /> <line x1="0" y1="0" x2="0" y2="5" stroke="#DC5539" stroke-width="1.5" /> </pattern> <pattern id="walkway" width="5" height="5" viewBox="0 0 5 5" patternUnits="userSpaceOnUse"> <rect width="5" height="5" fill="#D38A6A" /> <path stroke="#fff" stroke-width=".5" fill="transparent" d="m0,0 l0,5" /> <path stroke="#fff" stroke-width=".5" fill="transparent" d="m5,0 l-10,5" /> </pattern> <pattern id="footpath" width="5" height="5" viewBox="0 0 5 5" patternUnits="userSpaceOnUse"> <rect width="5" height="5" fill="white" /> <line x1="5" y1="5" x2="5" y2="0" stroke="#DC5539" stroke-width="1" /> <line x1="0" y1="0" x2="0" y2="5" stroke="#DC5539" stroke-width="1" /> </pattern> <pattern id="grass" width="5" height="5" viewBox="0 0 5 5" patternUnits="userSpaceOnUse"> <rect width="5" height="5" fill="#117C13" /> <path stroke="#41980A" stroke-width=".3" fill="transparent" d="m0,4 l.5,-.5 l.5,.5" /> </pattern> </defs> <!-- code here --> <!-- หญ้า , ทางเดิน --> <path stroke="#fff" stroke-width=".1" fill="url(#walkway)" d="m130,65 l-10,-5 l-80,40 l10,5 l80,-40" /> <path stroke="#fff" stroke-width=".1" fill="url(#grass)" d="m140,70 l-10,-5 l-80,40 l10,5 l80,-40" /> <path stroke="#fff" stroke-width=".1" fill="url(#walkway)" d="m140,70 l5,2.5 l-80,40 l-5,-2.5 l80,-40" /> <path stroke="#fff" stroke-width=".1" fill="url(#grass)" d="m155,77.5 l-10,-5 l-80,40 l10,5 l80,-40" /> <!-- ฟุตบาท --> <path stroke="#fff" stroke-width=".1" fill="#E4DBD8" d="m210,65 l-10,-5 l-80,40 l10,5 l80,-40" /> <path stroke="#FF00" stroke-width="0.2" fill="url(#footpath)" d="m80 130 v-1 l130 -65 v1 z" /> <!-- ถนน --> <linearGradient id="road" x1="100%" y1="0%" x2="0%" y2="0%"> <stop offset="0%" style="stop-color:#888888;stop-opacity:1" /> <stop offset="50%" style="stop-color:#888888;stop-opacity:1" /> <stop offset="100%" style="stop-color:#263238;stop-opacity:1" /> </linearGradient> <path stroke="#fff" stroke-width=".1" fill="url(#road)" d="m200 70 l60,30 l-120,-0 l60,-30 z" /> <line x1="180" y1="95" x2="170" y2="100" stroke="#fff"/> <line x1="200" y1="85" x2="190" y2="90" stroke="#fff"/> <!-- ถนนโรงอาหาร --> <path stroke="#fff" stroke-width=".1" fill="url(#road)" d="m120 30 l70,35 l-20,10 l-70,-35"/> <line x1="150" y1="55" x2="160" y2="60" stroke="#fff"/> <line x1="120" y1="40" x2="130" y2="45" stroke="#fff"/> <path stroke="#fff" stroke-width=".1" fill="url(#grass)" d="m190 65 l80,-40 l-120,-60 l-80,40 l120,60"/> <path stroke="#fff" stroke-width=".1" fill="#E4DBD8" d="m100 20 l40,-20 l50,25 l-40,20 l-50,-25"/> <path stroke="#fff" stroke-width=".1" fill="#E4DBD8" d="m80 40 l10,-5 l80,40 l-10,5 l-80,-40"/> <!-- ตึกเล็ก --> <path stroke="black" stroke-width="1" fill="#536464" d="m20 40 v40 l30 15 l70 -35 v-40 l-30 -15 vz" /> <!-- (Color) Gradient --> <linearGradient id="smallbuilding" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#607D8B;stop-opacity:1" /> <stop offset="75%" style="stop-color:#263238;stop-opacity:1" /> <stop offset="100%" style="stop-color:#263238;stop-opacity:1" /> </linearGradient> <!-- (Color) Small Building --> <path fill="#263238" d="m110 25 l0,40 l10,-5 l0,-40 l-10,5"/> <!-- (Color) Small Building Roof --> <path fill="#3d5058" d="m120 20 l-10,-5 l-10,5 l10,5 l10,-5"/> <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" /> <!-- (Color) Gradient --> <linearGradient id="left" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#607D8B;stop-opacity:1" /> <stop offset="100%" style="stop-color:#000;stop-opacity:1" /> </linearGradient> <linearGradient id="roof" x1="0%" y1="100%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#607D8B;stop-opacity:1" /> <stop offset="100%" style="stop-color:#445963;stop-opacity:1" /> </linearGradient> <!-- (Color) Left side of building --> <path fill="url(#left)" d="m10 35 l30,15 l0,50 l-30,-15 l0,-50"/> <!-- (Color) Roof --> <path fill="url(#roof)" d="m40 50 l70,-35 l-30,-15 l-70,35 l30,15"/> <!-- (Color) Garage --> <path fill="#263238" d="m40 80 l70,-35 l0,20 l-70,35 l0,-20"/> <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="#AFAFAF" d="m60 80 v10 l30 -15 v-10" /> <!-- แท่ง --> <path stroke="black" stroke-width="1" fill="url(#left)" d="m20 35 v60 l5 2.5 l5 -2.5 v-60 l-5 -2.5 z"/> <path stroke="#fff" 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="#4A4A4A" stroke-width='1' stroke="black" d="m80,70 l10,-5 l-0,10 "/> <line x1="60" y1="80" x2="90" y2="65" 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"/> <path stroke="black" stroke-width="1" fill="black" d="m150 30 v4 l20 -10 v-4" /> <path stroke="black" stroke-width="1" fill="black" d="m120 15 v4 l30 15 v-4" /> <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"/> <!-- บ่อน้ำ --> <path stroke="black" stroke-width="0.25" fill="#D2D1CD" d="m110 70 v3 l15 7.5 l20 -10 v-3 l-15 -7.5 z"/> <line x1="110" y1="70" x2="125" y2="77.5" stroke="black" stroke-width="0.25"/> <line x1="125" y1="77.5" x2="125" y2="80.5" stroke="black" stroke-width="0.25"/> <line x1="125" y1="77.5" x2="145" y2="67.5" stroke="black" stroke-width="0.25"/> <path stroke="black" stroke-width="0.15" fill="hsl(220,100%,70%)" d="m112 70 l13 6.5 l18.3 -9.2 l-13.2 -6.5 z"/> <!-- รั้ว --> <path stroke="#FF00" stroke-width="0.2" fill="url(#fence)" d="m80 120 v-5 l130 -65 v5 z" /> <!--tree--> <ellipse cx="145.5" cy="37" rx="5" ry="6.5" fill="#7CB342" /> <ellipse cx="145.5" cy="38" rx="3" ry="5" fill="#689F38" /> <!-- ลำต้น --> <path stroke="black" stroke-width="0.1" fill="#795548" d="m145,47 v-7 l-2,-2 l2,1 v-2 l-1,-1 l1,0.5 l0.5,-1 l0.5,2 l1,-1 l-1,2 v3.5 l2,-2 l-2,3 v4"/> <!--tree--> <ellipse cx="155" cy="60" rx="5" ry="6.5" fill="#7CB342" /> <ellipse cx="155" cy="61" rx="3" ry="5" fill="#689F38" /> <!-- ลำต้น --> <path stroke="black" stroke-width="0.1" fill="#795548" d="m155,70 v-7 l-2,-2 l2,1 v-2 l-1,-1 l1,0.5 l0.5,-1 l0.5,2 l1,-1 l-1,2 v3.5 l2,-2 l-2,3 v4"/> <!--tree--> <ellipse cx="35" cy="90" rx="5" ry="6.5" fill="#7CB342" /> <ellipse cx="35" cy="91" rx="3" ry="5" fill="#689F38" /> <!-- ลำต้น --> <path stroke="black" stroke-width="0.1" fill="#795548" d="m35,100 v-7 l-2,-2 l2,1 v-2 l-1,-1 l1,0.5 l0.5,-1 l0.5,2 l1,-1 l-1,2 v3.5 l2,-2 l-2,3 v4"/> <rect fill="url(#isometric)" width="1000" height="1000"/> </svg> </body> </html>