SVG Piplup (63070132)
✨ นายภาณุพงศ์ แก้วคำ
<html> <head> <title>Let's Start </title> <style> body{ background-image: url("https://lh3.googleusercontent.com/Bz9708ZAzDnCTokSd0Klsw8ZgGbUu6WsTyQnCaELSolP-MOBaKYTXvdFSr9lmCqmjb53XGclD7RZI0DksDLw=s400"); font-family:sans-serif; margin:1.5em; } svg{ background: linear-gradient(to top left, #0099cc 0%, #66ffff 60%); border-radius: 2%; } .cheek-left { transform: skewX(6deg); transform-origin: center; } .cheek-right { transform: skewX(-6deg); transform-origin: center; } </style> </head> <body> <svg viewBox="0 0 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> <!-- Grid --> <defs> <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"/> --> </svg> </body> </html>