SVG Bear (Branch 5403)
✨ นางสาววรณัน วารีประเสริฐ
<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 40 40"> <circle cx="20" cy="10" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="10" cy="14" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="8" cy="23" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="30" cy="14" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="10" cy="31" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="30" cy="30" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="20" cy="33" fill="hsl(30,50%,50%)" r="7"></circle> <circle cx="32" cy="22" fill="hsl(30,50%,50%)" r="7"></circle> <!--ขนสิงโต--> <circle cx="12" cy="14.5" fill="hsl(30,70%,60%)" r="5"></circle> <!--หูนอกซ้าย--> <circle cx="12" cy="14.5" fill="hsl(30,50%,50%)" r="3.5"></circle> <!--หูในซ้าย--> <circle cx="28" cy="14.5" fill="hsl(30,70%,60%)" r="5"></circle> <!--หูนอกขวา--> <circle cx="28" cy="14.5" fill="hsl(30,50%,50%)" r="3.5"></circle> <!--หูในขวา--> <ellipse cx="20" cy="23.5" rx="14" ry="12" fill="hsl(30,70%,60%)" /> <!--หน้า--> <svg> <ellipse cx="15" cy="19" rx="2" ry="2" fill="hsl(30,70%,10%)" /> <!--ตาดำซ้าย--> <circle cx="14.5" cy="18.5" fill="white" r="1"> <animate attributeName="cx" values="14.5;14.5;15.5;14.5" dur="3s" repeatCount="indefinite" /> <animate attributeName="cy" values="19;19.5;18.5;19" dur="3s" repeatCount="indefinite" /> </circle> <!--ตาขาวซ้าย--> </svg> <svg x="10"> <ellipse cx="15" cy="19" rx="2" ry="2" fill="hsl(30,70%,10%)" /> <!--ตาดำขวา--> <circle cx="14.5" cy="18.5" fill="white" r="1"> <animate attributeName="cx" values="14.5;14.5;15.5;14.5" dur="3s" repeatCount="indefinite" /> <animate attributeName="cy" values="19;19.5;18.5;19" dur="3s" repeatCount="indefinite" /> </circle> <!--ตาขาวขวา--> </svg> <ellipse cx="20" cy="30" rx="4" ry="4" fill="hsl(0,70%,50%)"> <animate attributeName="rx" values="4;3;4;3;4" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="4;2;3;2;4" dur="5s" repeatCount="indefinite" /> </ellipse> <!--ปาก--> <circle cx="23.5" cy="27.5" r="4.5" fill="hsl(30,70%,80%)"></circle> <circle cx="16.5" cy="27.5" r="4.5" fill="hsl(30,70%,80%)"></circle> <!--ขอบปาก--> <ellipse cx="13" cy="23" rx="3" ry="1.5" fill="hsl(0,70%,70%)" /> <ellipse cx="27.5" cy="23" rx="3" ry="1.5" fill="hsl(0,70%,70%)" /> <!--แก้ม--> <ellipse cx="20.2" cy="24" rx="4" ry="2" fill="hsl(30,70%,30%)" /> <!--จมูก--> <line x1="6" y1="24" x2="14" y2="26.5" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="24;25;24" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดบนซ้าย--> <line x1="6" y1="28" x2="14" y2="28" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="28;29;28" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดกลางซ้าย--> <line x1="7" y1="31" x2="14" y2="29.5" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="31;32;31" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดล่างซ้าย--> <line x1="34" y1="24" x2="26" y2="26.5" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="24;25;24" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดบนขวา--> <line x1="34" y1="28" x2="26" y2="28" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="28;29;28" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดกลางขวา--> <line x1="33" y1="31" x2="26" y2="29.5" stroke="black" stroke-width="0.3" stroke-linecap="round"> <animate attributeName="y1" values="31;32;31" dur="4s" repeatCount="indefinite" /> </line> <!--หนวดล่างขวา--> <text x="27" y="2" fill="black" style="font-size:1;">วรณัน วารีประเสริฐ 63070155</text> </svg> </body> </html>