SVG- Group E Team P’New
✨ นายภูฟ้า รุจิภาสวัฒน์
<title>Picture groupE</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Mitr:wght@500&display=swap" rel="stylesheet"> <style> body{ margin:2em; background:#303030; font-family: 'Mitr', sans-serif; } svg{ background:white; } #ear-right{ transform: rotate(-30deg); } #ear-left{ transform: rotate(30deg); } .cat.face{ fill: rgb(172, 172, 172); } .cat.eye{ fill: rgb(2, 224, 240); stroke: white; stroke-width: 0.25px; } .cat.nose{ fill: rgb(255, 90, 173); } .cat.whisker{ stroke:rgb(44, 44, 44); stroke-width: 0.1px; } </style> <svg viewBox="0 0 100 60"> <!-- Grid View--> <!-- แมว--> <rect fill="#bfbfbf" width="20" height="20"/> <image height=20 width=20 href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/158661344_1236911080057468_9138213950884630924_n.jpg?_nc_cat=108&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeFswk7oc_kt7Xrwu3zQukse3Uvd3MT7SEHdS93cxPtIQbosjJynuZEsadKDdX1zTJJUbx7WHl3gT446FVecQ8nD&_nc_ohc=iHuBbupbdoIAX8n8qo_&_nc_ht=scontent.fbkk7-3.fna&oh=4b0e9bbfc9c5d259b56af504c02e54f8&oe=6071C081" /> <text font-size="2" fill="black" x="4.5" y="3.2">ท็อป-พีรวิชญ์</text> <!-- ลิง --> <rect fill="#d9d9d9" width="20" height="20" y="20"/> <image height=20 width=20 y="20" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/159623980_2062994793866833_7341406662815469169_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeFsXauBZWgk--pdhG7qfIC2JuSxe12PSxcm5LF7XY9LFxkOmzJIWOeys35BHlrwHsllio48H1gDJ8GAU4sxv03k&_nc_ohc=MC2saICTrZEAX_6X1rZ&_nc_oc=AQkeShxyvoLQ0UhGVC_4lEpqKY2pmYV1sRrfYrr_b5o0CILsbExX_3NTcRx8ayTDfbA&_nc_ht=scontent.fbkk7-3.fna&oh=6eb632f8affe91b127348b63e0860d5b&oe=6072770C" /> <text font-size="2" fill="black" x="4.2" y="23.2">พัด-ปรีณาภัสร์</text> <!-- ชมพู --> <rect fill="#bfbfbf" width="20" height="20" y="40"/> <image height=20 width=20 height="20" y="40" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/159264974_191440035733146_1468157119931504339_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeFSDPYsGKtU5OYJVKROZ3VlV6OlODhxVCpXo6U4OHFUKrZoelbhCbpHzKfKetkSgQnLtuU8tiro2-sEQZQlcgux&_nc_ohc=bt2hPZ0X2KcAX89ebDu&_nc_ht=scontent.fbkk7-2.fna&oh=1750d53c9f8c4c44add5d638a5b63461&oe=60732C7B" /> <text font-size="2" fill="black" x="4.2" y="43.2">เมฆ-ภาณุวัฒน์</text> <!-- แพนด้า --> <rect fill="#d9d9d9" width="20" height="20" x="20"/> <image height=20 width=20 height="20" x="20" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/158708774_259943522425439_1721546887488492738_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGqVU0hvn2RpXNOjWSddImMstNHVvsb1KSy00dW-xvUpAgEJvkQ4LqCJPUR2hu5segpOfwkz_fUYZAlqqKe_fk7&_nc_ohc=L-9E4SHMBaUAX_E6kRw&_nc_ht=scontent.fbkk7-3.fna&oh=190e16e32aec39f823a94427f70435f7&oe=607297A1" /> <text font-size="2" fill="black" x="25" y="3.2">ปอ-อาภัสรา</text> <!-- หมี --> <rect fill="#bfbfbf" width="20" height="20" y="0" x="40"/> <image height=20 width=20 y="0" x="40" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/158665622_856083078282830_2694360693319159395_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGjYylOdak54kpTadoXMYqATtirwoac9BZO2KvChpz0FhUgRWkF49vjAR2GXDD3fhVwFVM6AMKUwLRYY2Nm2CdW&_nc_ohc=wS1I2anFhqEAX9pJlVe&_nc_ht=scontent.fbkk7-2.fna&oh=46c216a309ce676c67863d62129cd98e&oe=6071B7DC" /> <text font-size="2" fill="black" x="43" y="3.2">อิงค์-สรรค์ธกรณ์</text> <!-- หมา --> <rect fill="#d9d9d9" width="20" height="20" y="0" x="60"/> <image height=20 width=20 y="0" x="60" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/160271639_264513962016406_9140573370959798767_n.jpg?_nc_cat=105&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGknafzWkuXOH0vf2LWSvHGtUsOTD2zn_C1Sw5MPbOf8IGTvUJidve2jDCiQKPE5RMU9N4ilCWP-DvDsb8lyLPa&_nc_ohc=AI88G_nwB3UAX8_4ulu&_nc_ht=scontent.fbkk7-3.fna&oh=9d735c5138fc8c05681c6a00235fdee1&oe=60743219" /> <text font-size="2" fill="black" x="65.5" y="3.2">เบ็บ-ศุภพล</text> <!-- วัว --> <rect fill="#bfbfbf" width="20" height="20" y="0" x="80"/> <image height=20 width=20 y="0" x="80" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/158510009_449450496286057_1220071310469532665_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGnrQwjbotjffz02GC5otmsgFIXwOgsHMOAUhfA6Cwcw9RBKDmdtapWVaS-ERGRvw7IMpUFVW5p9DJXAxOFPlKb&_nc_ohc=l5RLQfyo1gMAX-AT0Lj&_nc_ht=scontent.fbkk7-3.fna&oh=e8b9ab719e1770152f74da9ef0749b0e&oe=6072865E" /> <text font-size="2" fill="black" x="85" y="3.2">แก้ม-สัณฐิตา</text> <!-- ฮิปโป --> <rect fill="#bfbfbf" width="20" height="20" y="20" x="20"/> <image height=20 width=20 y="20" x="20" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/159554274_345233460152467_6673339466708452819_n.jpg?_nc_cat=101&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeHqqTclszJInlhnxyAlSRXjVKto73BPvDRUq2jvcE-8NDiap8lcDXkQ9uExvaoXfmRbNSe14QY8loaw6WTSkqNl&_nc_ohc=0uJgk2zbj7cAX8yyK37&_nc_ht=scontent.fbkk7-3.fna&oh=43fa27459fc4a5779cd7032f6723a89f&oe=6073ACA7" /> <text font-size="2" fill="black" x="25" y="23.2">ราม-รามกร</text> <!-- กบ --> <rect fill="#d9d9d9" width="20" height="20" y="40" x="20"/> <image height=20 width=20 y="40" x="20" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/159261872_757471078306105_4589455254467420312_n.jpg?_nc_cat=109&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeE_vFJP9XN3_omLlKgrC_wURN0DKaTKHq5E3QMppMoerj_KkZXT3rs0u-UQKwydIxmhF0ZcRUsU6xJayUq02riz&_nc_ohc=75Nl7y1aJt4AX9Mddyc&_nc_ht=scontent.fbkk7-3.fna&oh=03e75d88a6036982bb11fe096d89924b&oe=6072ED6E" /> <text font-size="2" fill="black" x="25" y="43.2">แจม-ไตรสิทธิ์</text> <!-- โคอาล่า --> <rect fill="#d9d9d9" width="20" height="20" y="20" x="40"/> <image height=20 width=20 y="20" x="40" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/160220797_467366854622747_4704646874462739385_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeFunlJHdYo0cIRAmBJtVI2-8rqQsLROp5vyupCwtE6nm5NUMNPksxS178M05dadp2setyhcg1BuftXF0-dnzdOW&_nc_ohc=bAJ1ZlPmbZsAX9z9UvC&_nc_ht=scontent.fbkk7-2.fna&oh=7d6836be28f4752b23adbda7804600ef&oe=60723261" /> <text font-size="2" fill="black" x="46" y="23.2">ภูฟ้า-ภูฟ้า</text> <!-- หนู --> <rect fill="#bfbfbf" width="20" height="20" y="20" x="60"/> <image height=20 width=20 y="20" x="60" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/158833067_145430440780981_4728215601120213164_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGiCAGBJGg7PVx_dwWvkOCSgQNP8gzFLnSBA0_yDMUudAVYcp7cQSaIpG41NSGj5NkzNi4Pk4V5aXAJCCZW-QwD&_nc_ohc=rZpFCZrlQ24AX9pMN-a&_nc_ht=scontent.fbkk7-2.fna&oh=c015af778fc426deeae21723ef5af3ee&oe=6072FCE9" /> <text font-size="2" fill="black" x="65" y="23.2">อีฟ-พรปวีณ์</text> <!-- หมู --> <rect fill="#d9d9d9" width="20" height="20" y="20" x="80"/> <image height=20 width=20 y="20" x="80" href="https://scontent.fbkk7-3.fna.fbcdn.net/v/t1.15752-9/160002298_549618789343915_6514103939508265678_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeGxdFPquQnZwzu2veDFiD5EZpW3unaLEP9mlbe6dosQ_2f9El-d81mPjHO1_F5MNupLv7R8bV-eTQ5rNTiEbDbz&_nc_ohc=mV6DvFNeCgAAX8nuSlO&_nc_ht=scontent.fbkk7-3.fna&oh=75fe168259200fbb7f0c1707d5003b8e&oe=60732E73" /> <text font-size="2" fill="black" x="86" y="23.2">เนย-รุจรวี</text> <!-- เต่า --> <rect fill="#bfbfbf" width="20" height="20" y="40" x="40"/> <image height=20 width=20 y="40" x="40" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/159441907_452542916187777_3291768423435422001_n.jpg?_nc_cat=104&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeFjjtQwBcPGXJd4x_3Jx30YZWefl7e81SplZ5-Xt7zVKu1LwWl-w2X5Vfb5HptMhtaETGxEC8x4gbuzW6LN_aTE&_nc_ohc=Jx_mnTXSJ3UAX_-OMkN&_nc_ht=scontent.fbkk7-2.fna&oh=d7b6771a4043f4f1099d4cafec31bd80&oe=6070D266" /> <text font-size="2" fill="black" x="46" y="43.2">เอ็ม-พิสิฐไชย</text> <!-- ฟ้าทะเล --> <rect fill="#d9d9d9" width="20" height="20" y="40" x="60"/> <image height=20 width=20 y="40" x="60" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/158800641_432809834449304_5586946954451455237_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeEnBvCfKonGwHtKy7LmYi5UEfS2kmmluHcR9LaSaaW4d_VQ6E_zRJ1Zm4Li-fbjTFaksAResQ0lSMemc875-Q61&_nc_ohc=Z5RBWAy3XgYAX_ugZ79&_nc_ht=scontent.fbkk7-2.fna&oh=6da373d403e10db8e865dfe9a4261059&oe=60738D73" /> <text font-size="2" fill="black" x="64" y="43.2">โฟล์ค-ปณิธาน</text> <!-- เทา --> <rect fill="#bfbfbf" width="20" height="20" y="40" x="80"/> <image height=20 width=20 y="40" x="80" href="https://scontent.fbkk7-2.fna.fbcdn.net/v/t1.15752-9/158943911_762795274610240_2611219027429761974_n.jpg?_nc_cat=110&ccb=1-3&_nc_sid=ae9488&_nc_eui2=AeH03AqIPc7QNNo-sz65kq78WvHzhY5mBMFa8fOFjmYEwXMh5z9s1czRgEfK_RSW80ZItYT_0csU7pCLhLpLdONN&_nc_ohc=L-DdLc9Dez0AX81ivCn&_nc_ht=scontent.fbkk7-2.fna&oh=58416b2070e64040883c82f529f98a98&oe=60722514" /> <text font-size="2" fill="black" x="82" y="43.2">พอตเตอร์-ปาณัสม์</text> <!-- Top's cat --> <!--This is the face of the cat--> <svg width="120" height="120" y="-3" x="-1.75" viewBox="0 0 100 100"> <ellipse class="cat face" cx="10" cy="13" rx="5" ry="4"></ellipse> <polygon class="cat face" points="5,13 5,6 10,13"></polygon> <polygon class="cat face" points="15,13 15,6 10,13"></polygon> <!--This is the eye of the cat--> <ellipse class="cat eye" cx="8" cy="11.5" rx="0.7" ry="0.7"></ellipse> <ellipse class="cat eye" cx="12" cy="11.5" rx="0.7" ry="0.7"></ellipse> <!--This is the nose of the cat--> <ellipse class="cat nose" cx="10" cy="13.5" rx="0.8" ry="0.6"></ellipse> <!--This is the whisker of the cat--> <line class="cat whisker" x1="9" y1="13.25" x2="6.8" y2="12.5"></line> <line class="cat whisker" x1="9" y1="13.6" x2="6.5" y2="13.6"></line> <line class="cat whisker" x1="9" y1="13.9" x2="6.8" y2="14.5"></line> <line class="cat whisker" x1="11" y1="13.25" x2="13" y2="12.5"></line> <line class="cat whisker" x1="11" y1="13.6" x2="13.3" y2="13.6"></line> <line class="cat whisker" x1="11" y1="13.9" x2="13" y2="14.5"></line> </svg> <!-- Por's Panda --> <svg width="90" height="90" y="1" x="3" viewBox="0 0 100 100"> <circle cx="25" cy="7" fill="black" r="3.5"></circle> <circle cx="25" cy="7" fill="hsl(359, 84%, 75%)" r="2"></circle> <svg x="10"> <circle cx="25" cy="7" fill="black" r="3.5"></circle> <circle cx="25" cy="7" fill="hsl(359, 84%, 75%)" r="2"></circle></svg> <ellipse cx="30" cy="11.5" rx="7.9" ry="7" fill="hsl(210, 8%, 91%)" /> <svg> <ellipse cx="27" cy="9" rx="2.5" ry="2.5" fill="black" /> <circle cx="27" cy="10" fill="white" r=".76"></circle> <circle cx="27" cy="10" fill="hsl(27, 31%, 10%)" r="0.6"></circle> <circle cx="27.2" cy="9.8" fill="white" r="0.4"></circle> </svg> <svg x="6"> <ellipse cx="27" cy="9" rx="2.5" ry="2.5" fill="black" /> <circle cx="27" cy="10" fill="white" r=".76"></circle> <circle cx="27" cy="10" fill="hsl(27, 31%, 10%)" r="0.6"></circle> <circle cx="27.2" cy="9.8" fill="white" r="0.4"></circle> </svg> <svg y="3"> <line x1="30" y1="9.5" x2="30" y2="11" stroke="hsl(355, 63%, 73%)" stroke-width=".5" stroke-linecap="round" /> <line x1="28.3" y1="11" x2="30" y2="11" stroke="hsl(354, 81%, 37%)" stroke-width=".5" stroke-linecap="round" /> <line x1="31.8" y1="11" x2="30" y2="11" stroke="hsl(354, 81%, 37%)" stroke-width=".5" stroke-linecap="round" /> <ellipse cx="30" cy="9.5" rx="1" ry=".8" fill="black" /> <ellipse cx="29.9" cy="9" rx=".47" ry=".17" fill="hsl(210, 8%, 91%)" /> <ellipse cx="25" cy="9" fill="hsl(355, 63%, 73%)" rx="1" ry=".7"></ellipse> <ellipse cx="35" cy="9" fill="hsl(355, 63%, 73%)" rx="1" ry=".7"></ellipse> </svg> <ellipse cx="30" cy="14.5" fill="hsl(354, 81%, 37%)" rx="2" ry=".7"> </ellipse> <circle cx="28.3" cy="14.29" fill="hsl(354, 81%, 37%)" r='.5'> </circle> <circle cx="31.7" cy="14.29" fill="hsl(354, 81%, 37%)" r='.5'> </circle> <ellipse cx="30" cy="14.82" fill="hsl(354, 81%, 60%)" rx=".9" ry=".4"> </ellipse> <circle cx="29.5" cy="14.9" fill="hsl(354, 81%, 60%)" r='.3'> </circle> </svg> <!-- Ing's bear --> <svg width=80 height=80 x=10 y=3 viewbox=" 0 0 100 100"> <circle cx="55" cy="4.5" r="3.5" fill="#873e23"></circle> <circle cx="45" cy="4.5" r="3.5" fill="#873e23"></circle> <circle cx="54.5" cy="5" r="3.5" fill="#e28743"></circle> <circle cx="45.5" cy="5" r="3.5" fill="#e28743"></circle> <circle cx="50" cy="10" r="8" fill="brown"></circle> <circle cx="50" cy="10" r="8" fill="#3b1717"></circle> <circle cx="50" cy="9.5" r="8" fill="#80391e"></circle> <circle cx="40" cy="6" rx="2" ry="6"></circle> <ellipse cx="55" cy="8" rx="1" ry="2"></ellipse> <circle cx="54.5" cy="8.5" r="0.5" fill="white"></circle> <ellipse cx="45.5" cy="8" rx="1" ry="2"></ellipse> <circle cx="45.9" cy="8.5" r="0.5" fill="white"></circle> <circle cx="48.4" cy="14" r="2" fill="transparent" stroke="black" stroke-width="0.5"></circle> <circle cx="52.4" cy="14" r="2" fill="transparent" stroke="black" stroke-width="0.5"></circle> <circle cx="54.3" cy="14" r="1.3" fill="#80391e"></circle> <circle cx="46.3" cy="14" r="1.3" fill="#80391e"></circle> <ellipse cx="50.2" cy="12" rx="4" ry="2" fill="#1c100b"></ellipse> </svg> <!--เบ็บ dog --> <svg width=80 height=80 x=30 y=4 viewbox=" 0 0 100 100"> <circle cx="55" cy="8" rx="2" ry="2" fill="#cc7a00"></circle> <ellipse cx="55" cy="5" rx="2.5" ry="5" fill="#873e23"></ellipse> <ellipse cx="55" cy="5" rx="1.5" ry="3.5" fill="#ffebcc"></ellipse> <ellipse cx="45" cy="5" rx="2.5" ry="5" fill="#873e23"></ellipse> <ellipse cx="45" cy="5" rx="1.5" ry="3.5" fill="#ffebcc"></ellipse> <circle cx="50" cy="9.5" r="7.5" fill="#cc7a00"></circle> <circle cx="40" cy="6" rx="2" ry="6"></circle> <ellipse cx="53.75" cy="8" rx="1.5" ry="2.5"></ellipse> <circle cx="53.5" cy="6.5" r="0.7" fill="white"></circle> <ellipse cx="45.75" cy="8" rx="1.5" ry="2.5"></ellipse> <circle cx="45.85" cy="6.5" r="0.7" fill="white"></circle> <circle cx="48.3" cy="13.73" r="1.5" fill="transparent" stroke="black" stroke-width="0.55"></circle> <circle cx="51.3" cy="13.75" r="1.5" fill="transparent" stroke="black" stroke-width="0.55"></circle> <circle cx="53.7" cy="13" r="1.8" fill="#cc7a00"></circle> <circle cx="47.3" cy="13" r="1.4" fill="#cc7a00"></circle> <ellipse cx="50" cy="12" rx="3" ry="2" fill="#1c100b"></ellipse> </svg> <!-- kaem's cow --> <svg width="20" height="20" y="1" x="80" viewbox="0 0 100 100"> <polygon points="30,15 40,40 60,30" fill="#e2e2e2"/> <polygon points="70,15 60,38 40,30" fill="#e2e2e2"/> <ellipse id="ear-right"cx="10" cy="44" fill="#d8d3ca" rx="5" ry="10"/> <ellipse id="ear-left" cx="76" cy="-5" fill="#d8d3ca" rx="5" ry="10"/> <rect x="27" y="20" rx="20" ry="17" width="45" height="60" fill="#f7f4ef"/> <polygon points="25,60 27,50 40,40" fill="#f7f4ef"/> <polygon points="74.4,59 66,60 70,44" fill="#f7f4ef"/> <rect x="24.5" y="49" rx="20" ry="20" width="50" height="22" fill="#fddbc7"/> <circle cx="43" cy="60" r="2" fill="#2d2d2d"/> <circle cx="55" cy="60" r="2" fill="#2d2d2d"/> <ellipse cx="41" cy="44" fill="#2d2d2d" rx="3" ry="4"/> <ellipse cx="57" cy="44" fill="#2d2d2d" rx="3" ry="4"/> </svg> <!-- Pat's Monkey --> <!-- ears --> <svg width="90" height="90" y="3" x="1" viewBox="0 0 100 100"> <circle cx="3.5" cy="31" fill="#EB7047" r="2.5"/> <circle cx="3.5" cy="31" fill="#FFD4CC" r="1.5"/> <circle cx="16.5" cy="31" fill="#EB7047" r="2.5"/> <circle cx="16.5" cy="31" fill="#FFD4CC" r="1.5"/> <!-- face --> <circle cx="10" cy="32" fill="#EB7047" r="6"/> <ellipse cx="10" cy="33" rx="7" ry="5" fill="#EB7047"/> <ellipse cx="10" cy="35" rx="5" ry="3.5" fill="#FFD4CC"/> <circle cx="8" cy="32.5" fill="#FFD4CC" r="2.25"/> <circle cx="12" cy="32.5" fill="#FFD4CC" r="2.25"/> <!-- mouth --> <line x1="10" y1="35" x2="10" y2="36" stroke="black" stroke-width="0.25"/> <circle cx="9" cy="35.5" r="1" fill="transparent" stroke="black" stroke-width="0.2"/> <circle cx="11" cy="35.5" r="1" fill="transparent" stroke="black" stroke-width="0.2"/> <rect fill="#FFD4CC" width="2" height="2" x="7.3" y="33.7"/> <rect fill="#FFD4CC" width="2" height="2" x="10.7" y="33.7"/> <!-- hair --> <ellipse cx="9.8" cy="27" rx="1" ry="3.5" fill="#eb7047"/> <ellipse cx="25.5" cy="14" rx="1" ry="3.5" fill="#eb7047" style="transform: rotate(40deg);"/> <!-- cheeeks --> <ellipse cx="6" cy="34.7" rx="0.75" ry="0.4" fill="#FF6680"/> <ellipse cx="14" cy="34.7" rx="0.75" ry="0.4" fill="#FF6680"/> <!-- eyes --> <circle cx="7.5" cy="33.5" fill="black" r="0.75"/> <circle cx="7.75" cy="33.25" fill="white" r="0.25"/> <circle cx="12.5" cy="33.5" fill="black" r="0.75"/> <circle cx="12.25" cy="33.25" fill="white" r="0.25"/> <!-- nose --> <ellipse cx="10" cy="34.5" rx="1" ry="0.55" fill="black"/> <ellipse cx="9.5" cy="34.3" rx="0.2" ry="0.15" fill="white"/> </svg> <!-- eve's mouse --> <svg width="55" height="55" x="23.5" y="2.25" viewBox="0 0 100 100"> <circle cx="92" cy="46" fill="#7B7471 " r="6"/> <circle cx="92" cy="46" fill="pink" r="4"/> <circle cx="76" cy="46" fill="#7B7471 " r="6"/> <circle cx="76" cy="46" fill="pink" r="4"/> <ellipse cx="84" cy="55" rx="12" ry="10" fill="#7B7471 "/> <circle cx="79" cy="51" fill="#221B03" r="2" /> <circle cx="80" cy="50" fill="white" r="0.7"/> <circle cx="89" cy="51" fill="#221B03" r="2"/> <circle cx="90" cy="50" fill="white" r="0.7"/> <ellipse cx="84" cy="57" rx="4" ry="4.5" fill="pink"/> <ellipse cx="84" cy="52" rx="1" ry="1" fill="brown"/> <ellipse cx="92" cy="55" rx="2" ry="2" fill="#C32F00"/> <ellipse cx="76" cy="55" rx="2" ry="2" fill="#C32F00"/> <line x1="70" y1="55.1" x2="77" y2="55.5" stroke="#4C2203" stroke-width=".4" stroke-linecap="round" /> <line x1="70" y1="51" x2="77" y2="55" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" /> <line x1="70" y1="60" x2="77" y2="56" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" /> <line x1="92" y1="54" x2="99" y2="50.5" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" /> <line x1="92" y1="55" x2="99" y2="55" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" /> <line x1="92" y1="56" x2="99" y2="59" stroke="#4C2203 " stroke-width=".4" stroke-linecap="round" /> </svg> <!-- NEAY's PIG --> <svg width="80" height="80" y="7" x="18" viewBox="0 0 100 100"> <circle cx="85" cy="25" r="3" fill="#FFA5DC" /> <circle cx="85" cy="25" r="2" fill="#FF7E9D" /> <circle cx="95" cy="25" r="3" fill="#FFA5DC" /> <circle cx="95" cy="25" r="2" fill="#FF7E9D" /> <circle cx="90" cy="31" r="7.5" fill="#FFA5DC" /> <ellipse cx="90" cy="32.5" rx="4" ry="3" fill="#FF7E9D" /> <ellipse cx="93" cy="28" rx="1" ry="1.5" fill="black" /> <ellipse cx="87" cy="28" rx="1" ry="1.5" fill="black" /> <circle cx="93" cy="28.3" r="0.5" fill="white" /> <circle cx="87" cy="28.3" r="0.5" fill="white" /> <circle cx="88.5" cy="32.5" r="1" fill="#FFA5DC" /> <circle cx="91.5" cy="32.5" r="1" fill="#FFA5DC" /> <ellipse cx="83.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" /> <ellipse cx="96.5" cy="32.5" rx="2" ry="1.5" fill="#FF6A89" /> </svg> <!-- folk's fox --> <svg width="20" height="20" y="41" x="60" viewBox="0 0 20 20"> <polygon points="5.14 8,4 14,9 16" style="fill:#C1272D;stroke:black;stroke-width:0.01" /> <polygon points="5.14 8,6 7.5,8 10,9 16" style="fill:#F26122;stroke:black;stroke-width:0.01" /> <polygon points="6 7.5,9 7,10 9,8 10" style="fill:#D34F1D;stroke:black;stroke-width:0.01" /> <polygon points="8 10,9 16,10.3 10.6,10 9" style="fill:#E2E2E2;stroke:black;stroke-width:0.01" /> <polygon points="9 16,12 17,10.3 10.6" style="fill:#D8D8D8;stroke:black;stroke-width:0.01" /> <polygon points="11.5 11.3,12 17,10.3 10.6" style="fill:#D34F1D;stroke:black;stroke-width:0.01" /> <polygon points="11.5 11.3,16 9.6,10.3 10.6" style="fill:#F26122;stroke:black;stroke-width:0.01" /> <polygon points="10 9,10.3 10.6,16 9.6,15.5 8.2" style="fill:#EFEFEF;stroke:black;stroke-width:0.01" /> <polygon points="10 9,15.5 8.2,11 7.2,9 7" style="fill:#F26122;stroke:black;stroke-width:0.01" /> <polygon points="16 9.6,15.5 8.2,16.7 8" style="fill:#C1272D;stroke:black;stroke-width:0.01" /> <polygon points="15.5 8.2,16.7 8,13 7,11 7.2" style="fill:#F2C900;stroke:black;stroke-width:0.01" /> <polygon points="11 7.2,9 7,10.6 6.4" style="fill:#EFEFEF;stroke:black;stroke-width:0.01" /> <polygon points="11 7.2,10.6 6.4,12.3 6.3,13 7" style="fill:#F26122;stroke:black;stroke-width:0.01" /> <polygon points="10.6 6.4,12.3 6.3,11 5,9 4.8" style="fill:#F2C900;stroke:black;stroke-width:0.01" /> <polygon points="10.6 6.4,9 4.8,6 7.5,9 7" style="fill:#F26122;stroke:black;stroke-width:0.01" /> <polygon points="6 7.5,7.5 6.2,7.4 4.5,7.6 3,6 6" style="fill:#C1272D;stroke:black;stroke-width:0.01" /> <polygon points="7.5 6.2,7.4 4.5,7.6 3,9 4.8" style="fill:#F2C900;stroke:black;stroke-width:0.01" /> <polygon points="9.6 4.85,11 5,11.5 3" style="fill:#C1272D;stroke:black;stroke-width:0.01" /> <polygon points="11 5,11.5 3,12 6" style="fill:#D34F1D;stroke:black;stroke-width:0.01" /> </svg> <!-- potter's chicken --> <svg width="20" height="20" y="42" x="80" viewBox="0 0 100 100"> <ellipse cx="52" cy="20" rx="6" ry="10"fill="#5e1914 "/> <circle cx="51" cy="49" fill="#B3672B" r="30"/> <circle cx="49" cy="48" fill="#FCE205" r="30"/> <circle cx="33" cy="48" fill="#fda50f" r="4"/> <!-- Eye --> <circle cx="64" cy="48" fill="#fda50f" r="4"/> <!-- Eye --> <circle cx="33" cy="48" fill="#000" r="3"/> <circle cx="64" cy="48" fill="#000" r="3"/> <circle cx="32" cy="46" fill="#ffff" r="1"/> <circle cx="63" cy="46" fill="#ffff" r="1"/> <!-- Eye --> <ellipse cx="49" cy="60" rx="4" ry="7" fill="#ff2800"/> <polygon cx="49" cy="48" points="43 50,49 50,49 59" fill="#EF820D"/> <polygon cx="49" cy="48" points="49 50,54 50,49 59" fill="#B1560f"/> <ellipse cx="59" cy="-26" rx="5" ry="11" fill="#ff2800 " style="transform: rotate(50deg);"/> <ellipse cx="50" cy="23" rx="7" ry="13" fill="#ff2800"/> </svg> <!-- Ram's Hippo --> <svg width="70" height="70" y="10" x="9" viewBox="0 0 100 100"> <ellipse cx="30.5" cy="30" rx="7" ry="8" fill="#CE75B6"/> <!-- face_shadow --> <ellipse id="ear-right"cx="9.5" cy="34.5" fill="#CE75B6" rx="2" ry="4"/> <!-- left_shadow --> <ellipse id="ear-left"cx="43.4" cy="4.6" fill="#CE75B6" rx="2" ry="4"/> <!-- right_shadow --> <ellipse id="ear-right"cx="9" cy="34" fill="#EE89D3" rx="2" ry="4"/> <!-- left --> <ellipse id="ear-left"cx="42.9" cy="4.1" fill="#EE89D3" rx="2" ry="4"/> <!-- right --> <ellipse id="ear-right"cx="9" cy="34" fill="#A7D3B8" rx="1" ry="2"/> <!-- in_left --> <ellipse id="ear-left"cx="42.9" cy="4.1" fill="#A7D3B8" rx="1" ry="2"/> <!-- in_right --> <rect width="13.64" height="5" fill="#CE75B6" x="23.4" y="30"/> <!-- kamm_shadow --> <rect width="13.64" height="5" fill="#EE89D3" x="23.2" y="30"/> <!-- kamm --> <ellipse cx="30" cy="30" rx="7" ry="8" fill="#EE89D3"/> <!-- face --> <ellipse cx="30.5" cy="35.1" rx="7" ry="3.9" fill="#7FBEBD"/> <!-- mouse_shadow --> <ellipse cx="30" cy="35" rx="7" ry="3.9" fill="#8BCFCE"/> <!-- mouse --> <circle cx="24.9" cy="26.6" r="1"/> <circle cx="34.9" cy="26.6" r="1"/> <ellipse cx="27.9" cy="33.8" rx="0.5" ry="1"/> <ellipse cx="32" cy="33.8" rx="0.5" ry="1"/> <circle cx="35.2" cy="26.3" fill="white" r="0.35"/> <circle cx="24.5" cy="26.3" fill="white" r="0.35"/> </svg> <!--Phufa's Koala --> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(204, 16%, 65%);" /> <stop offset="100%" style="stop-color:hsl(204, 16%, 60%);" /> </radialGradient> </defs> <svg width="70" height="70" y="10" x="29" viewBox="0 0 100 100"> <ellipse id="ear-right"cx="7" cy="34" fill="url(#grad1)" rx="4" ry="4"/> <ellipse id="ear-left"cx="45" cy="4" fill="url(#grad1)" rx="4" ry="4"/> <circle cx="23.5" cy="26.2" r="2.5" fill="#66757f" /> <circle cx="36.5" cy="26.2" r="2.5" fill="#66757f" /> <ellipse cx="30" cy="28.5" rx="7" ry="7" fill="url(#grad1)"/> <!-- face top --> <ellipse cx="30" cy="30" rx="8.5" ry="8" fill="url(#grad1)"/> <ellipse cx="30" cy="31" rx="6" ry="7.5" fill="url(#grad1)"/><!-- face --> <circle cx="26.4" cy="29" r="1.1" fill="#292f33"/> <circle cx="33.5" cy="29" r="1.1" fill="#292f33"/> <circle cx="26.4" cy="28.6" r="0.4" fill="white"/> <circle cx="33.5" cy="28.6" r="0.4" fill="white"/> <ellipse cx="30" cy="32.3" rx="2" ry="3" fill="#292f33"/> <ellipse cx="30" cy="32" rx="1.9" ry="3" fill="#292f33"/> </svg> <!--M เต่า--> <svg width="70" height="70" y="16" x="15" viewBox="0 0 100 100"> <circle cx="51" cy="51" r="6" fill="green"></circle> <circle cx="45" cy="45" r="4" fill="green"></circle> <circle cx="43" cy="46" r="0.5" fill="black"></circle> <circle cx="45" cy="44" r="0.5" fill="black"></circle> <circle cx="45" cy="53" r="2" fill="green"></circle> <circle cx="50" cy="57" r="2" fill="green"></circle> <circle cx="52" cy="45" r="2" fill="green"></circle> <circle cx="57" cy="49" r="2" fill="green"></circle> <circle cx="51" cy="51" r="6" fill="transparent" stroke="black" stroke-width="0.5"></circle> <circle cx="51" cy="51" r="4.5" fill="transparent" stroke="black" stroke-width="0.5"></circle> <circle cx="51" cy="51" r="3" fill="transparent" stroke="black" stroke-width="0.5"></circle> <circle cx="51" cy="51" r="1.5" fill="transparent" stroke="black" stroke-width="0.5"></circle> </svg> <!--Jam's frog--> <svg width="80" height="80" y="11" x="6" viewBox="0 0 100 100"> <ellipse cx="30" cy="51" rx="7" ry="6.3"fill="OliveDrab"/> <circle cx="27" cy="45" r="2" fill="OliveDrab"></circle> <circle cx="33" cy="45" r="2" fill="OliveDrab"></circle> <circle cx="27" cy="45" r="1.3" fill="white"></circle> <circle cx="33" cy="45" r="1.3" fill="white"></circle> <circle cx="27" cy="45" r="0.5" fill="Black"></circle> <circle cx="33" cy="45" r="0.5" fill="Black"></circle> <circle cx="29" cy="51" r="0.5" fill="DarkOliveGreen"></circle> <circle cx="31" cy="51" r="0.5" fill="DarkOliveGreen"></circle> <line x1="28" y1="54" x2="32" y2="54" stroke="black" stroke-width="0.25"/> </svg> <!--Mek's worm--> <svg width="80" height="80" y="12" x="2.25" viewBox="0 0 100 100"> <ellipse cx="10" cy="51" rx="7" ry="6.3"fill="#93e089" stroke="#75ba6c" stroke-width="0.3"/> <ellipse cx="8" cy="49" rx="1" ry="1.5" fill="black"/> <ellipse cx="12" cy="49" rx="1" ry="1.5" fill="black"/> <circle cx="7.8" cy="48" r="0.5" fill="white" stroke="black" stroke-width="0.07"></circle> <circle cx="12.2" cy="48" r="0.5" fill="white" stroke="black" stroke-width="0.07"></circle> <circle cx="8" cy="48.5" r="0.4" fill="white"></circle> <circle cx="12" cy="48.5" r="0.4" fill="white"></circle> <circle cx="10" cy="53" r="1.6" fill="pink" stroke="black" stroke-width="0.1"></circle> <circle cx="10" cy="53" r="1" fill="white" stroke="black" stroke-width="0.1"></circle> <line x1="8" y1="45" x2="6" y2="40.5" stroke="black" stroke-width="0.8"></line> <line x1="12" y1="45" x2="14" y2="40.8" stroke="black" stroke-width="0.8"></line> </svg> </svg>