SVG Yellow Bear (Copy 6211)
✨ นางสาวนิดา คงรุ่งเรือง
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#eee; background-color:pink; } </style> </head> <body> <svg viewBox = "0 0 40 400"> <svg> <rect fill="red" 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="#FAD000" r="4"></circle> <circle cx="10" cy="14" fill="#FAD749" r="3"></circle> <svg x="20"> <circle cx="10" cy="14" fill="#FAD000" r="4"></circle> <circle cx="10" cy="14" fill="#FAD749" r="3"></circle> </svg> <svg> <circle cx="20" cy="22" r="12" fill="#FAD000" /> <circle cx="20" cy="22" r="11" fill="#FAD749" /> <ellipse cx="20" cy="26" rx="14" ry="9" fill="#FAD749" /> </svg> <svg> <ellipse cx="15" cy="21" fill="grey" rx="1" ry="1.5"></ellipse> <ellipse cx="15" cy="21" fill="black" rx="0.9" ry="1.4"></ellipse> <ellipse cx="25" cy="21" fill="grey" rx="1" ry="1.5"></ellipse> <ellipse cx="25" cy="21" fill="black" rx="0.9" ry="1.4"></ellipse> </svg> <svg> <ellipse cx="20" cy="25.3" fill="hsl(30,70%,30%)" rx="2.7" ry="1.8"> <animate attributeName="rx" values="2.5;3;4;3;2.5" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg> <ellipse cx="20" cy="31" fill="red" rx="3.4" ry="1.9"> <animate attributeName="fill" values="black;red;black" dur="6s" repeatCount="indefinite" /> </ellipse> <!-- กบ --> <ellipse cx="20" cy="72" rx="16" ry="12" fill="hsla(83, 86%, 54%, 1)" /> <circle cx="16" cy="62" r="5" fill="white"/> <circle cx="24" cy="62" r="5" fill="white"/> <circle cx="17" cy="61" r="2" fill="black"/> <circle cx="23" cy="61" r="2" fill="black"/> <circle cx="10" cy="70" r="3" fill="hsla(353, 100%, 46%, 1)"/> <circle cx="29" cy="70" r="3" fill="hsla(353, 100%, 46%, 1)"/> <line x1="13" y1="57" x2="19" y2="57" style="stroke:#2e0a12;stroke-width:0.9"> <animate attributeName="y1" values="57;57;56;57;57" dur="1s" repeatCount="indefinite" /> <animate attributeName="y2" values="57;57;56;57;57" dur="2s" repeatCount="indefinite" /> </line> <line x1="21" y1="57" x2="27" y2="57" style="stroke:#2e0a12;stroke-width:0.9"> <animate attributeName="y1" values="57;57;56;57;57" dur="2s" repeatCount="indefinite" /> <animate attributeName="y2" values="57;57;56;57;57" dur="1s" repeatCount="indefinite" /> </line> <circle cx="20" cy="80" r="2" fill="#eee"/> <ellipse cx="20.2" cy="80.8" rx="1.4" ry="1.2" fill="red"/> <!-- แมว --> <!-- หู --> <ellipse cx="15" cy="115" rx="4" ry="10" fill="#f7d9d9" /> <ellipse cx="15" cy="115" rx="3" ry="8" fill="#db006a" /> <svg x="15"> <ellipse cx="15" cy="115" rx="4" ry="10" fill="#f7d9d9" /> <ellipse cx="15" cy="115" rx="3" ry="8" fill="#db006a" /> </svg> <ellipse cx="22.4" cy="122" rx="13" ry="12" fill="#f7d9d9" /> <ellipse cx="22.4" cy="125" rx="17" ry="10" fill="#f7d9d9" /> <circle cx=17 cy=118 r=3 stroke="black" stroke-width=".2" fill="white"></circle> <circle cx=28 cy=118 r=3 stroke="black" stroke-width=".2" fill="white"></circle> <ellipse cx="17" cy="118" rx="0.5" ry="2.5" fill="blue"> <!-- ตา --> <animate attributeName="rx" values="1;2;2.5;2;1" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="28" cy="118" rx="0.5" ry="2.5" fill="blue"> <animate attributeName="rx" values="1;2;2.5;2;1" dur="4s" repeatCount="indefinite" /> </ellipse> <!-- จมูก ปาก หนวด --> <ellipse cx="22.5" cy="128" rx=14 ry="7" fill="hsl(30,70%,80%)" /> <rect x="9" y="127.5" width="4" rx="1" ry="1" cx="20.5" cy="122" height="4" fill="black" transform="rotate(333.6)" stroke="black" stroke-width=".2" > </rect> <path d="M 17 25 L1 25" stroke="#fa0000" stroke-width=.7 /> <path d="M 17 26 L1 30" stroke="#fa0000" stroke-width=.7 /> <path d="M 17 27 L1 35" stroke="#fa0000" stroke-width=.7 /> <path d="M 29 25 L46 20" stroke="#fa0000" stroke-width=.7 /> <path d="M 29 26 L46 25" stroke="#fa0000" stroke-width=.7 /> <path d="M 29 27 L46 30" stroke="#fa0000" stroke-width=.7 /> <path d="M 15 28 q7 10 15 0" stroke="black" fill="none" stroke-width=".2" /> <line x1="22.5" y1="122.5" x2="22.5" y2="133" style="stroke:black;stroke-width:.2" /> <ellipse cx="22.5" cy="138" rx="3" ry="3" fill="#FFF800" stroke=red stroke-width=.3 /> <ellipse cx="22.5" cy="139" rx="1.5" ry=".5"/> <line x1="22.5" y1="139" x2="22.5" y2="141" style="stroke:black;stroke-width:.2"></line> </svg> </svg> </body> </html>