P’Thx B
✨ นายจิรพัฒน์ วุ่นพ้วน
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#D4E6F1; } </style> </head> <body> <!-- Panda --> <svg viewBox="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <circle cx="10" cy="14" fill="black" r="8"></circle> <circle cx="10" cy="14" fill="black" r="6"></circle> <svg x="20"> <circle cx="10" cy="14" fill="black" r="8"></circle> <circle cx="10" cy="14" fill="black" r="6"></circle></svg> <ellipse cx="20" cy="22" rx="15" ry="13" fill="black" /> <ellipse cx="20" cy="22" rx="14" ry="12" fill="white" /> <svg> <ellipse cx="15" cy="21" rx="5" ry="5" fill="black" /> <ellipse cx="15" cy="21" rx="2" ry="4" fill="white" /> <circle cx="15" cy="20" fill="black" r="1"></circle> </svg> <svg x="10"> <ellipse cx="15" cy="21" rx="5" ry="5" fill="black" /> <ellipse cx="15" cy="21" rx="2" ry="4" fill="white" /> <circle cx="15" cy="20" fill="black" r="1"></circle> </svg> <svg y="3"> <ellipse cx="20" cy="26" rx="9.2" ry="5.2" fill="black" /> <ellipse cx="20" cy="26" rx="9" ry="5" fill="white" /> <ellipse cx="20" cy="23" rx="5" ry="2" fill="black" /> <line x1="20" y1="23" x2="20" y2="25.5" stroke="black" stroke-width="1" stroke-linecap="round" /> </svg> <ellipse cx="25" cy="20" fill="black" rx="2" ry="2"> <animate attributeName="rx" values="1;1;1;1;1" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0;0;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse> <ellipse cx="15" cy="20" fill="black" rx="2" ry="2"> <animate attributeName="rx" values="1;1;1;1;1" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0;0;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="32" 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> <!-- 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> <!-- Bunny --> <svg viewBox ="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <!-- หูขวา --> <ellipse cx="25" cy="11" rx="3" ry="6" fill="hsl(30,100%,0%)" /> <ellipse cx="25" cy="12" rx="3" ry="6.5" fill="hsl(30,100%,100%)" /> <ellipse cx="25" cy="12" rx="1" ry="4" fill=#f5d5d0 /> <!-- หูซ้าย --> <ellipse cx="15" cy="11" rx="3" ry="6" fill="hsl(30,100%,0%)" /> <ellipse cx="15" cy="12" rx="3" ry="6.5" fill="hsl(30,100%,100%)" /> <ellipse cx="15" cy="12" rx="1" ry="4" fill=#f5d5d0 /> <!-- หน้า --> <ellipse cx="20" cy="20" rx="8" ry="6.5" fill="hsl(30,100%, 0%)" /> <ellipse cx="20" cy="20" rx="7.8" ry="6.5" fill="hsl(30,100%, 100%)" /> <!-- ตาขวา --> <ellipse cx="23" cy="19" rx="1.5" ry="1.5" fill=#413023 /> <ellipse cx="23" cy="19.3" rx="1.5" ry="1.5" fill="hsl(30,100%, 100%)" /> <!-- หูซ้าย --> <ellipse cx="17" cy="19" rx="1.5" ry="1.5" fill=#413023 /> <ellipse cx="17" cy="19.3" rx="1.5" ry="1.5" fill="hsl(30,100%, 100%)" /> <!-- แก้ม --> <ellipse cx="25" cy="22" rx="1" ry="0.8" fill=#f5d5d0 /> <ellipse cx="15" cy="22" rx="1" ry="0.8" fill=#f5d5d0 /> <!-- ปาก --> <ellipse cx="20" cy="23.7" rx="1.4" ry="1.7" fill=#413023> <animate attributeName="rx" values="1.4;1.6;1.8;2;" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.7;1.9;2.1;2.3" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="23.7" rx="1.2" ry="1.6" fill=#f38bba> <animate attributeName="rx" values="1.2;1.4;1.6;1.8;" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.6;1.8;2;2.2" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20.75" cy="22" rx="1" ry="1" fill=#413023 /> <ellipse cx="19.25" cy="22" rx="1" ry="1" fill=#413023 /> <ellipse cx="20.75" cy="21.7" rx="1" ry="1" fill="hsl(30,100%, 100%)" /> <ellipse cx="19.25" cy="21.7" rx="1" ry="1" fill="hsl(30,100%, 100%)" /> </svg> <!-- dog_shiba --> <svg viewBox="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <polygon points="18 11, 6 21, 6 6" fill="hsl(34, 96%, 70%)"/> <polygon points="11 11, 7 21, 6 6" fill="hsl(12, 67%, 77%)"/> <svg x="20"> <polygon points="14 22, -10 19, 15 6" fill="hsl(34, 96%, 70%)"/> <polygon points="11 12,12 28, 15 6" fill="hsl(12, 67%, 77%)"/></svg> <ellipse cx="20" cy="22" rx="14" ry="12" fill="hsl(34, 96%, 70%)" /> <ellipse cx="20" cy="26" rx="16" ry="7" fill="hsl(34, 96%, 70%)" /> <ellipse cx="20" cy="27" rx="13" ry="6" fill="hsl(34, 96%, 95%)" /> <circle cx="20" cy="21" fill="hsl(34, 96%, 70%)" r="5"></circle> <svg> <ellipse cx="14" cy="17" rx="2.5" ry="1.2" fill="hsl(34, 96%, 95%)" /> <ellipse cx="14" cy="21" fill="black" r="2"> <animate attributeName="rx" values="2;2;2;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="2;2;0.5;2;2" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="14.3" cy="20" fill="white" r="0.7"> <animate attributeName="rx" values="0.7;0.7;0.7;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0.7;0.7;0.05;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="cy" values="20;20;21;20;20" dur="4s" repeatCount="indefinite" /> </ellipse> </svg> <svg x="12"> <ellipse cx="14" cy="17" rx="2.5" ry="1.2" fill="hsl(34, 96%, 95%)" /> <ellipse cx="14" cy="21" fill="black" r="2"> <animate attributeName="rx" values="2;2;2;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="2;2;0.5;2;2" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="14.3" cy="20" fill="white" r="0.7"> <animate attributeName="rx" values="0.7;0.7;0.7;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0.7;0.7;0.05;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="cy" values="20;20;21;20;20" dur="4s" repeatCount="indefinite" /> </ellipse> </svg> <svg y="3"> <ellipse cx="20" cy="26" rx="9" ry="5" fill="hsl(34, 96%, 95%)" /> <ellipse cx="20" cy="23" rx="4" ry="2" fill="black" /> <line x1="20" y1="25" x2="20" y2="26" stroke="black" stroke-width="0.8" stroke-linecap="round" /> <ellipse cx="20" cy="28" rx="0.7" ry="0.5" fill="hsl(12, 67%, 77%)" /> </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> <!-- Dog --> <svg viewBox="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <ellipse cx="20" cy="18" rx="13" ry="12" fill="hsl(30,70%,30%)" filter="url(#f3)" /> <line x="25" y="27" x2="30" y="32" fill="black"/> <svg> <ellipse cx="14" cy="17" rx="4" ry="5" fill="white"> <animate attributeName="ry" values="1;1;4;1;1" dur="10s" repeatCount="indefinite" /> </ellipse> <circle cx="14" cy="17" fill="black" r="1"></circle> </svg> <svg x="10"> <ellipse cx="16" cy="17" rx="4" ry="5" fill="white"> <animate attributeName="ry" values="1;1;4;1;1" dur="10s" repeatCount="indefinite" /> </ellipse> <circle cx="16" cy="17" fill="black" r="1"></circle> <line x="25" y="27" x2="30" y="32" fill="black"/> </svg> <svg y="3"> <ellipse cx="20" cy="26" rx="9" ry="5" fill="hsl(30,70%,80%)" /> <ellipse cx="20" cy="23" rx="5" ry="2" fill="hsl(30,70%,30%)" /> <line x1="20" y1="23" x2="20" y2="25.5" stroke="hsl(30,70%,30%)" stroke-width="1" ></line> </svg> <svg> <rect x="3.5" y="17" rx="10" ry="30" width="7" height="19" style="fill:hsl(30,50%,30%)" /> <rect x="29.5" y="17" rx="10" ry="30" width="7" height="19" style="fill:hsl(30,50%,30%)" /> </svg> <ellipse cx="20" cy="32" 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> <!-- Grid --> <defs> <filter id="f3" x="0" y="0" width="200%" height="200%"> <feOffset result="offOut" in="SourceAlpha" dx="15" dy="5" /> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" /> <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter> </defs> <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> <!-- Cat --> <svg viewBox="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <path d="M5 3 L5 20 L25 20 Z" fill="#e9cba7" /> <path d="M35 3 L35 20 L15 20 Z" fill="#e9cba7" /> <path d="M6 5 L6 20 L23 20 Z" fill="#d2b897" /> <path d="M34 5 L34 20 L17 20 Z" fill="#d2b897" /> <rect width="30" height="23" x="5" y="11" fill="#e9cba7" /> <ellipse cx="20" cy="11.5" fill="#e9cba7" rx="15" ry="1" /> <line x1="17.5" y1="11" x2="17.5" y2="14" stroke="#bea98c" stroke-width="1" stroke-linecap="round" /> <line x1="20" y1="11.25" x2="20" y2="16" stroke="#bea98c" stroke-width="1.5" stroke-linecap="round" /> <line x1="22.5" y1="11.125" x2="22.5" y2="15" stroke="#bea98c" stroke-width="1.25" stroke-linecap="round" /> <line x1="6" y1="34" x2="34" y2="34" stroke="#e9cba7" stroke-width="2" stroke-linecap="round" /> <circle cx="14" cy="20" r="2" fill="#554c43" /> <circle cx="13.25" cy="19.25" r="1" fill="white" /> <circle cx="26" cy="20" r="2" fill="#554c43" /> <circle cx="25.25" cy="19.25" r="1" fill="white" /> <circle cx="20" cy="40" fill="#f3e7d1" r="10" /> <rect width="20" height="15" x="10" y="35" fill="#F9F2D7"/> <ellipse cx="20" cy="26" fill="#ef929f" 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 y="1"> <line x1="3" y1="20" x2="12" y2="23" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> <line x1="3" y1="25" x2="12" y2="25" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> <line x1="3" y1="30" x2="12" y2="27" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> <line x1="28" y1="23" x2="37" y2="20" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> <line x1="28" y1="25" x2="37" y2="25" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> <line x1="28" y1="27" x2="37" y2="30" stroke="#d3b998" stroke-width="0.5" stroke-linecap="round" /> </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> <!-- Pig --> <svg viewBox="0 0 40 40"> <rect fill="salmon" width="40" height="40" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <polygon points="12,3 6,19 15,11" fill="#EE6AA7"/> <polygon points="13,3 8,15 17,20" fill="hsl(330, 100%, 80%)"/> <svg x="20"> <polygon points="12,3 5,15 13,19" fill="#EE6AA7"/> <polygon points="11,3 5,15 13,20" fill="hsl(330, 100%, 80%)"/> </svg> <ellipse cx="20" cy="22" rx="15" ry="13" fill="#E7AFD2" /> <svg> <circle cx="13" cy="21" r="3" fill="hsl(30,70%,10%)" /> <circle cx="13" cy="20" fill="white" r="1"></circle> </svg> <svg x="10"> <circle cx="17" cy="21" r="3" fill="hsl(30,70%,10%)" /> <circle cx="17" cy="20" fill="white" r="1"></circle> </svg> <svg y="3"> <!--<ellipse cx="20" cy="26" rx="9" ry="5" fill="hsl(30,70%,80%)" />--> <circle cx="20" cy="22" r="4" fill="#EE6AA7" /> <circle cx="18" cy="22" r="0.9"fill="#E7AFD2"/> <circle cx="22" cy="22" r="0.9"fill="#E7AFD2"/> </svg> <ellipse cx="20" cy="32" 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> <!-- 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> <!-- Bibi --> <svg viewbox = "0 0 100 100"> <rect fill="salmon" width="100" height="1000" y="0" opacity="1"> <animate attributeName="opacity" values="1;0;1" dur="6s" repeatCount="indefinite"/> </rect> <!-- หู --> <polygon points="30,40 40,35 28,24" style="fill:#333333;stroke:black;stroke-width:0.3" /> <polygon points="70,40 60,35 72,24" style="fill:#333333;stroke:black;stroke-width:0.3" /> <!-- หาง --> <path d="M 75 68 Q 120 50, 65 10" style="fill:transparent;stroke:#333333;stroke-width:1" /> <polygon points="62,12 68,8 59,3" style="fill:#333333;stroke:black;stroke-width:0.3" /> <!-- ตัว --> <ellipse cx="50" cy="60" rx="36" ry="27" style="fill:#333333;stroke:black;stroke-width:0.3" /> <!-- ตา --> <ellipse cx="34" cy="56" rx="5" ry="8" style="fill:#e600e6;stroke:black;stroke-width:0.1" display="flex"> <animate attributeName="display" values="flex;none;none;none" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="66" cy="56" rx="5" ry="8" style="fill:#ffff1a;stroke:black;stroke-width:0.1" display="flex"> <animate attributeName="display" values="flex;none;none;none" dur="4s" repeatCount="indefinite" /> </ellipse> <!-- ตา 2 --> <rect x="29" y="48" height="4" width="10" style="fill:#e600e6" display="none"> <animate attributeName="display" values="none;none;none;flex" dur="4s" repeatCount="indefinite" /> </rect> <rect x="32" y="51" height="10" width="4" style="fill:#e600e6" display="none"> <animate attributeName="display" values="none;none;none;flex" dur="4s" repeatCount="indefinite" /> </rect> <rect x="61" y="48" height="4" width="10" style="fill:#ffff1a" display="none"> <animate attributeName="display" values="none;none;none;flex" dur="4s" repeatCount="indefinite" /> </rect> <rect x="64" y="51" height="10" width="4" style="fill:#ffff1a" display="none"> <animate attributeName="display" values="none;none;none;flex" dur="4s" repeatCount="indefinite" /> </rect> <!-- ตา 3 --> <ellipse cx="34" cy="56" rx="5" ry="5" style="fill:#e600e6;stroke:black;stroke-width:0.1" display="none"> <animate attributeName="display" values="none;none;flex;none" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="66" cy="56" rx="5" ry="5" style="fill:#ffff1a;stroke:black;stroke-width:0.1" display="none"> <animate attributeName="display" values="none;none;flex;none" dur="4s" repeatCount="indefinite" /> </ellipse> <!-- ตา 4 --> <polyline points="30,50 40,55" style="fill:transparent;stroke:#e600e6;stroke-width:4" display="none"> <animate attributeName="display" values="none;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <polyline points="30,60 40,55" style="fill:transparent;stroke:#e600e6;stroke-width:4" display="none"> <animate attributeName="display" values="none;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <polyline points="70,50 60,55" style="fill:transparent;stroke:#ffff1a;stroke-width:4" display="none"> <animate attributeName="display" values="none;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <polyline points="70,60 60,55" style="fill:transparent;stroke:#ffff1a;stroke-width:4" display="none"> <animate attributeName="display" values="none;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <!-- แก้ม --> <ellipse cx="25" cy="68" rx="5" ry="2" style="fill:#ff66b3;stroke:black;stroke-width:0.1" /> <ellipse cx="75" cy="68" rx="5" ry="2" style="fill:#ff66b3;stroke:black;stroke-width:0.1" /> <!-- ปาก --> <polyline points="40,75 45,80 50,75" style="fill:transparent;stroke:#ffff1a;stroke-width:1" display="flex"> <animate attributeName="display" values="flex;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <polyline points="49.3,75 55,80 60,75" style="fill:transparent;stroke:#e600e6;stroke-width:1" display="flex"> <animate attributeName="display" values="flex;flex;none;none" dur="4s" repeatCount="indefinite" /> </polyline> <!-- ปาก 2 --> <polyline points="40,80 45,75 50,80" style="fill:transparent;stroke:#ffff1a;stroke-width:1" display="none"> <animate attributeName="display" values="none;none;flex;flex" dur="4s" repeatCount="indefinite" /> </polyline> <polyline points="49.3,80 55,75 60,80" style="fill:transparent;stroke:#e600e6;stroke-width:1" display="none"> <animate attributeName="display" values="none;none;flex;flex" dur="4s" repeatCount="indefinite" /> </polyline> </svg> </body> </html>