Group A P’Faii : Isomatric
✨ Tawan Thirawee
<html> <head> <style> body { background: wheat; margin: 0px; } svg { background: #80DEEA; } </style> </head> <body> <svg viewBox="0 0 160 84"> <path d="M 40 0 L 100 40 L 160 40 L 160 0 Z" fill="url(#sea)"/> <path d="M 0 0 L 40 0 L 100 40 L 160 40 L 160 84 L 0 84 Z" fill="url(#grass)"/> <defs> <pattern id="glass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <circle cx="5" cy="5" r="10" fill="skyblue"/> <line x1="0" y1="1" x2="200" y2="390" style="fill:white;stroke:white;stroke-width:0.4" /> </pattern> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <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> </defs> <path d="M 72 85 L -2 36 L -2 60 L 72 109 Z" fill="hsl(0, 0%, 30%)"/> <line x1="-2" y1="48" x2="72" y2="97" stroke="yellow" stroke-width="0.5"/> <path d=" M 115 62 L 75 88 L 66 88 L 106 62 Z M 25 54 L 16 54 L 40 38 L 49 38 Z M 106 62 L 97 56 L 97 50 L 118 64 Z M 101 73 L 98 71 L 101 69 L 107 73 Z " fill="hsl(0, 0%, 30%)"/> <path d="M 91 41 L 100 35 L 100 64 L 91 70 Z" fill="hsl(0, 0%, 35%)"/> <path d="M 91 70 L 91 41 L 46 11 L 46 40 Z" fill="hsl(0, 0%, 50%)"/> <path d="M 46 11 L 55 5 L 100 35 L 91 41 Z" fill="hsl(0, 0%, 65%)"/> <path d=" M 91 43 L 100 37 L 100 39 L 91 45 L 91 43 Z M 91 48 L 100 42 L 100 44 L 91 50 Z M 91 53 L 100 47 L 100 49 L 91 55 Z M 91 58 L 100 52 L 100 54 L 91 60 Z M 91 63 L 100 57 L 100 62 L 91 68 Z M 91 43 L 46 13 L 46 15 L 91 45 Z M 91 48 L 82 42 L 82 44 L 91 50 Z M 46 18 L 49 20 L 49 22 L 46 20 Z M 91 53 L 85 49 L 85 51 L 91 55 Z M 91 58 L 85 54 L 85 56 L 91 60 Z M 91 63 L 85 59 L 85 64 L 91 68 Z " fill="url(#glass)"/> <path d="M 55 66 L 58 64 L 76 64 L 79 66 L 79 55 L 55 55 Z" fill="hsl(0, 0%, 20%)"/> <path d="M 56 67 C 61 74 73 74 78 67 L 56 67 L 78 67 L 78 55 L 56 55 L 56 63 Z" fill="url(#glass)"/> <path d="M 73 71.1 L 73 67 L 76 65 L 76 69.2 Z M 61 71.1 L 61 67 L 58 65 L 58 69.2 Z" fill="hsl(0, 0%, 50%)"/> <line x1="74.6" y1="66" x2="74.6" y2="69.9" stroke="hsl(0, 0%, 35%)" stroke-width="0.07"/> <line x1="59.4" y1="66" x2="59.4" y2="69.9" stroke="hsl(0, 0%, 35%)" stroke-width="0.07"/> <path d="M 67 58 L 82 48 L 82 64 L 82 64 L 79 66 L 79 55 L 67 63 Z" fill="hsl(40, 0%, 35%)"/> <path d="M 67 58 L 34 36 L 34 52 L 55 66 L 55 55 L 67 63 Z" fill="hsl(40, 0%, 50%)"/> <path d="M 34 36 L 49 26 L 82 48 L 67 58 L 67 58 Z" fill="hsl(40, 0%, 65%)"/> <path d="M 37 39 L 52 49 L 52 61 L 37 51 Z" fill="url(#glass)"/> <path d="M 70 52 L 70 45 L 79 39 L 79 46 Z" fill="hsl(0, 0%, 35%)"/> <path d="M 70 45 L 44 27 L 44 34 L 70 52 Z" fill="hsl(0, 0%, 50%)"/> <path d="M 44 27 L 53 21 L 79 39 L 70 45 Z" fill="hsl(0, 0%, 65%)"/> <path d="M 69 49 L 45 33 L 45 30 L 69 46 Z M 71 46 L 77 42 L 77 45 L 71 49 Z" fill="url(#glass)"/> <path d="M 110 69 L 113 71 L 113 67 L 119 71 L 119 75 L 122 77 L 122 71 L 110 63 Z" fill="hsl(0, 0%, 50%)"/> <path d="M 122 71 L 122 77 L 125 75 L 125 71 L 131 67 L 131 71 L 134 69 L 134 63 Z" fill="hsl(0, 0%, 35%)"/> <path d="M 110 63 L 122 55 L 134 63 L 122 71 Z" fill="hsl(0, 0%, 65%)"/> <path d="M 122 65 L 119 63 L 122 61 L 125 63 Z" fill="url(#glass)"/> <line x1="119" y1="63" x2="122" y2="62" stroke="black" stroke-width="0.2"/> <line x1="122" y1="62" x2="125" y2="63" stroke="black" stroke-width="0.2"/> <line x1="122" y1="61" x2="122" y2="65" stroke="black" stroke-width="0.2"/> <ellipse cx="83" cy="70" rx="5" ry="2" fill="hsl(0, 0%, 50%)"/> <rect x="78" y="68" width="10" height="2" fill="hsl(0, 0%, 50%)"/> <ellipse cx="83" cy="68" rx="5" ry="2" fill="url(#sea)"/> <path d="M 83 68 C 83 67 83 65 82 65 Z M 83 68 C 83 67 83 65 84 65 Z" fill="blue"/> <path d="M 107 69 L 125 81 L 116 87 L 98 75 Z" fill="hsl(0, 0%, 30%)"/> <line x1="107" y1="69" x2="125" y2="81" stroke="yellow" stroke-width="0.2"/> <line x1="104" y1="71" x2="107" y2="69" stroke="yellow" stroke-width="0.2"/> <line x1="110" y1="71" x2="107" y2="73" stroke="yellow" stroke-width="0.2"/> <line x1="113" y1="73" x2="110" y2="75" stroke="yellow" stroke-width="0.2"/> <line x1="116" y1="75" x2="113" y2="77" stroke="yellow" stroke-width="0.2"/> <line x1="119" y1="77" x2="116" y2="79" stroke="yellow" stroke-width="0.2"/> <line x1="122" y1="79" x2="119" y2="81" stroke="yellow" stroke-width="0.2"/> <line x1="125" y1="81" x2="122" y2="83" stroke="yellow" stroke-width="0.2"/> <line x1="98" y1="75" x2="116" y2="87" stroke="yellow" stroke-width="0.2"/> <line x1="98" y1="75" x2="101" y2="73" stroke="yellow" stroke-width="0.2"/> <line x1="101" y1="77" x2="104" y2="75" stroke="yellow" stroke-width="0.2"/> <line x1="104" y1="79" x2="107" y2="77" stroke="yellow" stroke-width="0.2"/> <line x1="107" y1="81" x2="110" y2="79" stroke="yellow" stroke-width="0.2"/> <line x1="110" y1="83" x2="113" y2="81" stroke="yellow" stroke-width="0.2"/> <line x1="113" y1="85" x2="116" y2="83" stroke="yellow" stroke-width="0.2"/> <line x1="116" y1="88" x2="119" y2="85" stroke="yellow" stroke-width="0.2"/> <line x1="119" y1="91" x2="122" y2="87" stroke="yellow" stroke-width="0.2"/> </svg> </body> </html>