BIBI
✨ JEERAPHAT SAKULSUBWATTANA
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#eee; } </style> </head> <body> <svg viewbox = "0 0 100 100"> <!-- หู --> <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>