E-P’SSPIM (Copy 6799)
✨ Jabont
<html> <head> <title>Let's Start </title> <style> body{ background:#f1f6ff; margin:1rem; text-align:center; font-family:sans-serif; } svg{ background:#80DEEA; box-shadow:0 0 20px #0002; width:80%; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- หญ้า --> <path fill="#8BC34A" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M-10,60 h120 v50 h-120 "/> <!-- จุดกลาง --> <path d= "M50,60 v22" fill="#50C878" stroke="#50C878" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M20,80 h30 v-15 h15" fill="#50C878" stroke="#50C878" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <circle r="10" fill="#CE93D8" cx="47" cy="50" /> <circle r="10" fill="#CE93D8" cx="50" cy="47" /> <circle r="10" fill="#CE93D8" cx="53" cy="50" /> <circle r="10" fill="#CE93D8" cx="50" cy="53" /> <circle r="8.3" fill="#BA68C8" cx="47" cy="50" /> <circle r="8.3" fill="#BA68C8" cx="50" cy="47" /> <circle r="8.3" fill="#BA68C8" cx="53" cy="50" /> <circle r="8.3" fill="#BA68C8" cx="50" cy="53" /> <circle r="6.3" fill="#AB47BC" cx="47" cy="50" /> <circle r="6.3" fill="#AB47BC" cx="50" cy="47" /> <circle r="6.3" fill="#AB47BC" cx="53" cy="50" /> <circle r="6.3" fill="#AB47BC" cx="50" cy="53" /> <circle r="3.3" fill="#9C27B0" cx="47" cy="50" /> <circle r="3.3" fill="#9C27B0" cx="50" cy="47" /> <circle r="3.3" fill="#9C27B0" cx="53" cy="50" /> <circle r="3.3" fill="#9C27B0" cx="50" cy="53" /> <circle r="1" fill="#7B1FA2" cx="50" cy="50" /> <!-- พระอาทิตย์ --> <circle stroke="white" stroke-width="2" r="15" fill="#fc0" cx="20" cy="20"> </circle> </g> </svg> <br> <br> <svg viewBox="0 0 100 100"> <defs> <pattern id="grass" viewBox="0 0 10 10" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10" > <rect width="100" height="100" fill="#b1fbfc"/> <circle r="1.3" fill="#ffef78" cx="8" cy="2"> <animate attributeName="cx" values=" 6; 8; 8; 8; 6" dur="1s" repeatCount="indefinite" /> <animate attributeName="cy" values=" 3; 2; 2; 2; 3" dur="1s" repeatCount="indefinite" /> </circle> <circle r="1.3" fill="white" cx="4" cy="4" /> <circle r="1.8" fill="white" cx="6" cy="3" /> <circle r="1.3" fill="white" cx="8" cy="4" /> <circle r="1.3" fill="white" cx="6" cy="4" /> <path d="m4,6 l 1,1" fill="black" stroke="#00BCD4" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"> <animate attributeName="d" values=" m4,6 l 1,1; m4,6 l 0,0; m4,6 l 1,1;" dur="1s" repeatCount="indefinite" /> </path> <path d="m6,6 l 1,1" fill="black" stroke="#00BCD4" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"> <animate attributeName="d" values=" m6,6 l 1.5,1.5; m6,6 l 0,0; m6,6 l 1.5,1.5;" dur="1s" repeatCount="indefinite" /> </path> <path d="m8,6 l 1,1" fill="black" stroke="#00BCD4" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"> <animate attributeName="d" values=" m8,6 l 1,1; m8,6 l 0,0; m8,6 l 1,1;" dur="1s" repeatCount="indefinite" /> </path> <path d="M2 5 l0.5,-0.5 l0.5,0.5 l-0.5,0.5 l-0.5,-0.5 " stroke-width="0.2" stroke="#f1f736" stroke-linecap="round" stroke-linejoin="round" fill="#f1f736" /> <path d="M8 6 l0.5,-0.5 l0.5,0.5 l-0.5,0.5 l-0.5,-0.5 " stroke-width="0.2" stroke="#f1f736" stroke-linecap="round" stroke-linejoin="round" fill="#f1f736" /> </pattern> <pattern id="sabai" viewBox="0,0,10,10" width="10%" height="10%"> <rect width="10" height="10" fill="#04b807"> </rect> <circle r="1.3" fill="white" cx="4" cy="4" /> <circle r="1.3" fill="white" cx="4" cy="6" /> <circle r="1.3" fill="white" cx="3" cy="5" /> <circle r="1.3" fill="white" cx="5" cy="5" /> <circle r=".9" fill="#04b807" cx="4" cy="5" /> <path d="M.3 1 l1,-1 l1,1 l-1,1 l-1,-1 " stroke-width="0.2" stroke="#f1f736" stroke-linecap="round" stroke-linejoin="round" fill="#f1f736" /> <path d="M7.3 5 l1,-1 l1,1 l-1,1 l-1,-1 " stroke-width="0.2" stroke="#f1f736" stroke-linecap="round" stroke-linejoin="round" fill="#f1f736" /> <path d="M5.5,10 l2,-2 l2,2 l-2,2 l-2,-2 " stroke-width="0.2" stroke="#0cf510" stroke-linecap="round" stroke-linejoin="round" fill="#0cf510" /> <path d="M5.5,0 l2,-2 l2,2 l-2,2 l-2,-2 " stroke-width="0.2" stroke="#0cf510" stroke-linecap="round" stroke-linejoin="round" fill="#0cf510" /> </pattern> </defs> <rect fill="url(#sabai)" width="100" height="100"/> <path fill="url(#sea)" d="M0,0 h100 L0,100 "/> <rect fill="url(#grass)" width="100" height="40" y="60"/> </svg> </body> </html>