Group A:P’Getty Night IT KMITL
✨ นายไกรวิน แนวอินทร์
<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> <html> <head> <title>Let's Start </title> <style> body{ background:grey; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:hsl(160, 20%, 30%); box-shadow:0 0 20px #0002; width:100%; } .light{ animation: kaprib 5s infinite; } @keyframes kaprib{ 0% {opacity:0;} 15% {opacity:0;} 20% {opacity:1;} 25% {opacity:0;} 30% {opacity:1;} 95% {opacity:0;} 100% {opacity:1;} </style> </head> <body> <svg viewBox="0 0 200 90"> <g transform="scale(0.6) translate(40 -10)"> <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="mir" viewBox="0 0 1 1.5" width="5" height="7" patternUnits="userSpaceOnUse" x="0" y="0"> <rect width="1" height="1.5" fill="#5C6BC0"/> </pattern> <pattern id="mir1" viewBox="0 0 1 1" width="5" height="4.9" patternUnits="userSpaceOnUse" x="0" y="0"> <rect width="0.97" height="0.9" fill="#5C6BC0"/> </pattern> <pattern id="road-line" viewBox="0 0 2 1" width="30%" height="10%" patternUnits="userSpaceOnUse" x="0" y="0"> <rect width="2" height="1" fill="#FFC107"/> </pattern> <pattern id="grass" viewBox="0 0 10 10" width="6%" height="6%" patternUnits="userSpaceOnUse" x="0" y="0"> <path d="M 2 4 l-2 1 m .5 -2 l-1 1 m -1 -1 l-.5 .5" stroke="#689F38" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/> </pattern> </defs> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="500" height="1000" x="-200" y="-90" fill="url(#grass)"/> </g> <!-- code here --> <rect fill="url(#isometrc)" width="1000" height="1000"/> <g transform="translate(30 90) scale(.52)"> <!-- ถนน --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="10000" height="50" x="-170" y="200" fill="#37474F"/> <rect width="10000" height="5" x="-110" y="220" fill="url(#road-line)"/> <rect width="50" height="200" x="110" y="0" fill="#37474F"/> <path d="M 160 0 c 0 0,0 -40 ,-50 -40 h-3000 v50 h80 c 0 0, 15 -1, 30 20" fill="#37474F"/> </g> <use href="#rua" x="-240" y="-120"/> <use href="#torua" x="-240" y="-120"/> <use href="#toruacol" x="-200" y="-100"/> <use href="#rua" x="-200" y="-100"/> <use href="#toruacol" x="-160" y="-80"/> <use href="#rua" x="-160" y="-80"/> <use href="#toruacol" x="-120" y="-60"/> <use href="#rua" x="-120" y="-60"/> <use href="#toruacol" x="-80" y="-40"/> <use href="#rua" x="-80" y="-40"/> <use href="#rua" x="-500" y="90"/> <use href="#toruacol" x="-460" y="110"/> <use href="#rua" x="-460" y="110"/> <use href="#toruacol" x="-420" y="130"/> <use href="#rua" x="-420" y="130"/> <use href="#toruacol" x="-380" y="150"/> <use href="#rua" x="-380" y="150"/> <use href="#toruacol" x="-40" y="-20"/> <use href="#rua" x="-40" y="-20"/> <!-- ท่อรั้ว ข้าง --> <g id="toruacol"> <g transform="skewY(-26.5)"> <path d="M 365 135 c 0 0, -4 2, 0 4 l30 30 c 0 0, 4 2, 0 -4 z" stroke="none" stroke-width=".5" fill="hsl(240, 20%, 60%)"/> <path d="M 365 140 c 0 0, -4 2, 0 4 l30 30 c 0 0, 4 2, 0 -4 z" stroke="none" stroke-width=".5" fill="hsl(240, 20%, 60%)"/> </g> </g> <!-- รั้ว --> <g id="rua"> <g transform="skewY(-26.5)"> <rect width="10" height="20" x="400" y="170" fill="hsl(20, 50%, 30%)"/> </g> <g transform="skewY(26.5)"> <rect width="10" height="20" x="390" y="-230" fill="hsl(20, 50%, 20%)"/> </g> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="10" height="10" x="300" y="170" fill="hsl(240, 20%, 60%)"/> </g> </g> <!-- ท่อรั้ว หน้า --> <g id="torua"> <g transform="skewY(-26.5)"> <path d="M 395 170 c 0 0,4 2,0 4 h-25 c 0 0,-4 -3,0 -4z" stroke="none" fill="hsl(240, 20%, 60%)"/> <path d="M 395 175 c 0 0,4 2,0 4 h-25 c 0 0,-4 -3,0 -4z" stroke="none" fill="hsl(240, 20%, 60%)"/> </g> </g> <use href="#rua" x="-40" y="20"/> <use href="#torua" x="-40" y="20"/> <use href="#rua" x="-80" y="40"/> <use href="#torua" x="-80" y="40"/> <use href="#rua" x="-120" y="60"/> <use href="#rua" x="-120" y="60"/> <use href="#rua" x="-180" y="90"/> <use href="#torua" x="-180" y="90"/> <use href="#rua" x="-220" y="110"/> <use href="#torua" x="-220" y="110"/> <use href="#rua" x="-260" y="130"/> <use href="#torua" x="-260" y="130"/> <use href="#rua" x="-300" y="150"/> <use href="#torua" x="-300" y="150"/> <use href="#torua" x="-300" y="150"/> <use href="#toruacol" x="-340" y="170"/> <use href="#rua" x="-340" y="170"/> <use href="#rua" x="-280" y="-100"/> <use href="#torua" x="-280" y="-100"/> <use href="#rua" x="-320" y="-80"/> <use href="#torua" x="-320" y="-80"/> <use href="#rua" x="-360" y="-60"/> <use href="#torua" x="-360" y="-60"/> <use href="#rua" x="-400" y="-40"/> <use href="#torua" x="-400" y="-40"/> <use href="#rua" x="-440" y="-20"/> <use href="#torua" x="-440" y="-20"/> <use href="#rua" x="-480" y="0"/> <use href="#torua" x="-480" y="-0"/> <use href="#rua" x="-520" y="20"/> <use href="#torua" x="-520" y="20"/> <!-- หน้า --> <g transform="skewY(-26.5)"> <rect width="60" height="30" x="45" y="80" fill="hsl(240, 10%, 75%)"/> <rect width="60" height="60" x="-15" y="-10" fill="hsl(240, 10%, 75%)"/> <path d="M 50 110 c 0 0, 40 15, 50 0 v-25 c 0 0,0 25, -50 0z" stroke="black" stroke-width="0.1" fill="hsl(240, 10%, 20%)"/> <path d="M 50 110 c 0 0, 40 15, 50 0 v-25 c 0 0,0 25, -50 0z" stroke="black" stroke-width="0.1" fill="url(#mir)"/> <rect width="15" height="60" x="110" y="30" fill="hsl(240, 10%, 75%)"/> </g> <!-- ข้าง --> <g transform="skewY(26.5)"> <rect width="40" height="30" x="5" y="35" fill="hsl(240, 20%, 50%)"/> <rect width="20" height="60" x="-35" y="5" fill="hsl(240, 20%, 50%)"/> <rect width="15" height="25" x="65" y="-55" fill="hsl(240, 20%, 50%)"/> <rect width="35" height="60" x="75" y="-80" fill="hsl(240, 20%, 50%)"/> </g> <!-- บน --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="60" height="40" x="35" y="50" fill="hsl(240, 20%, 60%)"/> <rect width="60" height="20" x="65" y="-20" fill="hsl(240, 20%, 60%)"/> <path d="M 35 95 c 0 0, 20 25, 50 0" stroke="black" stroke-width="0.1" fill="hsl(240, 20%, 60%)"/> <rect width="10" height="25" x="125" y="20" fill="hsl(240, 20%, 60%)"/> </g> <!-- หน้า1 --> <g transform="skewY(-26.5)"> <rect width="10" height="25" x="90" y="35" fill="hsl(240, 20%, 30%)"/> <rect width="10" height="25" x="90" y="35" fill="url(#mir1)"/> </g> <!-- ข้าง1 --> <g transform="skewY(26.5)"> <rect width="15" height="20" x="65" y="-55" fill="hsl(240, 20%, 50%)"/> </g> <!-- บน1 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="15" height="35" x="150" y="5" fill="hsl(240, 20%, 60%)"/> </g> <g transform="translate(7.5 -3.5)"> <!-- หน้า2 --> <g transform="skewY(-26.5)"> <path d="M 65 90 v35 c 0 0, 2.5 3, 5 2.5 v-35" stroke="hsl(240, 20%, 60%)" stroke-width="0.1" fill="hsl(240, 10%, 75%)"/> <path d="M 95 90 v35 c 0 0, 2.5 3, 5 2.5 v-35" stroke="hsl(240, 20%, 60%)" stroke-width="0.1" fill="hsl(240, 10%, 75%)"/> <rect width="30" height="20" x="75" y="85" fill="hsl(240, 10%, 75%)"/> <rect width="30" height="5" x="75" y="87.5" fill="hsl(240, 0%, 7%)"/> <rect width="30" height="5" x="75" y="95.5" fill="hsl(240, 0%, 7%)"/> <rect width="30" height="5" x="75" y="87.5" fill="url(#mir)"/> <rect width="30" height="5" x="75" y="95.5" fill="url(#mir)"/> </g> <!-- ข้าง2 --> <g transform="skewY(26.5)"> <path d="M 75 10 v20 h-20 v-5 h-40 v-20z" fill="hsl(240, 20%, 50%)"/> <rect width="30" height="5" x="45" y="12.5" fill="hsl(240, 0%, 7%)"/> <rect width="30" height="5" x="45" y="20.5" fill="hsl(240, 0%, 7%)"/> <rect width="30" height="5" x="45" y="12.5" fill="url(#mir)"/> <rect width="30" height="5" x="45" y="20.5" fill="url(#mir)"/> </g> <!-- บน2 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="30" height="60" x="60" y="35" fill="hsl(240, 20%, 60%)"/> </g> </g> <!-- หน้า3 --> <g transform="skewY(-26.5)"> <path d="M 35 40 v30 h17.5 v-25 h30 l12.5 12.5 v-17.5"fill="hsl(240, 10%, 75%)"/> </g> <!-- ข้าง3 --> <g transform="skewY(26.5)"> <rect width="30" height="30" x="5" y="5" fill="hsl(240, 20%, 50%)"/> </g> <!-- บน3 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="60" height="30" x="65" y="20" fill="hsl(240, 20%, 60%)"/> </g> <!-- หน้า4 --> <g transform="skewY(-26.5)"> <path d="M 45 30 v45 h12.5 v-15 h30 l7.5 7.5 v-37.5"fill="hsl(240, 10%, 75%)"/> <path d="M 50 40 v35 h7.5 v-15 h30 l3.75 3.75 v-23.5"fill="hsl(240, 20%, 30%)"/> <path d="M 50 40 v35 h7.5 v-15 h30 l3.75 3.75 v-23.5"fill="url(#mir1)"/> </g> <!-- ข้าง4 --> <g transform="skewY(26.5)"> <path d="M 45 -15 v45 h-5 v-30 h-30 v-15z" fill="hsl(240, 20%, 50%)"/> </g> <!-- บน4 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="50" height="35" x="85" y="5" fill="hsl(240, 20%, 60%)"/> </g> <!-- หน้า5 --><g transform="translate(0 -22.5)"> <g transform="skewY(-26.5)"> <rect width="20" height="10" x="75" y="85" fill="hsl(240, 20%, 30%)"/> <rect width="20" height="10" x="75" y="85" fill="url(#mir1)"/> </g> <!-- ข้าง5 --> <g transform="skewY(26.5)"> <rect width="12.5" height="10" x="62.5" y="10" fill="hsl(240, 20%, 30%)"/> <rect width="12.5" height="10" x="62.5" y="10" fill="url(#mir1)"/> </g> <!-- บน5 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="20" height="12.5" x="60" y="82.5" fill="hsl(240, 20%, 30%)"/> <rect width="20" height="12.5" x="60" y="82.5" fill="url(#mir1)"/> </g> </g> </g> <!-- โรงหาร --> <g transform="scale(1) translate(5 10)"> <!-- พื้น --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="27" height="40" x="55" y="89.3" fill="hsl(240, 20%, 40%)" /> <rect width="2" height="21" x="53" y="97" fill="hsl(240, 20%, 40%)" /> </g> <!-- หน้า6 --> <g transform="skewY(26.5)"> <rect width="39.5" height="1" x="64.5" y="15" fill="hsl(240, 10%, 30%)" /> <rect width="20" height="1" x="70" y="17" fill="hsl(240, 10%, 30%)" /> <rect width="10" height="20" x="116" y="-27" fill="hsl(240, 10%, 30%)" /> <path d="M75 12 c 0 0, 2 0, 3 -2 v-10 c 0 0, -2 0, -3 2 c 0 0, 2 0, 3 -2 c 0 0, -2 0, -3 2 v10" fill="hsl(240, 20%, 60%)" stroke="black" stroke-width="0.05"/> <path d="M80 12 c 0 0, 2 0, 3 -2 v-10 c 0 0, -2 0, -3 2 c 0 0, 2 0, 3 -2 c 0 0, -2 0, -3 2 v10" fill="hsl(240, 20%, 60%)" stroke="black" stroke-width="0.05"/> <path d="M85 12 c 0 0, 2 0, 3 -2 v-10 c 0 0, -2 0, -3 2 c 0 0, 2 0, 3 -2 c 0 0, -2 0, -3 2 v10" fill="hsl(240, 20%, 60%)" stroke="black" stroke-width="0.05"/> <rect width="20" height="10" x="84" y="5" fill="hsl(240, 20%, 50%)" /> <rect width="15" height="10" x="86" y="5" fill="hsl(240, 10%, 0%)" /> <rect width="15" height="10" x="86" y="5" fill="url(#mir)" /> </g> <!-- ข้าง6 --> <g transform="skewY(-26.5)"> <rect width="27" height="1" x="104" y="118.5" fill="hsl(240, 10%, 75%)" /> <rect width="1.5" height="1" x="90" y="106.75" fill="hsl(240, 10%, 75%)" /> <rect width="10" height="10" x="104" y="108.5" fill="hsl(240, 10%, 75%)" /> <rect width="5" height="10" x="126" y="108.5" fill="hsl(240, 10%, 75%)" /> <path d="M120 116 c 0 0, 1 1.5, 3 1 v-10 c 0 0, -2 -2, -3 -1 c 0 0, 1 1.5, 3 1 c 0 0, -2 -2, -3 -1 z" fill="hsl(240, 20%, 65%)" stroke="black" stroke-width="0.05"/> <path d="M115 116 c 0 0, 1 1.5, 3 1 v-10 c 0 0, -2 -2, -3 -1 c 0 0, 1 1.5, 3 1 c 0 0, -2 -2, -3 -1 z" fill="hsl(240, 20%, 65%)" stroke="black" stroke-width="0.05"/> </g> <!-- บน6 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="27" height="40" x="65" y="78" fill="hsl(240, 20%, 50%)" /> <rect width="25" height="51" x="244" y="-11" fill="hsl(240, 20%, 30%)" /> </g> <!-- หน้า7 --> <g transform="skewY(26.5)"> <rect width="40.9" height="10" x="63" y="-4.5" fill="hsl(240, 20%, 50%)" /> <rect width="35" height="8" x="66" y="-3.5" fill="hsl(240, 0%, 10%)" /> <rect width="35" height="8" x="66" y="-3.5" fill="url(#mir1)" /> </g> <!-- ข้าง7 --> <g transform="skewY(-26.5)"> <rect width="27" height="10" x="104" y="99" fill="hsl(240, 10%, 75%)" /> </g> <!-- บน7 --> <g transform=" translate(-80 30) skewY(-26.5) skewX(45)"> <rect width="27" height="41" x="74.8" y="68" fill="hsl(240, 20%, 60%)" /> <rect width="27" height="20" x="55" y="135" fill="hsl(0, 20%, 60%)" /> <path d="M 55 135 c 0 0, 15 10, 0 20 M 82 155 c 0 0, -15 -10, 0 -20 M 68.5 135 v20" stroke="white" stroke-width=".5" fill="none"/> </g> <!-- ข้าง7 <path d="M142.5 139 c 0 0, 1.5 -1, 9 0 v1 c 0 0, 4 -1, -10 -1"stroke="bl" stroke-width='0.1' fill="hsl(50, 100%, 50%)"/> --> <g transform="skewY(-26.5)"> <ellipse cx="144.5" cy="138.5" rx="3" ry=".5" fill="yellow"/> <path d="M143 139 l-17 25 c -10 0, 20, 30 15 l-5 -40" fill="hsla(70, 50%, 60%, .2)"/> <path d="M 150 170 v-10 c 0 0 ,0.25 -2, 2 0 v10 c 0 0, 0.25 2, -2 0 M 151.5 168.8 v-30 c 0 0 , -10 -4, -10 0 c 0 0, .5 2 1 0 c 0 0 ,0 -2, 9 .5 h-1 v20 h1"stroke="bl" stroke-width='0.1' fill="hsl(240, 0%, 20%)" /> </g> <g class="light"> <path d="M118 99 l25 -32 l3 -2 l9 40 c 1 -1, -15 -26.4, -40 -4" fill="hsla(70, 50%, 60%, .2)"/> <ellipse cx="135" cy="107" rx="20" ry="15" fill="hsla(70, 50%, 60%, .2)"/> </g> </g> </g> </svg> </body> </html>