Kirby
✨ นางสาวชุติมา ณะแก้ว
<html> <head> <title>Let's Start </title> <style> body{ background:#fff; margin:1em; } svg{ background:#fff; } </style> </head> <body> <svg viewBox="0 0 50 50"> <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#f67ca4;stop-opacity:0.8" /> <stop offset="100%" style="stop-color:#f67ca4;stop-opacity:1" /> </radialGradient> </defs> <circle cx="25" cy="20" fill="url(#grad1)" r="15"></circle> <ellipse cx="18" cy="22" rx="5" ry="6" fill="#f581a6" transform="rotate(15)"/> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#dd1252;stop-opacity:1" /> <stop offset="100%" style="stop-color:#860025;stop-opacity:1" /> </linearGradient> </defs> <circle cx="18" cy="30" fill="url(#grad2)" r="5"></circle> <ellipse cx="44" cy="16" rx="5" ry="7" fill="url(#grad2)" transform="rotate(15)"/> <ellipse cx="18" cy="18" rx="2" ry="1" fill="#fe5ba0"/> <ellipse cx="32" cy="18" rx="2" ry="1" fill="#fe5ba0" /> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#000;stop-opacity:1" /> <stop offset="100%" style="stop-color:#1039b9;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="28" cy="12" rx="1.5" ry="3" fill="url(#grad3)" /> <ellipse cx="22" cy="12" rx="1.5" ry="3" fill="url(#grad3)" /> <ellipse cx="28" cy="11" rx=".8" ry="1" fill="#f8fff3" /> <ellipse cx="22" cy="11" rx=".8" ry="1" fill="#f8fff3" /> <defs> <linearGradient id="grad4" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#e9729a;stop-opacity:1" /> <stop offset="100%" style="stop-color:#dd1857;stop-opacity:1" /> </linearGradient> </defs> <circle cx="25" cy="22" r="2" fill="url(#grad4)"> <animate attributeName="r" values="1;1;2;1;1" dur="2.5s" repeatCount="indefinite" /></circle> <ellipse cx="25" cy="2" rx="8" ry="5" style="fill:yellow" /> <ellipse cx="25" cy="1" rx="6" ry="5" style="fill:white" /> <rect width="1" height="15" fill="#422020" x="8" y="6.5" transform="rotate(-4)"></rect> <circle cx="8.8" cy="4" r="2" fill="#FFBF00"/> <!-- <defs> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#3934d7;stop-opacity:0.8" /> <stop offset="100%" style="stop-color:#3934d7;stop-opacity:1" /> </radialGradient> </defs> <ellipse cx="25" cy="20" rx="24" ry="18" fill="url(#grad1)"/> <circle cx="20" cy="20" fill="#fff" r="4"></circle> <circle cx="30" cy="20" fill="#fff" r="4"></circle> <circle cx="19" cy="21.5" fill="#000" r="1.5" > <animateTransform attributeName="transform" begin="0s" dur="2.5s" type="rotate" from="-6" to="0" repeatCount="indefinite" /></circle> <circle cx="30.5" cy="21.5" fill="#000" r="1.5"> <animateTransform attributeName="transform" begin="0s" dur="2.5s" type="rotate" from="-4.5" to="0" repeatCount="indefinite"/></circle> <defs> <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#852031;stop-opacity:1" /> <stop offset="100%" style="stop-color:#c73c5f;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="25" cy="30" rx="14" ry="2" fill="url(#grad2)"> <animate attributeName="ry" values="1;1;2;1;1" dur="2.5s" repeatCount="indefinite" /></ellipse> <defs> <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#d63c60;stop-opacity:1" /> <stop offset="100%" style="stop-color:#fc5277;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="25" cy="39.5" rx="3" ry="10.3" fill="url(#grad3)"> <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" values="0;1;0;1;" repeatCount="indefinite"/></ellipse> --> </svg> </body> </html>