SVG Pig
✨ KOTCHAKORN KAJONCHAI
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 100 100"> <polygon points="18,20 20,35 30,28" fill="hsl(0, 100%, 90%)"></polygon> <polygon points="21,25 27,29 22,32" fill="hsl(0, 98%, 82%)"></polygon> <polygon points="82,20 80,35 70,28" fill="hsl(0, 100%, 90%)"></polygon> <polygon points="79,25 73,29 78,32" fill="hsl(0, 98%, 82%)"></polygon> <ellipse cx="50" cy="50" rx="35" ry="30" fill="hsl(0, 100%, 90%)"></ellipse> <ellipse cx="38" cy="42" rx="1.8" ry="2.5" fill="white"></ellipse> <circle cx="38" cy="43" r="1.5" fill="black"></circle> <ellipse cx="62" cy="42" rx="1.8" ry="2.5" fill="white"></ellipse> <circle cx="62" cy="43" r="1.5" fill="black"></circle> <ellipse cx="50" cy="60" rx="5" ry="1.8" fill="hsl(0, 50%, 58%)"></ellipse> <ellipse cx="50" cy="52" rx="10" ry="7" fill="hsl(0, 98%, 82%)"></ellipse> <ellipse cx="46" cy="52" rx="2" ry="2.7" fill="hsl(0, 50%, 58%)"></ellipse> <ellipse cx="54" cy="52" rx="2" ry="2.7" fill="hsl(0, 50%, 58%)"></ellipse> <ellipse cx="32" cy="50" rx="3" ry="1.8" fill="hsl(0, 97%, 84%)"></ellipse> <line x1="30.5" y1="51" x2="31.5" y2="49" stroke="hsl(0, 52%, 63%)" stroke-width="0.3"></line> <line x1="32.5" y1="51" x2="33.5" y2="49" stroke="hsl(0, 52%, 63%)" stroke-width="0.3"></line> <ellipse cx="68" cy="50" rx="3" ry="1.8" fill="hsl(0, 97%, 84%)"></ellipse> <line x1="66.5" y1="51" x2="67.5" y2="49" stroke="hsl(0, 52%, 63%)" stroke-width="0.3"></line> <line x1="68.5" y1="51" x2="69.5" y2="49" stroke="hsl(0, 52%, 63%)" stroke-width="0.3"></line> <!-- 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>