SVG C Thx
✨ นายณัฐภัทร วัฒนพิทักษ์พงศ์
<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 600"> <ellipse cx="70" cy="17" rx="12.5" ry="12.5" fill="black" /> <ellipse cx="70" cy="17" rx="12" ry="12" fill="hsl(349, 80%, 80%)" /> <ellipse cx="25" cy="17" rx="12.5" ry="12.5" fill="black" /> <ellipse cx="25" cy="17" rx="12" ry="12" fill="hsl(349, 80%, 80%)" /> <ellipse cx="25" cy="17" rx="10" ry="10" fill="hsl(347, 55%, 54%)" /> <ellipse cx="70" cy="17" rx="10" ry="10" fill="hsl(347, 55%, 54%)" /> <ellipse cx="75" cy="82" rx="17.5" ry="10.5 " fill="black" /> <ellipse cx="75" cy="82" rx="17" ry="10 " fill="hsl(332, 84%, 42%)" /> <!--เท้าหลัง--> <ellipse cx="85" cy="40" rx="15.5" ry="10.5" fill="black" /> <ellipse cx="15" cy="50" rx="15.5" ry="10.5" fill="black" /> <circle cx="50" cy="50" fill="black" r="40.5"></circle><!--ตัว--> <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.5" ry="11.5" fill="black" /> <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%)" /> <!--นก--> <svg viewBox="0 150 100 100"> <ellipse cx="50" cy="46" rx="35" ry="36" fill="#2496fb"></ellipse> <polygon points="50,33 56,40 75,32 60,60 40,60 25,32 44,40" fill="#6ad7fe" /> <ellipse cx="72" cy="50" rx="13" ry="18" fill="#ffffff" class="cheek-right"></ellipse> <ellipse cx="28" cy="50" rx="13" ry="18" fill="#ffffff" class="cheek-left"></ellipse> <path d="M15,50 a1,1 0 0,0 70,0" fill="#ffffff"></path> <ellipse cx="50" cy="55" rx="10" ry="12" fill="#e49617"></ellipse> <path d="M40.2,57 a2,1 0 0,0 19.6,0" fill="#3C2601"></path> <ellipse cx="27" cy="52" rx="5" ry="9" fill="#040125" class="cheek-left"></ellipse> <circle cx="25" cy="51" r="2" fill="#ffffff"> <animate attributeName="r" values="1.8;2;1.8" dur="250ms" repeatCount="indefinite" /> </circle> <circle cx="27" cy="48" r="1" fill="#ffffff"> <animate attributeName="r" values="0.8;1;0.8" dur="200ms" repeatCount="indefinite" /> </circle> <ellipse cx="73" cy="52" rx="5" ry="9" fill="#040125" class="cheek-right"></ellipse> <circle cx="75" cy="51" r="2" fill="#ffffff"> <animate attributeName="r" values="1.8;2;1.8" dur="250ms" repeatCount="indefinite" /> </circle> <circle cx="73" cy="48" r="1" fill="#ffffff"> <animate attributeName="r" values="0.8;1;0.8" dur="200ms" repeatCount="indefinite" /> </circle> </svg> <svg viewBox="0 90 150 150"> <ellipse cx="120" cy="60" rx="20" ry="20" stroke="#6e2308" stroke-width="2" fill=#fa982f /> <ellipse cx="30" cy="60" rx="20" ry="20" stroke="#6e2308" stroke-width="2" fill=#fa982f /> <ellipse cx="30" cy="60" rx="15" ry="10" fill=#6e2308 /> <ellipse cx="120" cy="60" rx="15" ry="10" fill=#6e2308 /> <ellipse cx="75" cy="60" rx="50" ry="40" stroke="#6e2308" stroke-width="3" fill=#fa982f /> <ellipse cx="75" cy=81 rx="40" ry="18" fill=#ffd587 /> <ellipse cx="95" cy=60 rx="20" ry="20" fill=#ffd587 /> <ellipse cx="58" cy=60 rx="20" ry="20" fill=#ffd587 /> <circle cx="55" cy="60" r="5" fill="#6e2308" /> <circle cx="95" cy="60" r="5" fill="#6e2308" /> <ellipse cx="100" cy=70 rx="5" ry="2" fill=pink /> <ellipse cx="50" cy=70 rx="5" ry="2" fill=pink /> <ellipse cx="75" cy=65 rx="4" ry="3" fill=#6e2308 /> <ellipse cx="75" cy=80 rx="10" ry="3" fill=#6e2308 /> <ellipse cx="75" cy=77 rx="10" ry="3" fill=#ffd587 /> </svg> <svg viewBox="0 -35 150 150"> <ellipse cx="110" cy="25" rx="20" ry="20" stroke="#6e2308" stroke-width="1.5" fill=#ffffff /> <ellipse cx="45" cy="25" rx="20" ry="20" stroke="#6e2308" stroke-width="1.5" fill=#ffffff /> <ellipse cx="45" cy="25" rx="10" ry="10" fill=pink /> <ellipse cx="110" cy="26.5" rx="10" ry="10" fill=pink /> <ellipse cx="75" cy="60" rx="50" ry="40" stroke="#6e2308" stroke-width="2" fill=#ffffff /> <ellipse cx="95" cy="50" rx="10" ry="10" fill=black /> <circle cx="55" cy="50" r="4" fill="red" /> <circle cx="95" cy="50" r="4" fill="red" /> <ellipse cx="107" cy=70 rx="5" ry="5" stroke="#000000" stroke-width="0" fill=pink /> <ellipse cx="43" cy=70 rx="5" ry="5" stroke="#000000" stroke-width="0" fill=pink /> <ellipse cx="75" cy=65 rx="5" ry="4" fill=#6e2308 /> <ellipse cx="75" cy=80 rx="10" ry="3" fill=#6e2308 /> <ellipse cx="75" cy=77 rx="10" ry="3" fill=#ffffff /> </svg> <svg viewBox="0 -40 40 40"> <!--หู, หน้า--> <circle cx="10" cy="12" fill="hsl(0,0%,0%)" r="8"></circle> <svg x="20"> <circle cx="10" cy="12" fill="hsl(0,0%,0%)" r="8"></circle></svg> <ellipse cx="20" cy="22" fill="white" stroke="hsl(0,0%,0%)" stroke-width="1 px" rx="14" ry="12" /> <!--ตา 2 ข้าง--> <svg> <ellipse cx="15" cy="20" rx="4" ry="4" fill="hsl(0,0%,0%)" /> <circle cx="16" cy="19" fill="white" r="2"></circle> <circle cx="15" cy="22" fill="white" r="1"></circle> </svg> <svg x="10"> <ellipse cx="15" cy="20" rx="4" ry="4" fill="hsl(0,0%,0%)" /> <circle cx="16" cy="19" fill="white" r="2"></circle> <circle cx="15" cy="22" fill="white" r="1"></circle> </svg> <!--จมูก, ปาก--> <svg y="3"> <ellipse cx="20" cy="24" rx="3" ry="2" fill="hsl(0,0%,0%)" /> <!--<line x1="20" y1="27" x2="20" y2="22" stroke="black" stroke-width="1" stroke-linecap="butt" />--> </svg> <ellipse cx="20" cy="31" fill="hsl(10,70%,40%)" rx="2" ry="2"> <animate attributeName="rx" values="2;2;3;2;2" dur="3s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;2;1;1" dur="5s" repeatCount="indefinite" /> </ellipse> </svg> <svg viewBox="0 -185 100 100"> <ellipse cx="23" cy="30" rx="12" ry="12" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="23" cy="30" rx="9" ry="9" fill="#f39fc3"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="78" cy="30" rx="12" ry="12" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="78" cy="30" rx="9" ry="9" fill="#f39fc3"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="50" cy="50" rx="30" ry="30" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="38" cy="43" rx="5" ry="8" fill="#0160ad" style="stroke:#24436f;stroke-width:0.2"></ellipse> <ellipse cx="37" cy="40" rx="2" ry="4" fill="#fff"></ellipse> <ellipse cx="30" cy="58" rx="6" ry="6" fill="#fff"></ellipse> <ellipse cx="62" cy="43" rx="5" ry="8" fill="#0160ad" style="stroke:#24436f;stroke-width:0.2"></ellipse> <ellipse cx="61" cy="40" rx="2" ry="4" fill="#fff"></ellipse> <ellipse cx="70" cy="58" rx="6" ry="6" fill="#fff"></ellipse> <ellipse cx="90" cy="70" rx="6" ry="9" fill="#1c829c" style="stroke:#036c87;stroke-width:0.2" transform="rotate(60 50 0) translate(32 -45)"></ellipse> <ellipse cx="30" cy="70" rx="6" ry="9" fill="#1c829c" style="stroke:#036c87;stroke-width:0.2" transform="rotate(-60 50 0) translate(-52 -45)"></ellipse> <ellipse cx="50" cy="58" rx="6" ry="6" fill="#d73c3c"> <animate attributeName="rx" values="6;5;6;" dur="1s" repeatCount="indefinite" /> <animate attributeName="ry" values="3;6;3;" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg viewBox="0 -105 40 40"> <circle cx="10" cy="14" fill="hsl(0,0%,100%)" r="6"></circle> <circle cx="10" cy="14" fill="hsl(312,100%,79%)" r="4"></circle> <svg x="20"> <circle cx="10" cy="14" fill="hsl(0,0%,100%)" r="6"></circle> <circle cx="10" cy="14" fill="hsl(312,100%,79%)" r="4"></circle></svg> <ellipse cx="20" cy="22" rx="14" ry="12" fill="hsl(0,0%,100%)" /> <svg> <ellipse cx="15" cy="21" rx="2" ry="3" fill="hsl(30,70%,10%)" /> <circle cx="15" cy="19.5" fill="white" r=".7"><animate attributeName="r" values=".25;1;.25" dur="2.5s" repeatCount="indefinite" /></circle> <ellipse cx="17" cy="25.5" rx="1.5" ry="0.4" fill="hsl(30,70%,10%)" /> <ellipse cx="17" cy="24.5" rx="1.5" ry="0.4" fill="hsl(30,70%,10%)" /> <ellipse cx="17" cy="24.5" rx="1.5" ry="0.4" fill="hsl(30,70%,10%)" /> <ellipse cx="23" cy="25.5" rx="1.5" ry="0.4" fill="hsl(30,70%,10%)" /> <ellipse cx="23" cy="24.5" rx="1.5" ry="0.4" fill="hsl(30,70%,10%)" /> <svg x="10"> <ellipse cx="15" cy="21" rx="2" ry="3" fill="hsl(30,70%,10%)" /> <circle cx="15" cy="19.5" fill="white" r=".75"><animate attributeName="r" values=".25;1;.25" dur="2.5s" repeatCount="indefinite" /></circle> </svg> <svg y="3"> <ellipse cx="12" cy="23" rx="1.5" ry="1.2" fill="hsla(340, 80%, 80%, 70%)" /> <ellipse cx="27.5" cy="23" rx="1.5" ry="1.2" fill="hsla(340, 80%, 80%, 70%)" /> <ellipse cx="20" cy="22" rx="1.5" ry="1.2" fill="#660000" /> <ellipse cx="20" cy="27" fill="#990000" rx="2" ry="2"> <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> <!-- Grid --> <def> <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>