SVG fox (Branch 5313)
✨ นางสาวเกษมณี สถิตวิภารวงศ์
<html> <head> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 40 40"> <polygon points="18 11, 6 21, 6 6" fill="hsl(34, 96%, 70%)"/> <polygon points="11 11, 7 21, 6 6" fill="hsl(12, 67%, 77%)"/> <svg x="20"> <polygon points="14 22, -10 19, 15 6" fill="hsl(34, 96%, 70%)"/> <polygon points="11 12,12 28, 15 6" fill="hsl(12, 67%, 77%)"/></svg> <ellipse cx="20" cy="22" rx="14" ry="12" fill="hsl(34, 96%, 70%)" /> <ellipse cx="20" cy="26" rx="16" ry="7" fill="hsl(34, 96%, 70%)" /> <ellipse cx="20" cy="27" rx="13" ry="6" fill="hsl(34, 96%, 95%)" /> <circle cx="20" cy="21" fill="hsl(34, 96%, 70%)" r="5"></circle> <svg> <ellipse cx="14" cy="17" rx="2.5" ry="1.2" fill="hsl(34, 96%, 95%)" /> <ellipse cx="14" cy="21" fill="black" r="2"> <animate attributeName="rx" values="2;2;2;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="2;2;0.5;2;2" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="14.3" cy="20" fill="white" r="0.7"> <animate attributeName="rx" values="0.7;0.7;0.7;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0.7;0.7;0.05;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="cy" values="20;20;21;20;20" dur="4s" repeatCount="indefinite" /> </ellipse> </svg> <svg x="12"> <ellipse cx="14" cy="17" rx="2.5" ry="1.2" fill="hsl(34, 96%, 95%)" /> <ellipse cx="14" cy="21" fill="black" r="2"> <animate attributeName="rx" values="2;2;2;2;2" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="2;2;0.5;2;2" dur="4s" repeatCount="indefinite" /> </ellipse> <ellipse cx="14.3" cy="20" fill="white" r="0.7"> <animate attributeName="rx" values="0.7;0.7;0.7;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="ry" values="0.7;0.7;0.05;0.7;0.7" dur="4s" repeatCount="indefinite" /> <animate attributeName="cy" values="20;20;21;20;20" dur="4s" repeatCount="indefinite" /> </ellipse> </svg> <svg y="3"> <ellipse cx="20" cy="26" rx="9" ry="5" fill="hsl(34, 96%, 95%)" /> <ellipse cx="20" cy="23" rx="4" ry="2" fill="black" /> <line x1="20" y1="25" x2="20" y2="26" stroke="black" stroke-width="0.8" stroke-linecap="round" /> <ellipse cx="20" cy="28" rx="0.7" ry="0.5" fill="hsl(12, 67%, 77%)" /> </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>