donald duck
✨ นางสาวณัชชา ธีระแนว
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:wheat; } </style> </head> <body> <svg viewBox="0 0 40 40"> <radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(270,60%,100%);" /> <stop offset="100%" style="stop-color:hsl(0, 0%, 70%);" /> </radialGradient> <radialGradient id="shadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(270,60%,100%);" /> <stop offset="100%" style="stop-color:hsl(0, 0%, 70%);" /> </radialGradient> <radialGradient id="shadow2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="60%" style="stop-color:hsl(221, 78%, 49%);" /> <stop offset="100%" style="stop-color:hsl(221, 78%, 36%);" /> </radialGradient> <radialGradient id="shadow3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="20%" style="stop-color:hsl(357, 100%, 53%)" /> <stop offset="100%" style="stop-color:hsl(357, 100%, 32%)" /> </radialGradient> <radialGradient id="shadow4" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:hsl(48, 100%, 50%)" /> <stop offset="100%" style="stop-color:hsl(45, 100%, 42%)" /> </radialGradient> <ellipse cx="20" cy="20" rx="14" ry="12" fill="url(#shadow)" /> <svg y="3"> <ellipse cx="20" cy="9" rx="7" ry="1" fill="black" /> <rect width="14" height="2" x="13" y="7"/> <ellipse cx="20" cy="6" rx="8" ry="2.5" fill="url(#shadow2)" /> </svg> <svg width="4" height="11"> </svg> <svg x="10"> <ellipse cx="15" cy="20" rx="2" ry="2" fill="hsl(20,70%,0%)"> <animate attributeName="ry" values="2;1;0;1;2" dur="2.5s" repeatCount="indefinite" /> </ellipse> <circle cx="14" cy="19" fill="white" r="0.5"></circle> <ellipse cx="5" cy="20" rx="2" ry="2" fill="hsl(20,70%,0%)"> <animate attributeName="ry" values="2;1;0;1;2" dur="2.5s" repeatCount="indefinite" /> </ellipse> <circle cx="4" cy="19" fill="white" r="0.5"></circle> </svg> <svg y="3"> <ellipse cx="12" cy="19" rx="1.5" ry="1" fill="pink" /> <ellipse cx="28" cy="19" rx="1.5" ry="1" fill="pink" /> <ellipse cx="20" cy="20" rx="4" ry="1.5" fill="url(#shadow4)" /> <ellipse cx="17" cy="29" rx="3" ry="2" fill="url(#shadow3)" /> <ellipse cx="23" cy="29" rx="3" ry="2" fill="url(#shadow3)" /> <ellipse cx="20" cy="29" rx="1" ry="1" fill="url(#shadow4)" /> <line x1="16" y1="20" x2="24" y2="20" style="stroke:rgb(255, 131, 36) ;stroke-width:0.1" /> </svg> <!-- 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>