SVG P’Faii Group B (Branch 7932)
✨ CHANIKARN KAMWONG
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#f1f6ff; box-shadow:0 0 20px #0002; width:100%; margin-top: 2em; } :root { --border: #c2cbe5; --windows: #5385C6; --door: #444444; --border-left: #A1A9CF ; --border-right: #7b8db4; --roof: #EDF8FF; --tree: #64995c; --clouds: #d0eaff; --tree1: #549849; } @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;600&display=swap'); </style> </head> <body> <svg viewBox="0 0 250 200"> <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> </defs> <defs> <linearGradient spreadMethod="pad" id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1;" /> <stop offset="44%" style="stop-color:rgb(31, 181, 243);stop-opacity:1;" /> <stop offset="100" style="stop-color:#7ac3ff;stop-opacity:1;" /> </linearGradient> </defs> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#a3cbff;stop-opacity:1" /> <stop offset="100%" style="stop-color:#25ba ;stop-opacity:1" /> </linearGradient> </defs> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#72a0d4;stop-opacity:1" /> <stop offset="100%" style="stop-color:#a8cbff ;stop-opacity:1" /> </linearGradient> </defs> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#ecf1ff;stop-opacity:1" /> <stop offset="100%" style="stop-color:#CAD3ED ;stop-opacity:1" /> </linearGradient> </defs> <defs> <pattern id="footpath" width="8" height="8" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0"> <rect fill="#e0e0e0" width="10" height="10" x="0" y="0"/> <rect fill="#e0e0e0" width="5" height="5" x="0" y="0"/> <rect fill="#d1d1d1" width="5" height="5" x="4" y="0"/> <rect fill="#d1d1d1" width="5" height="5" x="0" y="5"/> <!-- <rect fill="#C2C2C2" width="5" height="5" x="4" y="4"/> --> </pattern> </defs> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5" > <rect width="100" height="100" fill="#89DF8B"/> <path stroke="#5eb560" fill="transparent" stroke-linejoin="square" d="m1,0 l1,1 l-1,1 l1,1 m1,0 l1,1 l-1,1 l1,1" /> </pattern> </defs> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000" transform="scale(1.2)"/> <g transform="scale(1.5) translate(-33,0)"> <!-- <path d="M100, 10 v50 l-50,25 l50,25 l50,-25 l-50,-25 v-50 l50,25 v50 l-50,-25 v-50 l-50,25 v50" stroke="#0002" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> --> <!-- พื้น --> <rect width="300" height="300" fill="url(#gradient)" transform="rotate(-25 0 360) translate(50 0) skewX(39) "/> <rect width="500" height="500" fill="url(#grass)" transform="rotate(-26 0 360) translate(20 100) skewX(39.5) "/> <rect width="500" height="500" fill="#333333" transform="rotate(-25 0 360) translate(210 210) skewX(39) "/> <rect width="25" height="100" fill="url(#footpath)" transform="rotate(-25 0 360) translate(110 110) skewX(39) "/> <!-- ลายถนน --> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(239 225) skewX(39) "/> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(280 225) skewX(39) "/> <rect width="16" height="5" fill="yellow" transform="rotate(-25 0 360) translate(315 225) skewX(39) "/> <g transform="translate(15,-16) scale(0.86)"> <!-- ด้านข้างตึกใหญ่ --> <path d="M200,70 l11.9,-5.9 v69.5 l-11.5,5.9" fill="#a1abc9"></path> <!-- <path d= "M140,10 v70 l90.5,45.2 v-70 " stroke="white" stroke-width="0.5" fill="rgb(100 100 100)" transform="translate(-15,9)"></path> --> <!-- <path d="M200.5 70 v70 l30 -15"stroke="white" stroke-width="0.5" fill="rgb(100 100 100)"></path> --> <!-- หลังคาตึกใหญ่ --> <path d="M110,25.6 l90,44.6 l12,-6 l-91,-44.5 z" fill="var(--roof)" ></path> <!-- </g> --> <!-- ด้านหน้าตึกใหญ่ --> <path d= "M110,25 v70 l90.5,45.2 v-70z" fill="var(--border)" ></path> <!-- หน้าต่าง --> <path d="M115 35 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5" ></path> <path d="M115 45 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M115 55 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M115 65 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M115 75 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 56 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 66 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 76 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 86 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 96 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <path d="M160 106 v6 l36.2,18 v-2 v2 v-6 z" fill="url(#grad1)" stroke="white" stroke-width="0.5"></path> <!-- ลายหน้าต่าง --> <line x1="117" y1="36" x2="117" y2="42" stroke="white" stroke-width="0.3"></line> <line x1="123" y1="39" x2="123" y2="45" stroke="white" stroke-width="0.3"></line> <line x1="129" y1="42" x2="129" y2="48" stroke="white" stroke-width="0.3"></line> <line x1="135" y1="45" x2="135" y2="51" stroke="white" stroke-width="0.3"></line> <line x1="141" y1="48" x2="141" y2="54" stroke="white" stroke-width="0.3"></line> <line x1="147" y1="51" x2="147" y2="57" stroke="white" stroke-width="0.3"></line> <line x1="117" y1="46" x2="117" y2="52" stroke="white" stroke-width="0.3"></line> <line x1="123" y1="49" x2="123" y2="55" stroke="white" stroke-width="0.3"></line> <line x1="129" y1="52" x2="129" y2="58" stroke="white" stroke-width="0.3"></line> <line x1="135" y1="55" x2="135" y2="61" stroke="white" stroke-width="0.3"></line> <line x1="141" y1="58" x2="141" y2="64" stroke="white" stroke-width="0.3"></line> <line x1="147" y1="61" x2="147" y2="67" stroke="white" stroke-width="0.3"></line> <line x1="117" y1="56" x2="117" y2="62" stroke="white" stroke-width="0.3"></line> <line x1="123" y1="59" x2="123" y2="65" stroke="white" stroke-width="0.3"></line> <line x1="129" y1="62" x2="129" y2="68" stroke="white" stroke-width="0.3"></line> <line x1="135" y1="65" x2="135" y2="71" stroke="white" stroke-width="0.3"></line> <line x1="141" y1="68" x2="141" y2="74" stroke="white" stroke-width="0.3"></line> <line x1="147" y1="71" x2="147" y2="77" stroke="white" stroke-width="0.3"></line> <line x1="117" y1="66" x2="117" y2="72" stroke="white" stroke-width="0.3"></line> <line x1="123" y1="69" x2="123" y2="75" stroke="white" stroke-width="0.3"></line> <line x1="129" y1="72" x2="129" y2="78" stroke="white" stroke-width="0.3"></line> <line x1="135" y1="75" x2="135" y2="81" stroke="white" stroke-width="0.3"></line> <line x1="141" y1="78" x2="141" y2="84" stroke="white" stroke-width="0.3"></line> <line x1="147" y1="81" x2="147" y2="87" stroke="white" stroke-width="0.3"></line> <line x1="117" y1="76" x2="117" y2="82" stroke="white" stroke-width="0.3"></line> <line x1="123" y1="79" x2="123" y2="85" stroke="white" stroke-width="0.3"></line> <line x1="129" y1="82" x2="129" y2="88" stroke="white" stroke-width="0.3"></line> <line x1="135" y1="85" x2="135" y2="91" stroke="white" stroke-width="0.3"></line> <line x1="141" y1="88" x2="141" y2="94" stroke="white" stroke-width="0.3"></line> <line x1="147" y1="91" x2="147" y2="97" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="57.5" x2="163" y2="63.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="60.5" x2="169" y2="66.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="63.5" x2="175" y2="69.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="66.5" x2="181" y2="72.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="69.5" x2="187" y2="75.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="72.5" x2="193" y2="78.5" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="67.5" x2="163" y2="73.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="70.5" x2="169" y2="76.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="73.5" x2="175" y2="79.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="76.5" x2="181" y2="82.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="79.5" x2="187" y2="85.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="82.5" x2="193" y2="88.5" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="77.5" x2="163" y2="83.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="80.5" x2="169" y2="86.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="83.5" x2="175" y2="89.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="86.5" x2="181" y2="92.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="89.5" x2="187" y2="95.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="92.5" x2="193" y2="98.5" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="87.5" x2="163" y2="93.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="90.5" x2="169" y2="96.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="93.5" x2="175" y2="99.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="96.5" x2="181" y2="102.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="99.5" x2="187" y2="105.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="102.5" x2="193" y2="108.5" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="97.5" x2="163" y2="103.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="100.5" x2="169" y2="106.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="103.5" x2="175" y2="109.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="106.5" x2="181" y2="112.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="109.5" x2="187" y2="115.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="112.5" x2="193" y2="118.5" stroke="white" stroke-width="0.3"></line> <line x1="163" y1="107.5" x2="163" y2="113.5" stroke="white" stroke-width="0.3"></line> <line x1="169" y1="110.5" x2="169" y2="116.5" stroke="white" stroke-width="0.3"></line> <line x1="175" y1="113.5" x2="175" y2="119.5" stroke="white" stroke-width="0.3"></line> <line x1="181" y1="116.5" x2="181" y2="122.5" stroke="white" stroke-width="0.3"></line> <line x1="187" y1="119.5" x2="187" y2="125.5" stroke="white" stroke-width="0.3"></line> <line x1="193" y1="122.5" x2="193" y2="128.5" stroke="white" stroke-width="0.3"></line> </g> <!-- ต้นไม้ของจิ --> <g transform="translate(14,-50) scale(1)"> <rect x="30" y="160" width="5" height="30" fill="#827070"/> <ellipse cx="32.5" cy="190" rx="2.5" ry="1" fill="#827070"/> <line stroke="#827070" x1="25" x2="32" y1="177" y2="180"></line> <line stroke="#827070" x1="35" x2="40" y1="172" y2="170"></line> <circle cx="25" cy="178" r="3" fill="var(--tree1)"/> <circle cx="40" cy="170" r="3" fill="var(--tree1)"/> <ellipse cx="25" cy="165" rx="8" ry="5" fill="var(--tree1)"/> <ellipse cx="40" cy="160" rx="8" ry="4" fill="var(--tree1)"/> <ellipse cx="32" cy="158" rx="12" ry="8" fill="var(--tree1)"/> </g> <g transform="translate(-25,-105) scale(1)"> <rect x="175" y="160" width="5" height="38" fill="#695959"/> <ellipse cx="177" cy="155" rx="12" ry="8" fill="#407338"/> <ellipse cx="177" cy="165" rx="10" ry="6" fill="#407338"/> <circle cx="185" cy="160" r="5" fill="#407338"/> <circle cx="168" cy="160" r="5" fill="#407338"/> <circle cx="177" cy="150" r="7" fill="#407338"/> <circle cx="177" cy="168" r="7" fill="#407338"/> <ellipse cx="172" cy="184" rx="4" ry="2" fill="#407338"/> <ellipse cx="183" cy="179" rx="4" ry="2" fill="#407338"/> </g> <!-- ชาน --> <!-- <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="scale(1) translate(44,67)"></path> --> <rect x="100.5" y="99.5" width="6.5" height="5" fill="#444444"></rect> <rect x="164.5" y="99.5" width="6.5" height="5" fill="#444444"></rect> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="#444444" stroke-width="0.2" transform="scale(1.2) translate(12.5,62)"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="var(--roof)" stroke-width="0.2" transform="scale(1.2) translate(12.5,58)"></path> <!-- บันไดแต่ขกทำอะเดะค่อยละกัน --> <!-- <rect x="105.5" y="99.5" width="39.5" height="5" fill="WHITE" transform="skewX(12) skewY(-60) translate(16,74)"/> --> <!-- เมฆ --> <g transform="translate(0,-50) scale(0.7)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(3,-43) scale(0.5)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(-10,-26) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <!-- ต้นไม้ --> <g transform="scale(1.5) translate(-120,-50)"> <rect x="161" y="71" width="4" height="25" fill="#514949"/> <circle cx="158" cy="75" r="5" fill="#215119"/> <circle cx="163" cy="75" r="5" fill="#215119"/> <circle cx="168" cy="75" r="5" fill="#215119"/> <circle cx="166" cy="72" r="5" fill="#215119"/> <circle cx="161" cy="72" r="5" fill="#215119"/> <circle cx="161" cy="70" r="5" fill="#215119"/> <circle cx="165" cy="70" r="5" fill="#215119"/> <circle cx="163" cy="66" r="5" fill="#215119"/> <circle cx="163" cy="63" r="4" fill="#215119"/> <circle cx="163" cy="62" r="3.5" fill="#215119"/> <rect x="165" y="75" width="5" height="1" fill="#514949" transform="rotate(20,40,-40) translate(28,-38)"/> </g> <!-- พุ่มไม้บังทิพย์ (หลังตึกหลัก) --> <g transform="translate(-30,-24)"> <circle cx="92" cy="92" r=5 fill="var(--tree)"></circle> <circle cx="89" cy="95" r=5 fill="var(--tree)"></circle> <circle cx="93" cy="102" r=5 fill="var(--tree)"></circle> <circle cx="96" cy="101" r=5 fill="var(--tree)"></circle> <circle cx="94" cy="96" r=5 fill="var(--tree)"></circle> <circle cx="89" cy="100" r=5 fill="var(--tree)"></circle> </g> <!-- หมิว --> <path d="M99,67 v31 Q132,97 136,82 v-50" fill="url(#grad1)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M65,51.5 v30 l36.2,18 v-30" fill="url(#grad1)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- เสา --> <path d="M64,53 v35 Q63,88 70.5,88 v-35" fill="url(#grad3)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- <path d="M95,69 v31 Q94,105 101,103 v-31" fill="rgb(100 100 100)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> --> <rect x="97" y="70" width="6.5" height="37" fill="url(#grad3)"></rect> <ellipse cx="100.2" cy="107" rx="3.3"ry="2" fill="url(#grad3)"></ellipse> <ellipse cx="67.2" cy="88" rx="3.3"ry="2" fill="url(#grad3)"></ellipse> <!-- พุ่มไม้บังทิพย์ (หน้าคอมม่อน) --> <g transform="translate(50,-20)"> <circle cx="89" cy="94" r=5 fill="var(--tree)"></circle> <circle cx="93" cy="102" r=5 fill="var(--tree)"></circle> <circle cx="96" cy="101" r=5 fill="var(--tree)"></circle> <circle cx="94" cy="96" r=5 fill="var(--tree)"></circle> <circle cx="89" cy="100" r=5 fill="var(--tree)"></circle> </g> <!-- กลม --> <line x1="123" y1="50" x2="123" y2="95.7" stroke="white" stroke-width="0.3"></line> <line x1="128" y1="50" x2="128" y2="93.5" stroke="white" stroke-width="0.3"></line> <line x1="133" y1="50" x2="133" y2="88.8" stroke="white" stroke-width="0.3"></line> <line x1="108" y1="50" x2="108" y2="97.5" stroke="white" stroke-width="0.3"></line> <line x1="113" y1="50" x2="113" y2="97" stroke="white" stroke-width="0.3"></line> <line x1="118" y1="50" x2="118" y2="96" stroke="white" stroke-width="0.3"></line> <path d="M104,67 v5 Q137,75 138,58 v" fill="var(--border-right)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <circle cx="55" cy="37" r="25" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="rotate(-10 50 100) translate(47.5 50) skewX(38.5) scale(1 0.5)" /> <path d="M103.5,75 q10,3 30,-2" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M103.5,80 q10,3 30,-2" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M103.5,85 q10,3 30,-2" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M103.5,90 q10,3 30,-2" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M103.5,95 q10,3 25,-2" fill="none" stroke="white" stroke-width="0.3"></path> <!-- ประตูข้าง -->/ <path d="M70.5,62 l26.5,12.25" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M70.5,67 l26.5,12.25" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M70.5,72 l26.5,12.25" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M70.5,77 l26.5,12.25" fill="none" stroke="white" stroke-width="0.3"></path> <path d="M70.5,82 l26.5,12.25" fill="none" stroke="white" stroke-width="0.3"></path> <line x1="75" y1="50" x2="75" y2="86.5" stroke="white" stroke-width="0.3"></line> <line x1="80" y1="50" x2="80" y2="89" stroke="white" stroke-width="0.3"></line> <line x1="85" y1="50" x2="85" y2="91.5" stroke="white" stroke-width="0.3"></line> <line x1="90" y1="50" x2="90" y2="94" stroke="white" stroke-width="0.3"></line> <line x1="95" y1="50" x2="95" y2="96.5" stroke="white" stroke-width="0.3"></line> <g transform="translate(213,8) scale(-1,0.9)"> <path d="M120,76 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="url(#grad2)" stroke="url(#grad2)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1,-1.1)"/> </g> <!-- <path d="M79,74 v14.4 l10,5 v-14.4" stroke="none" stroke-width="0.5"></path> --> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="var(--border-right)"></path> <path d="M79,88.3 l-3,1.9 l-10,10 l10,5 l10,-10 l3,-1.9 l-10,-5" fill="var(--roof)"></path> <path d="M79,88.4 v-1.7 l-3,1.9 l-10,10 v1.7" fill="var(--border-right)" transform="translate(10,5)"></path> <g transform="translate(10,5)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <g transform="translate(-0.1,0)" stroke="#cdd"> <path d="M79,86.7 v-1.7 l-3,1.9 l-10,10" stroke-width="0.6" fill="none"></path> <path d="M79,86.5 l-3,1.9 l-10,10 v-1.7" stroke-width="0.6" fill="none"></path> </g> <!-- ประตู --> <path d="M120,76 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M135,67 v20 l2,1 v-20z" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M120,75 l15,-7.9 l2,2 v20 l-15,8" fill="var(--door)" stroke="var(--door)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M125,80 l10,-5 v15.2 l-10,5.5 " fill="url(#grad2)" stroke="url(#grad2)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <!-- ชั้น2 --> <g transform="translate(0,12)"> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="url(#grad1)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <g> <line x1="68" y1="30" x2="68" y2="42" stroke="white" stroke-width="0.2"></line> <line x1="73" y1="30" x2="73" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="78" y1="30" x2="78" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="83" y1="30" x2="83" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="88" y1="30" x2="88" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="93" y1="30" x2="93" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="100" y1="30" x2="100" y2="58" stroke="white" stroke-width="0.2"></line> <line x1="107" y1="30" x2="107" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="112" y1="30" x2="112" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="117" y1="30" x2="117" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="122" y1="30" x2="122" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="127" y1="30" x2="127" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="132" y1="30" x2="132" y2="42" stroke="white" stroke-width="0.2"></line> </g> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="#d9eaf5" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="var(--border-left)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="var(--border-right)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> <!-- พุ่มไม้บังทิพย์ (ข้างรันเวย์) --> <circle cx="93" cy="102" r=5 fill="var(--tree)"></circle> <circle cx="96" cy="101" r=5 fill="var(--tree)"></circle> <circle cx="94" cy="96" r=5 fill="var(--tree)"></circle> <circle cx="89" cy="100" r=5 fill="var(--tree)"></circle> <!-- ชั้นสาม --> <!-- กระจก --> <path d="M64,40 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M64,34 v6 l36.2,18 v-6 v6 l36,-18 v-6 z" fill="url(#grad1)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <g> <line x1="68" y1="30" x2="68" y2="42" stroke="white" stroke-width="0.2"></line> <line x1="73" y1="30" x2="73" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="78" y1="30" x2="78" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="83" y1="30" x2="83" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="88" y1="30" x2="88" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="93" y1="30" x2="93" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="100" y1="30" x2="100" y2="58" stroke="white" stroke-width="0.2"></line> <line x1="107" y1="30" x2="107" y2="54.3" stroke="white" stroke-width="0.2"></line> <line x1="112" y1="30" x2="112" y2="52" stroke="white" stroke-width="0.2"></line> <line x1="117" y1="30" x2="117" y2="49.5" stroke="white" stroke-width="0.2"></line> <line x1="122" y1="30" x2="122" y2="47" stroke="white" stroke-width="0.2"></line> <line x1="127" y1="30" x2="127" y2="44.5" stroke="white" stroke-width="0.2"></line> <line x1="132" y1="30" x2="132" y2="42" stroke="white" stroke-width="0.2"></line> </g> <!-- ส่วนนูน2 --> <path d="M64,32 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,13.2 l30,15 l-30,15 l-30,-15 z" fill="#d9eaf5" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- <!-- หลังคา2 --> <path d="M72.5,27.9 v1.5 l27.5,13.7 v-1.5" fill="var(--border-left)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <path d="M99.9,41.5 v1.5 l27.5,-13.7 v-1.5" fill="var(--border-right)" stroke-width="0" stroke="black" transform="scale(1.2) translate(-16.5,-1.5)"></path> <!-- <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="black" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> --> <!-- หลังคาส่วนนูน --> <path d="M64,28.2 v2 l36.2,18 v-2 v2 l36,-18 v-2 z" fill="var(--border)" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,10 l30,15 l-30,15 l-30,-15 z" fill="var(--roof)" stroke-width="0.2" transform="scale(1.2) translate(-16.5,-1.5)"></path> </g> <!-- บันได --> <g transform="translate(-0.5,-7.3)"> <polygon points="153.3,183.5 157,185 210,158.5 207,156.5" fill="#EDF8FF"></polygon> <polygon points="157,185 210,158.5 210,162 157,189 " fill="#acc1cf"></polygon> <polygon points="157,189 161,191 214,164 210,162" fill="#EDF8FF"></polygon> <polygon points="214,164 214,169 161,194 161,191 " fill="#acc1cf"/> <polygon points="153.3,183.5 153.3,191 161,194 161,191 157,189 157,185"fill="#93aec0"/> </g> <!-- ป้ายคณะ --> <g transform="skewX(-5) skewY(26) translate(60,-40) scale(1.1)"> <rect x="50" y="120" width="50" height="15" fill="#CAD7DF"stroke-width=".25" stroke-linejoin="round" stroke="#" /> <text x="52" y="126" fill="#8c6c12" font-size="4.5px"; font-family='Mitr', sans-serif;> คณะเทคโนโลยีสารสนเทศ</text> <text x="51" y="132" fill="#8c6c12" font-size="2.4px"; font-family='Mitr', sans-serif;>FACULTY OF INFORMATION TECHNOLOGY</text> <rect x="50" y="120" width="50.3" height="3" fill="#444444" transform="skewX(-35) skewY(0) translate(84,-3)"/> </g> <g transform="skewX(-5) skewY(26)"> <rect x="50" y="120" width="2.7" height="16.5" fill="#444444" transform="skewX(0) skewY(-55) translate(120,215.2) "/> </g> </svg> <svg viewBox="0 0 300 200"> <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> </defs> <!-- code here --> <rect fill="url(#isometric)" width="1000" height="1000"/> <!-- กล่องสี่เหลี่ยม --> <path d="M100, 10 v50 l-50,25 l50,25 l50,-25 l-50,-25 v-50 l50,25 v50 l-50,-25 v-50 l-50,25 v50" stroke="#0002" fill="none" stroke-linecap="round" stroke-linejoin="round"></path> <rect width="300" height="300" fill="url(#gradient)" transform="rotate(-25 0 360) translate(50 0) skewX(39) "/> <g transform="scale(1.5) "> <defs> <pattern id="grass1" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="5" height="5" > <rect width="100" height="100" fill="#5eb560"/> <path stroke="#3ea240" fill="transparent" stroke-linejoin="square" d="m1,0 l1,1 l-1,1 l1,1 m1,0 l1,1 l-1,1 l1,1" /> </pattern> </defs> <!-- สนามหญ้า --> <polygon points="0,60 200,60 200,150 0,150" fill="url(#grass1)"></polygon> <!-- พื้น --> <path d="M50,80 v10 l50,25 v-10" fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M150,80 v10 l-50,25 v-10" fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,55 l-50,25 l50,25 l50,-25 " fill="gray" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- บันไดซ้าย --> <polygon points="100,115 95,117.5 45,92 50,90"fill="white"/> <polygon points="45,92 45,97.5 95,122.5 95,117.5" fill="#e6e6e6"/> <polygon points="95,122.5 45,97.5 40,100 90,125"fill="white"/> <polygon points="90,125 40,100 40,105 90,130" fill="#e6e6e6"/> <polygon points="100,115 100,125 90,130 90,125 95,122.5 95,117.5 "fill="brown"/> <!-- บันไดขวา --> <polygon points="100,115 105,117.5 155,92.5 150,90" fill="#e6e6e6"/> <polygon points="105,117.5 105,122.5 155,97.5 155,92.5"fill="#d6d4d4"></polygon> <polygon points="105,122.5 155,97.5 160,100 110,125"fill="#e6e6e6"></polygon> <polygon points="110,125 160,100 160,105 110,130" fill="#d6d4d4"/> <polygon points="100,115 100,125 110,130 110,125 105,122.5 105,117.5" fill="grey"></polygon> <!-- เสาหน้า --> <ellipse cx="100" cy="129" rx="10" ry="5" fill="#c9c7c7"/> <rect x="90" y="70" width="20" height="60" fill="#c9c7c7"/> <!-- ผนังซ้าย --> <path d="M50,35 l0,45 l50,-25 l0,-45" fill="#7dd2fa"/> <!-- ผนังขวา --> <path d="M100,10 l0,45 l50,25 l0,-45" fill="#7dd2fa"/> <!-- เสาข้างเสาหน้า --> <polygon points="80,70 80,95 90,100 90,70" fill="#dcdcdc"/> <polygon points="110 ,70 110,100 120,95 120,70" fill="#ababab"/> <!-- เสาข้างซ้าย --> <polygon points="50,50 50,80 60,85 60,50" fill="#dcdcdc"/> <polygon points="60,50 60,85 70,80 70,50 " fill="#b8b8b8"/> <!-- เสาข้างขวา --> <polygon points="150,50 150,80 140,85 140,50" fill="#ababab"/> <polygon points="140,50 140,85 130,80 130,50" fill="#b8b8b8"/> <g transform="translate(60,-85) scale(1)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(-25,-35) scale(0.5)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(-10,-26) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(128,-38) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(128,-36) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <g transform="translate(-50,-30) scale(0.6)"> <circle cx="89" cy="97" r=5 fill="var(--clouds)"></circle> <circle cx="95" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="91" cy="102" r=5 fill="var(--clouds)"></circle> <circle cx="98" cy="99" r=5 fill="var(--clouds)"></circle> <circle cx="94" cy="95" r=5 fill="var(--clouds)"></circle> <circle cx="87" cy="100" r=5 fill="var(--clouds)"></circle> </g> <!-- หลังคา --> <path d="M45,35 v25 l55,25 v-25" fill="#a8a7a7" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M155,35 v25 l-55,25 v-25" fill="#999999" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M100,10 l-55,25 l55,25 l55,-25 " fill="#bebebe" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <!-- กระจกชั้น2 --> <path d="M45,40 v15 l55,25 v-15" fill="#7dd2fa" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M155,40 v15 l-55,25 v-15" fill="#6bb8db" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" stroke="" ></path> <line x1="100" y1="65" x2="100" y2="80" stroke="white" stroke-width="0.4"></line> <line x1="115" y1="58.5" x2="115" y2="73.5" stroke="white" stroke-width="0.4"></line> <line x1="130" y1="51.5" x2="130" y2="66.5" stroke="white" stroke-width="0.4"></line> <line x1="145" y1="44.5" x2="145" y2="59.5" stroke="white" stroke-width="0.4"></line> <line x1="155" y1="40" x2="155" y2="55" stroke="white" stroke-width="0.4"></line> <line x1="85" y1="58.5" x2="85" y2="73.5" stroke="white" stroke-width="0.4"></line> <line x1="70" y1="51.5" x2="70" y2="66.5" stroke="white" stroke-width="0.4"></line> <line x1="55" y1="44.5" x2="55" y2="59.5" stroke="white" stroke-width="0.4"></line> <line x1="45" y1="40" x2="45" y2="55" stroke="white" stroke-width="0.4"></line> <line x1="45" y1="55" x2="100" y2="80" stroke="white" stroke-width="1"></line> <line x1="45" y1="40" x2="100" y2="65" stroke="white" stroke-width="1"></line> <line x1="100" y1="65" x2="155" y2="40" stroke="white" stroke-width="1"></line> <line x1="100" y1="80" x2="155" y2="55" stroke="white" stroke-width="1"></line> <line x1="100" y1="72" x2="45" y2="47.5" stroke="white" stroke-width="0.3"></line> <line x1="100" y1="72" x2="155" y2="47.5" stroke="white" stroke-width="0.3"></line> <!-- มุงหลังคา --> <path d="M100,15 l0,35 l30,-13" fill="#6bb8db" stroke="" stroke-width="0.5"/> <path d="M100,15 l-30,22 l30,13" fill="#7dd2fa" stroke="" stroke-width="0.5"/> <!-- เสาบนหลังคา --> <ellipse cx="100" cy="50" rx="10" ry="5" fill="#c9c7c7"/> <rect x="90" y="30" width="20" height="20" fill="#c9c7c7"/> <ellipse cx="100" cy="30" rx="10" ry="5" fill="#c9c7c7"/> <line x1="50" y1="25" x2="100" y2="50" stroke="white" stroke-width="0.9"></line> <line x1="50" y1="27" x2="100" y2="52" stroke="white" stroke-width="0.9"></line> <line x1="50" y1="29" x2="100" y2="54" stroke="white" stroke-width="0.9"></line> <line x1="50" y1="25" x2="50" y2="35" stroke="white" stroke-width="0.9"></line> <line x1="60" y1="30" x2="60" y2="40" stroke="white" stroke-width="0.9"></line> <line x1="70" y1="35" x2="70" y2="45" stroke="white" stroke-width="0.9"></line> <line x1="80" y1="40" x2="80" y2="50" stroke="white" stroke-width="0.9"></line> <line x1="90" y1="45" x2="90" y2="55" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="50" x2="100" y2="60" stroke="white" stroke-width="0.9"></line> <!-- --> <line x1="100" y1="50" x2="150" y2="25" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="52" x2="150" y2="27" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="54" x2="150" y2="29" stroke="white" stroke-width="0.9"></line> <line x1="110" y1="45" x2="110" y2="55" stroke="white" stroke-width="0.9"></line> <line x1="120" y1="40" x2="120" y2="50" stroke="white" stroke-width="0.9"></line> <line x1="130" y1="35" x2="130" y2="45" stroke="white" stroke-width="0.9"></line> <line x1="140" y1="30" x2="140" y2="40" stroke="white" stroke-width="0.9"></line> <line x1="150" y1="25" x2="150" y2="35" stroke="white" stroke-width="0.9"></line> <!-- --> <line x1="100" y1="0" x2="150" y2="25" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="2" x2="150" y2="27" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="4" x2="150" y2="29" stroke="white" stroke-width="0.9"></line> <line x1="140" y1="20" x2="140" y2="30" stroke="white" stroke-width="0.9"></line> <line x1="130" y1="15" x2="130" y2="25" stroke="white" stroke-width="0.9"></line> <line x1="120" y1="10" x2="120" y2="20" stroke="white" stroke-width="0.9"></line> <line x1="110" y1="5" x2="110" y2="15" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="0" x2="100" y2="10" stroke="white" stroke-width="0.9"></line> <!-- --> <line x1="100" y1="0" x2="50" y2="25" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="2" x2="50" y2="27" stroke="white" stroke-width="0.9"></line> <line x1="100" y1="4" x2="50" y2="29" stroke="white" stroke-width="0.9"></line> <line x1="90" y1="5" x2="90" y2="15" stroke="white" stroke-width="0.9"></line> <line x1="80" y1="10" x2="80" y2="20" stroke="white" stroke-width="0.9"></line> <line x1="70" y1="15" x2="70" y2="25" stroke="white" stroke-width="0.9"></line> <line x1="60" y1="20" x2="60" y2="30" stroke="white" stroke-width="0.9"></line> <!-- ถนน --> <polygon points="200 ,100 200 ,150 100,200 100,150" fill="#363434" stroke="" stroke-width="0.5"/> <polygon points="100,200 100,150 0,100 0,150" fill="#363434"></polygon> <polygon points="200,120 200,130 180,140 170,135" fill="yellow"/> <polygon points="160,140 170,145 130,165 120,160" fill="yellow"/> <polygon points="0,120 0,130 30,145 40,140" fill="yellow"/> <polygon points="50, 145 40,150 80,170 90,165 "fill="yellow"/> <!-- ต้นไม้ --> <polygon points="10,100 20,100 20,70 10,70" fill="#613613"/> <ellipse cx="15" cy="100" rx="5" ry="2.5" fill="#613613"/> <circle cx="15" cy="65" r="17" fill="var(--tree1)"/> <circle cx="28" cy="60" r="10" fill="var(--tree1)"/> <circle cx="28" cy="70" r="10" fill="var(--tree1)"/> <circle cx="20" cy="52" r="10" fill="var(--tree1)"/> <circle cx="7" cy="54" r="10" fill="var(--tree1)"/> <circle cx="20" cy="76" r="10" fill="var(--tree1)"/> <circle cx="7" cy="76" r="10" fill="var(--tree1)"/> <rect x="176.6" y="50" width="7" height="20" fill="#613613"/> <ellipse cx="180" cy="70" rx="3.5" ry="1.25" fill="#613613"/> <circle cx="182" cy="45" r="12" fill="var(--tree1)"/> <circle cx="173" cy="45" r="7" fill="var(--tree1)"/> <circle cx="189" cy="45" r="7" fill="var(--tree1)"/> <circle cx="185" cy="38" r="7" fill="var(--tree1)"/> <circle cx="177" cy="38" r="7" fill="var(--tree1)"/> <circle cx="176" cy="52" r="7" fill="var(--tree1)"/> <circle cx="185" cy="52" r="7" fill="var(--tree1)"/> <!-- หญ้าย่อยๆ .1 --> <line x1="15.5" y1="100" x2="17" y2="105" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="15" y1="100" x2="17" y2="105" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="17.5" y1="99" x2="17" y2="105" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="17" y1="99" x2="17" y2="106" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="19.5" y1="100" x2="17" y2="105" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="19" y1="100" x2="17" y2="105" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .2 --> <line x1="20.5" y1="98" x2="22" y2="103" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="20" y1="98" x2="22" y2="103" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="22.5" y1="97" x2="22" y2="103" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="22" y1="97" x2="22" y2="104" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="24.5" y1="98" x2="22" y2="103" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="24" y1="98" x2="22" y2="103" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .3 --> <line x1="10.5" y1="97" x2="12" y2="102" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="10" y1="97" x2="12" y2="102" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="12.5" y1="96" x2="12" y2="103" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="12" y1="96" x2="12" y2="103" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="14.5" y1="97" x2="12" y2="102" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="14" y1="97" x2="12" y2="102" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .4 --> <line x1="170.5" y1="70" x2="172" y2="75" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="170" y1="70" x2="172" y2="75" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="172.5" y1="69" x2="172" y2="74" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="172" y1="69" x2="172" y2="74" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="174.5" y1="70" x2="172" y2="75" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="174" y1="70" x2="172" y2="75" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .5 --> <line x1="175.5" y1="69" x2="177" y2="74" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="175" y1="69" x2="177" y2="74" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="177.5" y1="68" x2="177" y2="73" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="177" y1="68" x2="177" y2="73" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="179.5" y1="69" x2="177" y2="74" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="179" y1="69" x2="177" y2="74" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .6 --> <line x1="165.5" y1="100" x2="167" y2="105" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="165" y1="100" x2="167" y2="105" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="167.5" y1="99" x2="167" y2="104" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="167" y1="99" x2="167" y2="104" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="169.5" y1="100" x2="167" y2="105" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="169" y1="100" x2="167" y2="105" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .6 --> <line x1="160.5" y1="102" x2="162" y2="107" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="160" y1="102" x2="162" y2="107" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="162.5" y1="101" x2="162" y2="106" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="162" y1="101" x2="162" y2="106" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="164.5" y1="102" x2="162" y2="107" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="164" y1="102" x2="162" y2="107" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .7 --> <line x1="40.5" y1="65" x2="42" y2="70" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="40" y1="65" x2="42" y2="70" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="42.5" y1="64" x2="42" y2="69" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="42" y1="64" x2="42" y2="69" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="44.5" y1="65" x2="42" y2="70" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="44" y1="65" x2="42" y2="70" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <!-- หญ้าย่อยๆ .8 --> <line x1="45.5" y1="69" x2="47" y2="74" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="45" y1="69" x2="47" y2="74" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="47.5" y1="68" x2="47" y2="73" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="47" y1="68" x2="47" y2="73" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> <line x1="49.5" y1="69" x2="47" y2="74" stroke="hsla(131, 55%, 29%, 1)" stroke-width="0.4"></line> <line x1="49" y1="69" x2="47" y2="74" stroke="hsla(131, 55%, 52%, 1)" stroke-width="0.5"></line> </g> </svg> </body> </html>