SVG Kirby
✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:lemonchiffon; } </style> </head> <body> <svg viewBox="0 0 100 100"> <ellipse cx="70" cy="17" rx="20" ry="12" fill="hsl(349, 80%, 80%)" /> <ellipse cx="25" cy="17" rx="20" ry="12" fill="hsl(349, 80%, 80%)" /> <ellipse cx="25" cy="17" rx="15" ry="10" fill="hsl(347, 55%, 54%)" /> <ellipse cx="72" cy="17" rx="15" ry="8" fill="hsl(347, 55%, 54%)" /> <ellipse cx="75" cy="82" rx="17" ry="10 " fill="hsl(332, 84%, 42%)" /> <!--เท้าหลัง--> <circle cx="50" cy="50" fill="hsl(349, 80%, 80%)" r="40"></circle> <!--ตัว--> <ellipse cx="35" cy="40" rx="5" ry="9" fill="hsl(,70%,80%)" /> <!--ตาซ้าย--> <ellipse cx="65" cy="40" rx="5" ry="9" fill="hsl(,70%,80%)" /> <!--ตาขวา--> <circle cx="35" cy="35" fill="hsl(0, 80%, 100%)" r="3.5"></circle> <!--แววตาซ้าย--> <circle cx="65" cy="35" fill="hsl(0, 80%, 100%)" r="3.5"></circle> <!--แววตาขวา--> <circle cx="50" cy="64" fill="hsl(359, 72%, 42%)" r="10"><animate attributeName="r" values="10;9;8" dur="2.5s" repeatCount="indefinite" /></circle> <!--ปาก--> <ellipse cx="50" cy="67" rx="9" ry="7" fill="hsl(359, 79%, 61%)"> <animate attributeName="rx" values="9;8;7" dur="2.5s" repeatCount="indefinite" /> <animate attributeName="ry" values="7;6;5" dur="2.5s" repeatCount="indefinite" /> </ellipse><!--ลิ้น--> <ellipse cx="85" cy="40" rx="15" ry="10" fill="hsl(349, 80%, 80%)" /> <!--แขน--> <ellipse cx="15" cy="50" rx="15" ry="10" fill="hsl(349, 80%, 80%)" /> <!--แขน--> <ellipse cx="25" cy="82" rx="17" ry="11" fill="hsl(332, 84%, 42%)" /> <!--เท้าหน้า--> <ellipse cx="22" cy="52" rx="10" ry="5" fill="hsl(343, 100%, 50%)" /> <ellipse cx="77" cy="52" rx="10" ry="5" fill="hsl(343, 100%, 50%)" /> <!-- 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" style="opacity:.5"/> --> </svg> </body> </html>