SVG group – Team D – sspim
✨ นางสาวขวัญพิชชา อิ่มโดด
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family: "Lucida Console", "Courier New", monospace; } svg{ background:hsl(180, 45%, 50%); } </style> </head> <body> <svg viewBox="0 0 120 120"> <!-- แพรวต๋อย-รมิตา --> <svg x="74" y="45"> <text x="9.8" y="4" font-size="3" fill="hsl(40, 100%, 90%)"> 'Praew.toi'</text> <ellipse cx="15" cy="12" rx="4" ry="7" style="fill:#a35c38"></ellipse> หูซ้ายนอก <ellipse cx="15" cy="12" rx="2.5" ry="5" style="fill:#fab7d5"></ellipse> หูซ้ายใน <svg x="20"> <ellipse cx="5" cy="12" rx="4" ry="7" style="fill:#a35c38"></ellipse> หูขวานอก <ellipse cx="5" cy="12" rx="2.5" ry="5" style="fill:#fab7d5"></ellipse> หูขวาใน </svg> <ellipse cx="20" cy="22" rx="15" ry="13" fill="#a35c38" /> หน้า <svg> <ellipse cx="14" cy="20" rx="5" ry="8.5" style="fill:#ffe6cc"></ellipse> หน้าซ้าย <ellipse cx="26" cy="20" rx="5" ry="8.5" style="fill:#ffe6cc"></ellipse> หน้าขวา <ellipse cx="20" cy="27" rx="12" ry="8" style="fill:#ffe6cc"></ellipse> หน้าล่าง <ellipse cx="15" cy="23" rx="2" ry="2" fill="hsl(30,70%,10%)" /> ตาดำซ้าย <circle cx="15.3" cy="22" fill="white" r=".75"><animate attributeName="r" values=".25;1;.25" dur="2.5s" repeatCount="indefinite" /></circle> ตาขาวซ้าย </svg> <svg x="10"> <ellipse cx="15" cy="23" rx="2" ry="2" fill="hsl(30,70%,10%)" /> ตาดำขวา <circle cx="15.3" cy="22" fill="white" r=".75"><animate attributeName="r" values=".25;1;.25" dur="2.5s" repeatCount="indefinite" /></circle> ตาขาวขวา </svg> <svg y="3"> <ellipse cx="12" cy="23" rx="1.5" ry="1.2" fill="hsla(340, 80%, 80%, 70%)" /> แก้มซ้าย <ellipse cx="27.5" cy="23" rx="1.5" ry="1.2" fill="hsla(340, 80%, 80%, 70%)" /> แก้มขวา <ellipse cx="20" cy="22.5" rx="2.3" ry="1.75" fill="#ecbd8e" /> ครอบจมูกปาก <ellipse cx="20" cy="22" rx="1.5" ry="1.2" fill="#660000" /> จมูก </svg> <ellipse cx="20" cy="30" fill="#990000" rx="5" ry="2"> ปาก <animate attributeName="rx" values="2;2;3;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse> </svg> <!-- ก้อง-อธิชาติ --> <svg x="55" y="71"> <text x="14" y="39.5" font-size="3" fill="hsl(40, 100%, 90%)"> 'Kong'</text> <ellipse cx="10.5" cy="16" rx="1" ry="5.5" fill="pink"></ellipse> <ellipse cx="29.5" cy="16" rx="1" ry="5.5" fill="pink"></ellipse> <polygon points="10.5,10.5 11,20 16,18" fill="pink"></polygon>หูในซ้าย <polygon points="10.6, 10.5 22, 20 14,17"></polygon>หูนอกซ้าย <polygon points="29.5,10.5 29,20 24,18" fill="pink"></polygon>หูในขวา <polygon points="29.4,10.5 18,20 26,17"></polygon>หูนอกขวา <circle cx ="20" cy="24" r="10" fill="black"></circle>หัว <ellipse cx="20" cy="31" rx="12" ry="5" fill="black"></ellipse>คาง <polygon points="11, 20 7, 30 8.5, 32 15, 25" fill="black"></polygon>ขอบซ้าย <polygon points="29, 20 33, 30 31.5, 32 25, 25" fill="black"></polygon>ขอบขวา <ellipse cx ="20" cy="30" rx="10" ry="5" fill="white"></ellipse>ขาวล่าง <ellipse cx ="16.5" cy="25" rx="5.5" ry="8.5" fill="white"></ellipse>ขาวซ้าย <ellipse cx ="23.5" cy="25" rx="5.5" ry="8.5" fill="white"></ellipse>ขาวขวา <circle cx="15" cy="27" r=1.5 fill="black"> </circle>ตาซ้าย <circle cx="16" cy="27" r=0.5 fill="white"> </circle>ตาขาวซ้าย <circle cx="25" cy="27" r=1.5 fill="black"></circle>ตาขวา <circle cx="26" cy="27" r=0.5 fill="white"></circle>ตาขาวขวา <ellipse cx="20" cy="30" rx="1.5" ry="1" fill="brown"> <animate attributeName="rx" values="1.5;2.5;1.5" dur="3s" repeatCount="indefinite" /> </ellipse>จมูก </svg> <!-- พิม-พิมพ์ชนก --> <svg x="7" y="44"> <text x="12" y="7" font-size="3" fill="hsl(40, 100%, 90%)"> 'Pim.moo'</text> <circle cx="10" cy="14" fill="hsl(336,100%,55%)" r="5"></circle> หูซ้ายด้านนนอก <circle cx="10" cy="14" fill="hsl(30,70%,80%)" r="3"></circle> หูซ้ายด้านใน <svg x="20"> <circle cx="10" cy="14" fill="hsl(336,100%,55%)" r="5"></circle> หูขวาด้านนอก <circle cx="10" cy="14" fill="hsl(30,70%,80%)" r="3"></circle></svg> หูขวาด้านใน <ellipse cx="20" cy="22" rx="13.5" ry="13" fill="hsl(336,100%,55%)" /> หน้า <svg> <ellipse cx="15" cy="15" rx="3" ry="0.8" fill="hsl(330, 100%, 30%)" /> คิ้วซ้าย <ellipse cx="15" cy="18" rx="1.5" ry="1.5" fill="black" > ตาซ้าย <animate attributeName="ry" values="1.5;1.7;1.5;1.7" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <svg x="10"> <ellipse cx="15" cy="15" rx="3" ry="0.8" fill="hsl(330, 100%, 30%)" /> คิ้วขวา <ellipse cx="15" cy="18" rx="1.5" ry="1.5" fill="black" > ตาขวา <animate attributeName="ry" values="1.5;1.7;1.5;1.7" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <svg y="3"> <ellipse cx="20" cy="24" rx="10" ry="7" fill="hsl(30,70%,80%)" /> ปากขาว <ellipse cx="20" cy="21" rx="5.5" ry="3.5" fill="hsl(330, 100%, 30%)" />จมูก </svg> <ellipse cx="20" cy="31" fill="hsl(10,70%,30%)" rx="2" ry="2"> ปาก <animate attributeName="rx" values="2;2;3;2;2" dur="5s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;2;1;1" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- เฟิส-วิศัลย์ --> <svg x="27" y="20"> <circle cx=20 cy=20 r=9 fill=#2C3E50 ></circle> <circle cx=16 cy=28.5 r=2.25 fill=#F4D03F ></circle>//เท้าซ้ายครับ ._. <circle cx=24 cy=28.5 r=2.25 fill=#F4D03F ></circle>//เท้าขวาครับ ._. <circle cx=13 cy=12 r=4 fill=#2C3E50 ></circle>//หูซ้าย <circle cx=27 cy=12 r=4 fill=#2C3E50></circle>//หูขวา <ellipse cx=18 cy=19 rx=4.25 ry=6.5 fill=#EDBB99></ellipse>//เเก้มซ้าย <ellipse cx=22 cy=19 rx=4.25 ry=6.5 fill=#EDBB99></ellipse>//เเก้มขวา <ellipse cx=20 cy=24.1 rx=7.5 ry=4.95 fill=#EDBB99></ellipse>//คาง <ellipse cx=18 cy=20 rx=1 ry=1.5 fill=#2E4053></ellipse>//ตาซ้าย <ellipse cx=22 cy=20 rx=1 ry=1.5 fill=#2E4053></ellipse>//ตาขวา <ellipse cx=20 cy=23.5 rx=1.25 ry=0.75 fill=#2C3E50 > <animate attributeName="rx" values="0.75;1.25;0.75" dur="5s" repeatCount="indefinite" /> --> </ellipse>//จมูก <circle cx=24.5 cy=23 r=0.75 fill=#E74C3C ></circle> <circle cx=15.5 cy=23 r=0.75 fill=#E74C3C ></circle> <text x="2" y="13" font-size="3" fill="hsl(40, 100%, 90%)"> 'First'</text> </svg> <!-- ตัง-ฏังกบดี --> <svg x="50" y="20"> <text x="24" y=12 font-size="3" fill="hsl(40, 100%, 90%)"> 'Tang.'</text> <circle cx="29" cy="17" r="4" fill =#E39763></circle> <circle cx="11" cy="17" r="4" fill =#E39763></circle> <circle cx="29" cy="17" r="2" fill =#E8BC9E></circle> <circle cx="11" cy="17" r="2" fill =#E8BC9E></circle> <circle cx = 20 cy = 20 r = 9.5 fill = #D89425> </circle> //หน้า <ellipse cx="18" cy="20" rx="4.5" ry="6.5" fill =#FFDBA0></ellipse> //หน้าซ้าย <ellipse cx="22" cy="20" rx="4.5" ry="6.5" fill =#FFDBA0></ellipse> //หน้าขวา <circle cx = 16 cy = 20 r = 0.5 fill = black> <animate attributeName="r" values="1.5;0.5;1.5" dur="3s" repeatCount="indefinite" /> </circle> // ตาซ้าย <circle cx = 24 cy = 20 r = 0.5 fill = black> </circle> // ตาขวา <ellipse cx="20" cy="25.5" rx="7.5" ry="4" fill = #FFDBA0></ellipse> //หน้าล่าง <ellipse cx= 21 cy= 27 rx= 2 ry= 1 fill= black></ellipse> <ellipse cx= 21 cy= 26.5 rx= 1.5 ry= 0.5 fill= red></ellipse> <ellipse cx= 20 cy= 22 rx= 2 ry= 1 fill= #AD4802></ellipse>//จมูก <ellipse cx= 15 cy= 23 rx= 2 ry= 1 fill= pink></ellipse> <ellipse cx= 24.7 cy= 23 rx= 2 ry= 1 fill= pink></ellipse> </svg> <animate attributeName="rx" values="1.5;2.5;1.5" dur="3s" repeatCount="indefinite" /> <!-- แทน-ภาธร --> <svg x="40"y="-3"> <text x="15" y=12 font-size="3" fill="hsl(40, 100%, 90%)"> 'Tan.'</text> <ellipse cx="20" cy="22" rx="17.75" ry="8.5" fill="#39B32A" /> <ellipse cx="9" cy="22" rx="5.5" ry="6" fill="#61FA4E" />น้องคนซ้าย <ellipse cx="31" cy="22" rx="5.5" ry="6" fill="#61FA4E" />น้องคนขวา <ellipse cx="20" cy="22" rx="6.5" ry="7" fill="url(#gra2)" />น้องคนกลาง <circle cx="7" cy="20" r=.5 fill="black"></circle>ตาซ้ายน้องคนซ้าย <circle cx="7.2" cy="20" r=0.25 fill="white"></circle>ตาขาวซ้ายน้องคนซ้าย <circle cx="11" cy="20" r=.5 fill="black"></circle>ตาขวาน้องคนซ้าย <circle cx="11.2" cy="20" r=0.25 fill="white"></circle>ตาขาวขวาน้องคนซ้าย <circle cx="17.3" cy="20" r=.5 fill="black"></circle>ตาซ้ายน้องคนกลาง <circle cx="17.5" cy="20" r=0.25 fill="white"></circle>ตาขาวซ้ายน้องคนกลาง <circle cx="22.5" cy="20" r=.5 fill="black"></circle>ตาขวาน้องคนกลาง <circle cx="22.7" cy="20" r=0.25 fill="white"></circle>ตาขาวขวาน้องคนกลาง <circle cx="29.3" cy="20" r=.5 fill="black"></circle>ตาซ้ายน้องคนขวา <circle cx="29.5" cy="20" r=0.25 fill="white"></circle>ตาขาวซ้ายน้องคนขวา <circle cx="33" cy="20" r=.5 fill="black"></circle>ตาขวาน้องคนขวา <circle cx="33.2" cy="20" r=0.25 fill="white"></circle>ตาขาวขวาน้องคนขวา <circle cx="6" cy="22" r=1.2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนซ้าย <circle cx="11.7" cy="22" r=1.2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนซ้าย <circle cx="16" cy="22" r=2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนกลาง <circle cx="24" cy="22" r=2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนกลาง <circle cx="28" cy="22" r=1.2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนซ้าย <circle cx="34" cy="22" r=1.2 fill="url(#gra1)"></circle>แก้มซ้ายน้องคนซ้าย <radialGradient id="gra1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#F1948A ; stop-opacity:1" /> <stop offset="100%" style="stop-color:#93FF76;stop-opacity:0" /> </radialGradient> <radialGradient id="gra2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="95%" style="stop-color:#93FF76 ; stop-opacity:1" /> <stop offset="100%" style="stop-color:#39B32A;stop-opacity:0" /> </radialGradient> <ellipse cx="9" cy="23" rx=".5" ry=".5" fill="brown">ปากคนซ้าย <animate attributeName="rx" values="1;1;1" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="23" rx=".5" ry=".5" fill="brown">ปากคนกลาง <animate attributeName="rx" values="1;1;1" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="31.3" cy="23" rx=".5" ry=".5" fill="brown">ปากคนขวา <animate attributeName="rx" values="1;1;1" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- เกม-ศราวุธ --> <svg x="29" y="75"> <text x="14" y="36" font-size="3" fill="hsl(40, 100%, 90%)"> 'Game.'</text> <polygon points="11,12 12.5,4 21,10" fill="#FECBC4"></polygon>หูนอกซ้าย <polygon points="12,12 13,5 20,10" fill="#DF7773"></polygon>หูในซ้าย <polygon points="28.9,12 27.5,4 21,10" fill="#FECBC4"></polygon>หูนอกขวา <polygon points="28,12 27,5 22,10" fill="#DF7773"></polygon>หูในขวา <ellipse cx="27" cy="30" rx="2.5" ry="2.5" fill="#F5AD9B"></ellipse> <ellipse cx="13" cy="30" rx="2.5" ry="2.5" fill="#F5AD9B"></ellipse> <ellipse cx="20" cy="20" rx="13" ry="12" fill="#F8D1C5"></ellipse> <ellipse cx="20" cy="27" rx="6" ry="5" fill="#f4a89e"></ellipse>จมูกนอก <ellipse cx="20" cy="27.5" rx="6" ry="4.5" fill="#fad5cf"></ellipse>จมูกใน <ellipse cx="16" cy="15" rx="3" ry="2" fill="#a"></ellipse> <ellipse cx="16" cy="15.5" rx="3" ry="2" fill="#f8d0c2"></ellipse> <ellipse cx="24" cy="15" rx="3" ry="2" fill="#a"></ellipse> <ellipse cx="24" cy="15.5" rx="3" ry="2" fill="#f8d0c2"></ellipse> <circle cx="16" cy="18" r="2" fill="#a"></circle>ตา <circle cx="24" cy="18" r="2" fill="#a"></circle>ตา <ellipse cx="22" cy="27.5" rx="1" ry="1.5" fill="#F698A3"> <animate attributeName="ry" values="1;1;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse>รูจมูก <ellipse cx="18" cy="27.5" rx="1" ry="1.5" fill="#F698A3"> <animate attributeName="ry" values="1;1;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse>รูจมูก <ellipse cx="12" cy="22" rx="2" ry="1" fill="#FCE2E5"> <animate attributeName="rx" values="1.5;3;1.5" dur="5s" repeatCount="indefinite" /> </ellipse>เเก้ม <ellipse cx="28" cy="22" rx="2" ry="1" fill="#FCE2E5"> <animate attributeName="rx" values="1.5;3;1.5" dur="5s" repeatCount="indefinite" /> </ellipse>เเก้ม </svg> <!-- พิม-ณัชชา --> <svg x="81" y="74"> <text x="12.5" y="37" font-size="3" fill="hsl(40, 100%, 90%)"> 'Pim.dy'</text> <radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(270,60%,100%);" /> <stop offset="100%" style="stop-color:hsl(0, 0%, 70%);" /> </radialGradient> <radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(270,60%,100%);" /> <stop offset="100%" style="stop-color:hsl(0, 0%, 70%);" /> </radialGradient> <radialGradient id="shadow2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(221, 78%, 49%);" /> <stop offset="100%" style="stop-color:hsl(221, 78%, 36%);" /> </radialGradient> <radialGradient id="shadow3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="20%" style="stop-color:hsl(357, 100%, 53%)" /> <stop offset="100%" style="stop-color:hsl(357, 100%, 32%)" /> </radialGradient> <radialGradient id="shadow4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:hsl(48, 100%, 50%)" /> <stop offset="100%" style="stop-color:hsl(45, 100%, 42%)" /> </radialGradient> <ellipse cx="20" cy="20" rx="14" ry="12" fill="url(#shadow)" /> <svg y="3"> <ellipse cx="20" cy="9" rx="7" ry="1" fill="black" /> <rect width="14" height="2" x="13" y="7"/> <ellipse cx="20" cy="6" rx="8" ry="2.5" fill="url(#shadow2)" /> </svg> <svg width="4" height="11"> </svg> <svg x="10"> <ellipse cx="15" cy="20" rx="2" ry="2" fill="hsl(20,70%,0%)"> <animate attributeName="ry" values="2;1;0;1;2" dur="2.5s" repeatCount="indefinite" /> </ellipse> <circle cx="14" cy="19" fill="white" r="0.5"></circle> <ellipse cx="5" cy="20" rx="2" ry="2" fill="hsl(20,70%,0%)"> <animate attributeName="ry" values="2;1;0;1;2" dur="2.5s" repeatCount="indefinite" /> </ellipse> <circle cx="4" cy="19" fill="white" r="0.5"></circle> </svg> <svg y="3"> <ellipse cx="12" cy="19" rx="1.5" ry="1" fill="pink" /> <ellipse cx="28" cy="19" rx="1.5" ry="1" fill="pink" /> <ellipse cx="20" cy="20" rx="4" ry="1.5" fill="url(#shadow4)" /> <ellipse cx="17" cy="29" rx="3" ry="2" fill="url(#shadow3)" /> <ellipse cx="23" cy="29" rx="3" ry="2" fill="url(#shadow3)" /> <ellipse cx="20" cy="29" rx="1" ry="1" fill="url(#shadow4)" /> <line x1="16" y1="20" x2="24" y2="20" style="stroke:rgb(255, 131, 36) ;stroke-width:0.1" /> </svg> </svg> <!-- ป๊อบ-ณัฐธิดา --> <svg x="1"y="75"> <text x="15" y="36" font-size="3" fill="hsl(40, 100%, 90%)"> 'Pop.'</text> <svg> หูซ้าย <path d="M 9 5 Q 0 15, 16 14 " fill="#ECCE40"/> <ellipse cx="8" cy="7.8" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="7.6" cy="10" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="7" cy="9.5" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="7.4" cy="8.3" rx="2" ry="3" fill="#ECCE40"/> <path d="M 8.5 6 Q 0 13, 16 16 " fill="#F2E3A8"/> </svg> <svg> หูขวา <path d="M 30 5 Q 36 15, 16 14 " fill="#ECCE40"/> <ellipse cx="30.5" cy="7.8" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="30" cy="9" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="29" cy="9.5" rx="2" ry="3" fill="#ECCE40"/> <ellipse cx="30" cy="9" rx="2" ry="3" fill="#ECCE40"/> <path d="M 30 6 Q 37 14, 16 16 " fill="#F2E3A8"/> </svg> หน้า <defs> <radialGradient id="1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(31, 70%, 81%);" /> <stop offset="100%" style="stop-color:hsl(31, 70%, 51%);" /> </radialGradient> </defs> <svg>หน้า <ellipse cx="20" cy="20" rx="14" ry="11" fill="url(#1)"/> <ellipse cx="20" cy="21" rx="14" ry="12" fill="url(#1)"/> </svg> <svg>ช่วงตา <ellipse cx="20" cy="15.3" rx="8" ry="5.2" fill="#F2E3A8"/> <!-- คิ้วซ้าย --> <path d="M 12 16 Q 10 11, 19 10" fill="#38270C"/> <ellipse cx="18.2" cy="16" rx="6" ry="4" fill="#F2E3A9"/> <ellipse cx="18.5" cy="15.3" rx="6" ry="4" fill="#F2E3A9"/> <!-- คิ้วขวา --> <path d="M 28 16 Q 29 11, 21 10" fill="#38270C"/> <ellipse cx="21.8" cy="16" rx="6" ry="4" fill="#F2E3A9"/> <ellipse cx="21.5" cy="15.3" rx="6" ry="4" fill="#F2E3A9"/> <!-- ตา --> <circle cx="18" cy="18" r="1" fill="#38270C" /> <circle cx=22 cy="18" r="1" fill="#38270C" /> <!-- คิ้วน้อย --> <path d="M 19 11.5 L 14.5 11.5 17.5 10.5" fill="#38270C"/> <path d="M 25 11.5 L 20.5 11.5 23.5 10.5" fill="#38270C"/> </svg> <svg>จมูก <!-- หนวดซ้าย --> <path d="M 15 22 Q 6 16 17 24" fill="#38270C"/> <path d="M 15 24.5 Q 4 20 17 26" fill="#38270C"/> <path d="M 13 26 Q 3 24 18 28" fill="#38270C"/> <path d="M 12 28 Q 5 28 26 30" fill="#38270C"/> <!-- หนวดขวา --> <path d="M 24 22 Q 38 16 17 26" fill="#38270C"/> <path d="M 25 24.5 Q 40 20 17 28" fill="#38270C"/> <path d="M 26 26.5 Q 42 24 17 29" fill="#38270C"/> <path d="M 25 28.5 Q 38 28 16 30" fill="#38270C"/> <ellipse cx="20" cy="27" rx="7" ry="6" fill="#F2E3A8"/> กรอบครีม <path d="M 20 22 Q 13 22 20.2 26" fill="#DA7674"/>จมูกชมพูซ้าย <path d="M 20 22 Q 27 22 20.2 26" fill="#DA7674"/>จมูกชมพูขวา </svg> </svg> <!-- ปุยฝ้าย-ขวัญพิชชา --> <svg x="40"y="44.6"> <text x="27.5" y="10" font-size="3" fill="hsl(40, 100%, 90%)"> 'Puifai'</text> <svg x="20"> </svg> <path d="M 12 7 Q 18 8 18 10.2" stroke="hsl(30,70%,20%)" stroke-width="1" fill="transparent"/> ผม <path d="M 19 4 Q 20 8 20 10" stroke="hsl(30,70%,20%)" stroke-width="1" fill="transparent"/> ผม <path d="M 28 6.3 Q 23 8 22.2 10.3" stroke="hsl(30,70%,20%)" stroke-width="1" fill="transparent"/> ผม <path d="M 35 31 Q 45 28, 30.4 14" fill="url(#grad2)"/> หูขวา <path d="M 35 31 Q 44 29, 33.4 19" fill="url(#grad3)"/> ในหูขวา <path d="M 5 31 Q -6 28, 10 14" fill="url(#grad2)"/> หูซ้าย <path d="M 5 31 Q -3 28, 10 16" fill="url(#grad3)"/> ในหูซ้าย <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:hsl(270,60%,90%);" /> <stop offset="100%" style="stop-color:hsl(270,40%,60%);" /> </radialGradient> </defs> <ellipse cx="12" cy="32" rx="3" ry="2.5" fill="hsl(270,40%,62%)" /> <ellipse cx="27.5" cy="32" rx="3" ry="2.5" fill="hsl(270,40%,62%)" /> <ellipse cx="20" cy="22" rx="14" ry="12" fill="url(#grad1)" /> <svg> <ellipse cx="15" cy="21" rx="1.5" ry="1.5" fill="hsl(30,70%,10%)" /> <circle cx="15.7" cy="21" fill="white" r="0.5"></circle> </svg> <svg x="10"> <line x1="14" y1="16" x2="19" y2="17" stroke="hsl(30,70%,10%)" stroke-width="0.5" stroke-linecap="round" /> <ellipse cx="15" cy="21" rx="1.5" ry="1.5" fill="hsl(30,70%,10%)" /> <circle cx="14.3" cy="21" fill="white" r="0.5"></circle> </svg> <svg y="3"> <line x1="11" y1="13.9" x2="16" y2="13" stroke="hsl(30,70%,10%)" stroke-width="0.5" stroke-linecap="round" /> <path d="M 32.8 24 Q 20 19, 7.3 24" fill="hsl(30,70%,80%)"/> <path d="M 32.8 24 Q 20 38, 7.2 24" fill="hsl(30,70%,80%)"/> <path d="M 20 31 Q 11 31, 7.2 24" fill="hsl(30,70%,80%)"/> <path d="M 20 31 Q 28.5 31, 32.8 24" fill="hsl(30,70%,80%)"/> <line x1="20" y1="7.1" x2="20" y2="30.9" stroke="hsl(30,70%,20%)" stroke-width=".1" stroke-linecap="round" /> <line x1="19" y1="18" x2="21" y2="18" stroke="hsl(30,70%,20%)" stroke-width="0.1" stroke-linecap="round" /> <line x1="19" y1="19" x2="21" y2="19" stroke="hsl(30,70%,20%)" stroke-width="0.1" stroke-linecap="round" /> <line x1="19" y1="22" x2="21" y2="22" stroke="hsl(30,70%,20%)" stroke-width="0.1" stroke-linecap="round" /> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:hsl(270,40%,60%);" /> <stop offset="100%" style="stop-color:hsl(270,60%,80%);" /> </linearGradient> </defs> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:hsl(330,50%,40%);" /> <stop offset="100%" style="stop-color:hsl(330,80%,83%);" /> </linearGradient> </defs> </svg> <ellipse cx="20" cy="30" fill="hsl(10,70%,40%)" rx="2" ry="2"> <animate attributeName="rx" values="2;2;3;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse> </svg> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <!-- <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0"/> --> </svg> </body> </html>