svg_final
✨ นายจิรพัฒน์ วุ่นพ้วน
<html> <head> <title>Let's Start</title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 100 100"> <rect fill="#ff696c" width="1000" height="1000" x="0" y="0" style="opacity:1"/> <!-- moon --> <circle r="10" fill="#f0a959" cx="20" cy="10" style="opacity:.7"/> <circle r="9.5" fill="#ffdb63" cx="19.5" cy="10" style="opacity:.7"/> <ellipse cx="14" cy="9" rx="0.7" ry="2" fill="#f5c75d"/> <circle r="1.5" fill="#f5c75d" cx="17" cy="5"style="opacity:.7"/> <circle r="1" fill="#f0a959" cx="17" cy="5"style="opacity:.7"/> <circle r="1" fill="#f5c75d" cx="15" cy="15"style="opacity:.7"/> <circle r=".5" fill="#f0a959" cx="15" cy="15"style="opacity:.7"/> <circle r="7" fill="#ff696c" cx="23.5" cy="10"/> <!-- sun --> <circle r="20" fill="#ffdb63" cx="30" cy="50"/> <!-- <circle r="3" fill="#F4A460" cx="25" cy="45"/> <circle r="3" fill="#F4A460" cx="40" cy="45"/> --> <path stroke="#F4A460" d="M20 45 l6 0" stroke-linecap="round"/> <path stroke="#F4A460" d="M37 45 l6 0" stroke-linecap="round"/> <path stroke-width="2" fill="#cce1f0"stroke-linecap="round"> <animate attributeName="d" values=" M35,50 c-0,-50 50,-1 0,4; M35,55 c-5,-20 30,-1 0,4; M35,54 c-5,-20 30,-1 0,4; M35,50 c-0,-50 50,-1 0,4;" dur="2s" repeatCount="indefinite" /> </path> <!--cloud --> <!-- <path fill="#f4f3ee" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M120,2 q10,0 10,10 q10,0 10,10 h-40 q0,-5 5,-5 q0,-5 5,-5q0,-5 5,-5q0,-5 5,-5; M-20,2 q10,0 10,10 q10,0 10,10 h-40 q0,-5 5,-5 q0,-5 5,-5q0,-5 5,-5q0,-5 5,-5; " dur="22s" repeatCount="indefinite" /> </path> --> <!-- ภูเขา --> <path fill="#6B8E23" stroke="#0000" stroke-width="1" stroke-linecap="round"style="opacity:.8"> <animate attributeName="d" values=" m20,100 q20,-50 60,0; m20,100 q30,-60 60,0; m20,100 q30,-40 60,0; m20,100 q20,-50 60,0; " dur="4s" repeatCount="indefinite" /> </path> <path fill="#6B8E23" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" m-10,100 q30,-60 60,0; m-10,100 q20,-60 60,0; m-10,100 q30,-60 60,0; " dur="2s" repeatCount="indefinite" /> </path> <path fill="#556B2F" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" m40,100 q30,-80 80,0; m40,100 q40,-80 80,0; m40,100 q30,-80 80,0; " dur="2s" repeatCount="indefinite" /> </path> <path fill="#808000" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" m20,100 q50,-30 60,0; m20,100 q20,-20 60,0; m20,100 q10,-30 60,0; m20,100 q20,-20 60,0; m20,100 q50,-30 60,0; " dur="4s" repeatCount="indefinite" /> </path> <!-- <path fill="#f4f3ee" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M 25,60 a 5,5 1 0,0 0,10 h 50 a 20,20 1 0,0 0,-10 a 10,10 1 0,0 -15,-10 a 15,15 1 0,0 -35,10 z; " dur="4s" repeatCount="indefinite" /> </path> --> </svg> </body> </html>