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"/>

        <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"/>

     <circle r="20" fill="#ffdb63" cx="30" cy="50"/>

     <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>



<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>

</svg>
</body>
</html>