SVG Yellow Bear (Copy 6211) (Copy 6233)
✨ นางสาวนิดา คงรุ่งเรือง
<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 350"> <svg> <rect fill="red" width="40" height="400" 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"/> <!-- ลิง2 --> <circle cx="4" cy="115" fill="hsl(30,70%,10%)" r="6"></circle> <circle cx="5" cy="115" fill="hsl(30,70%,60%)" r="5"></circle> <svg x="20"> <circle cx="16" cy="115" fill="hsl(30,70%,10%)" r="6"></circle> <circle cx="15" cy="115" fill="hsl(30,70%,60%)" r="5"></circle></svg> <ellipse cx="20" cy="122" rx="16" ry="12" fill="hsl(30,70%,10%)" /> <ellipse cx="20" cy="113" rx="14" ry="12" fill="hsl(30,70%,10%)" /> <svg> <ellipse cx="15" cy="114" rx="8" ry="10" fill="hsl(30,70%,60%)" /> </svg> <svg x="10"> <ellipse cx="15" cy="114" rx="8" ry="10" fill="hsl(30,70%,60%)" /> </svg> <svg y="3"> <ellipse cx="20" cy="120" rx="15" ry="9.5" fill="hsl(30,70%,60%)" /> <ellipse cx="20" cy="120" rx="5" ry="2" fill="hsl(30,70%,30%)" /> </svg> <ellipse cx="20" cy="129" fill="hsl(10,70%,40%)" rx="10" ry="10"> <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> <ellipse cx="14" cy="114" rx="4" ry="5" fill="hsl(30,70%,90%)" /> <ellipse cx="14" cy="114" rx="3" ry="4" fill="hsl(30,70%,10%)" /> <circle cx="15.5" cy="112" fill="white" r="1"></circle> </svg> <svg x="10"> <ellipse cx="16" cy="114" rx="4" ry="5" fill="hsl(30,90%,90%)" /> <ellipse cx="16" cy="114" rx="3" ry="4" fill="hsl(30,70%,10%)" /> <circle cx="17.5" cy="112" fill="white" r="1"></circle> <!-- แมว --> <svg viewBox="0 0 50 100"> <!-- หู --> <ellipse cx="15" cy="15" rx="4" ry="10" fill="#f7d9d9" /> <ellipse cx="15" cy="15" rx="3" ry="8" fill="#db006a" /> <svg x="15"> <ellipse cx="15" cy="15" rx="4" ry="10" fill="#f7d9d9" /> <ellipse cx="15" cy="15" rx="3" ry="8" fill="#db006a" /> </svg> <ellipse cx="22.4" cy="22" rx="13" ry="12" fill="#f7d9d9" /> <ellipse cx="22.4" cy="25" rx="17" ry="10" fill="#f7d9d9" /> <circle cx=17 cy=18 r=3 stroke="black" stroke-width=".2" fill="white"></circle> <circle cx=28 cy=18 r=3 stroke="black" stroke-width=".2" fill="white"></circle> <ellipse cx="17" cy="18" 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="18" 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="28" rx=14 ry="7" fill="hsl(30,70%,80%)" /> <rect x="9" y="27.5" width="4" rx="1" ry="1" cx="20.5" cy="22" 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="22.5" x2="22.5" y2="33" style="stroke:black;stroke-width:.2" /> <ellipse cx="22.5" cy="38" rx="3" ry="3" fill="#FFF800" stroke=red stroke-width=.3 /> <ellipse cx="22.5" cy="39" rx="1.5" ry=".5"/> <line x1="22.5" y1="39" x2="22.5" y2="41" style="stroke:black;stroke-width:.2"></line> </svg> <!-- ลิง --> <svg viewbox="-20 0 150 150"> <!-- หูซ้าย --> <circle cx="10" cy="165" r="14" fill="#df6f3f" /> <circle cx="10" cy="165" r="10" fill="#ae442a" /> <!-- หูขวา --> <circle cx="90" cy="165" r="14" fill="#df6f3f" /> <circle cx="90" cy="165" r="10" fill="#ae442a" /> <!-- วงใหญ่ --> <circle cx="50" cy="170" r="40" fill="#df6f3f" /> <circle cx="50" cy="175" r="35" fill="#fad97c" /> <!-- ตาซ้าย --> <ellipse cx="30" cy="175" rx="7" ry="8" fill="#e4a15b"/>\ <circle cx="30" cy="179" r="4" /> <circle cx="28" cy="178" r="1.7" fill="white" /> <!-- ตาขวา --> <ellipse cx="70" cy="175" rx="7" ry="8" fill="#e4a15b"/>\ <circle cx="70" cy="179" r="4" /> <circle cx="68" cy="178" r="1.7" fill="white" /> <!-- จมูก --> <ellipse cx="50" cy="188" rx="6" ry="4" fill="#6f2e12" /> <!-- ปาก --> <ellipse cx="50" cy="200" rx="6" ry="4" fill="#de3a43"> <animate attributeName="ry" values="2;3;4.5;2;2" dur="4s" repeatCount="indefinite" /> </ellipse> <!-- คิ้วซ้าย --> <ellipse cx="30" cy="159" rx="4" ry="2" fill="#a42f25"/>\ <!-- คิ้วขวา --> <ellipse cx="70" cy="159" rx="4" ry="2" fill="#a42f25"/>\ </svg> </svg> </svg> </body> </html>