SVG Azurill
✨ Sumet Khetkam
<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"> <ellipse cx="23" cy="30" rx="12" ry="12" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="23" cy="30" rx="9" ry="9" fill="#f39fc3"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="78" cy="30" rx="12" ry="12" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="78" cy="30" rx="9" ry="9" fill="#f39fc3"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="50" cy="50" rx="30" ry="30" fill="#2da5c4"style="stroke:#036c87;stroke-width:0.2"></ellipse> <ellipse cx="38" cy="43" rx="5" ry="8" fill="#0160ad" style="stroke:#24436f;stroke-width:0.2"></ellipse> <ellipse cx="37" cy="40" rx="2" ry="4" fill="#fff"></ellipse> <ellipse cx="30" cy="58" rx="6" ry="6" fill="#fff"></ellipse> <ellipse cx="62" cy="43" rx="5" ry="8" fill="#0160ad" style="stroke:#24436f;stroke-width:0.2"></ellipse> <ellipse cx="61" cy="40" rx="2" ry="4" fill="#fff"></ellipse> <ellipse cx="70" cy="58" rx="6" ry="6" fill="#fff"></ellipse> <ellipse cx="90" cy="70" rx="6" ry="9" fill="#1c829c" style="stroke:#036c87;stroke-width:0.2" transform="rotate(60 50 0) translate(32 -45)"></ellipse> <ellipse cx="30" cy="70" rx="6" ry="9" fill="#1c829c" style="stroke:#036c87;stroke-width:0.2" transform="rotate(-60 50 0) translate(-52 -45)"></ellipse> <ellipse cx="50" cy="58" rx="6" ry="6" fill="#d73c3c"> <animate attributeName="rx" values="6;5;6;" dur="1s" repeatCount="indefinite" /> <animate attributeName="ry" values="3;6;3;" dur="2s" repeatCount="indefinite" /> </ellipse> <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> <!-- 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>