SVG Rabbit
✨ CHANAPON CHUENCHUWIT
<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"> <rect x=0 y=0 width=5.8 height=5.7 fill=#c4141c> <animate attributeName="height" values="5.8;40" dur="7s" repeatCount="indefinite"/> </rect> <rect x=5.8 y=0 width=5.7 height=11.4 fill=#da852a> <animate attributeName="height" values="11.4;34.2" dur="7s" repeatCount="indefinite"/> </rect> <rect x=11.5 y=0 width=5.7 height=17.1 fill=#f6e93b> <animate attributeName="height" values="17.1;28.5" dur="7s" repeatCount="indefinite"/> </rect> <rect x=17.2 y=0 width=5.7 height=22.8 fill=#4d813f></rect> <rect x=22.9 y=0 width=5.8 height=28.5 fill=#0b6db4> <animate attributeName="height" values="28.5;17.1" dur="7s" repeatCount="indefinite"/> </rect> <rect x=28.6 y=0 width=5.8 height=34.2 fill=#2b2c79> <animate attributeName="height" values="34.2;11.4" dur="7s" repeatCount="indefinite"/> </rect> <rect x=34.3 y=0 width=5.7 height=40 fill=#66257f> <animate attributeName="height" values="40;0" dur="7s" repeatCount="indefinite"/> </rect> <!-- หูขวา --> <ellipse cx="25" cy="11" rx="3" ry="6" fill="hsl(30,100%,0%)" /> <ellipse cx="25" cy="12" rx="3" ry="6.5" fill="hsl(30,100%,100%)" /> <ellipse cx="25" cy="12" rx="1" ry="4" fill=#f5d5d0 /> <!-- หูซ้าย --> <ellipse cx="15" cy="11" rx="3" ry="6" fill="hsl(30,100%,0%)" /> <ellipse cx="15" cy="12" rx="3" ry="6.5" fill="hsl(30,100%,100%)" /> <ellipse cx="15" cy="12" rx="1" ry="4" fill=#f5d5d0 /> <!-- หน้า --> <ellipse cx="20" cy="20" rx="8" ry="6.5" fill="hsl(30,100%, 0%)" /> <ellipse cx="20" cy="20" rx="7.8" ry="6.5" fill="hsl(30,100%, 100%)" /> <!-- ตาขวา --> <ellipse cx="23" cy="19" rx="1.5" ry="1.5" fill=#413023 /> <ellipse cx="23" cy="19.3" rx="1.5" ry="1.5" fill="hsl(30,100%, 100%)" /> <!-- หูซ้าย --> <ellipse cx="17" cy="19" rx="1.5" ry="1.5" fill=#413023 /> <ellipse cx="17" cy="19.3" rx="1.5" ry="1.5" fill="hsl(30,100%, 100%)" /> <!-- แก้ม --> <ellipse cx="25" cy="22" rx="1" ry="0.8" fill=#f5d5d0 /> <ellipse cx="15" cy="22" rx="1" ry="0.8" fill=#f5d5d0 /> <!-- ปาก --> <ellipse cx="20" cy="23.7" rx="1.4" ry="1.7" fill=#413023> <animate attributeName="rx" values="1.4;1.6;1.8;2;" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.7;1.9;2.1;2.3" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20" cy="23.7" rx="1.2" ry="1.6" fill=#f38bba> <animate attributeName="rx" values="1.2;1.4;1.6;1.8;" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.6;1.8;2;2.2" dur="3s" repeatCount="indefinite" /> </ellipse> <ellipse cx="20.75" cy="22" rx="1" ry="1" fill=#413023 /> <ellipse cx="19.25" cy="22" rx="1" ry="1" fill=#413023 /> <ellipse cx="20.75" cy="21.7" rx="1" ry="1" fill="hsl(30,100%, 100%)" /> <ellipse cx="19.25" cy="21.7" rx="1" ry="1" fill="hsl(30,100%, 100%)" /> </svg> </body> </html>