SVG 1 การบ้าน 64070185 ปัทมาภรณ์

✨ P A T T H A M A P O R N

<html>
  <head>
    <title>SVG
    </title>
    <style>
      body{
        background:#fff;
        margin:0em;
        margin-top:2em;
        font-family:sans-serif;
      }
      svg{
        background-image: linear-gradient(180deg, 
          rgba(29, 196, 228, 1) 0%, 
          rgba(23, 180, 221, 1) 18%, 
          rgba(17, 168, 213, 1) 33%, 
          rgba(14, 136, 180, 1) 49%, 
          rgba(9, 79, 130, 1) 88%);
        width:90vmin;
        height:90vmin;
        display:block;
        margin:auto;
        box-shadow:0px 0px 10px #0006;
      }
      #vl{
			animation: f1 10s linear infinite ;
      }
      @keyframes f1{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #vv{
			animation: f2 5s linear infinite ;
      }
      @keyframes f2{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #ll{
			animation: f3 8s linear infinite ;
      }
      @keyframes f3{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #ww{
			animation: f4 8s linear infinite ;
      }
      @keyframes f4{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #wow{
			animation: f4 15s linear infinite ;
      }
      @keyframes f4{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #www{
			animation: f4 10s linear infinite ;
      }
      @keyframes f4{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #lol{
			animation: f5 13s linear infinite ;
      }
      @keyframes f5{
        0%{
			transform:translatex(100px) translatey(0px) ;
        }
        100%{
			transform:translatex(-100px) translatey(0px) ;
        }
      }
      #kk{
			animation: f6 10s linear infinite ;
      }
      @keyframes f6{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #ko{
			animation: f7 15s linear infinite ;
      }
      @keyframes f7{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #kl{
			animation: f8 18s linear infinite ;
      }
      @keyframes f8{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #km{
			animation: f9 13s linear infinite ;
      }
      @keyframes f9{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #ki{
			animation: f10 5s linear infinite ;
      }
      @keyframes f10{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #kii{
			animation: f10 18s linear infinite ;
      }
      @keyframes f10{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #kj{
			animation: f11 20s linear infinite ;
      }
      @keyframes f11{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      #jj{
			animation: f11 5s linear infinite ;
      }
      @keyframes f11{
        0%{
          transform:translatex(-100px) translatey(0px);
        }
        100%{
          transform:translatex(100px) translatey(0px);
        }
      }
      
    </style>
  </head>
  <body>
    <svg viewBox="0 0 100 100">
      
      //เงา
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961895387143225414/1.png" height="30" x="60" y="60" opacity="0.7"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961896171587117077/2.png" height="30" x="9" y="55" opacity="0.7"> </image>
      
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961896724312494090/3.png" height="8" x="69" y="5" opacity="0.1" id="www"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961896724312494090/3.png" height="8" x="59" y="55" opacity="0.7" id="lol"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961898071334191104/4988070f2a5e9171.png" height="8" x="9" y="25" opacity="0.1" id="kk"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961898071334191104/4988070f2a5e9171.png" height="8" x="39" y="65" id="ko"> </image>
      <image href=" https://cdn.discordapp.com/attachments/897515768818827304/961899095365144676/4.png" height="8" x="59" y="70" id="kl"> </image>
      <image href=" https://cdn.discordapp.com/attachments/897515768818827304/961899095365144676/4.png" height="8" x="85" y="58" id="km"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900662571036682/5.png" height="55" x="-5" y="20" opacity="0.1" id="ww"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900662571036682/5.png" height="55" x="-5" y="-2" opacity="0.1" id="wow"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900676399656980/6.png" height="55" x="45" y="12" opacity="0.1" id="ki"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900676399656980/6.png" height="55" x="45" y="5" opacity="0.09" id="kii"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900676399656980/6.png" height="20" x="25" y="58" opacity="0.7" id="kj"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900676399656980/6.png" height="20" x="25" y="58" opacity="0.7" id="jj"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900662571036682/5.png" height="20" x="60" y="62" opacity="0.7" id="ll"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900662571036682/5.png" height="20" x="48" y="62" opacity="0.7" id="vv"> </image>
      <image href="https://cdn.discordapp.com/attachments/897515768818827304/961900662571036682/5.png" height="20" x="80" y="62" opacity="0.7" id="vl"> </image>
      
      
		//ทราย
      <rect width="100" height="15" x="" y="85"fill="#f8cf68" />
      <ellipse cx="4" cy="98" rx="15" ry="40" fill="#f8cf68" />
      <ellipse cx="45" cy="97" rx="32" ry="20" fill="#f8cf68" />
      <ellipse cx="98" cy="104" rx="22" ry="35" fill="#f8cf68" />
      <ellipse cx="-3" cy="109" rx="15" ry="40" fill="#f5c13d" />
      <ellipse cx="45" cy="108" rx="40" ry="20" fill="#f5c13d" />
      <ellipse cx="15" cy="116" rx="32" ry="20" fill="#f5c13d" />
      <circle cx="52" cy="89" r=".8" fill="#c39f36"/>
      <circle cx="5" cy="93" r=".8" fill="#c39f36"/>
      <circle cx="15" cy="97" r=".8" fill="#c39f36"/>
      <circle cx="25" cy="87" r=".8" fill="#c39f36"/>
      <circle cx="35" cy="95" r=".8" fill="#c39f36"/>
      <circle cx="45" cy="79" r=".8" fill="#c39f36"/>
      <circle cx="8" cy="79" r=".8" fill="#c39f36"/>
      <circle cx="3" cy="65" r=".8" fill="#c39f36"/>
      <circle cx="86" cy="81" r=".8" fill="#c39f36"/>
      <circle cx="96" cy="72" r=".8" fill="#c39f36"/>
      <circle cx="98" cy="82" r=".8" fill="#c39f36"/>
      <circle cx="66" cy="96" r=".8" fill="#c39f36"/>
      <circle cx="78" cy="92" r=".8" fill="#c39f36"/>
      <circle cx="96" cy="98" r=".8" fill="#c39f36"/>
      <circle cx="75" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="85" cy="98" r=".5" fill="#c39f36"/>
      <circle cx="7" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="25" cy="93" r=".5" fill="#c39f36"/>
      <circle cx="13" cy="94" r=".5" fill="#c39f36"/>
      <circle cx="15" cy="84" r=".5" fill="#c39f36"/>
      <circle cx="" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="5" cy="60" r=".5" fill="#c39f36"/>
      <circle cx="7" cy="98" r=".5" fill="#c39f36"/>
      <circle cx="7" cy="70" r=".5" fill="#c39f36"/>
      <circle cx="3" cy="75" r=".5" fill="#c39f36"/>
      <circle cx="5" cy="83" r=".5" fill="#c39f36"/>
      <circle cx="13" cy="76" r=".5" fill="#c39f36"/>
      <circle cx="95" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="35" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="45" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="47" cy="98" r=".5" fill="#c39f36"/>
      <circle cx="37" cy="100" r=".5" fill="#c39f36"/>
      <circle cx="27" cy="100" r=".5" fill="#c39f36"/>
      <circle cx="31" cy="82" r=".5" fill="#c39f36"/>
      <circle cx="41" cy="94" r=".5" fill="#c39f36"/>
      <circle cx="18" cy="91" r=".5" fill="#c39f36"/>
      <circle cx="40" cy="83" r=".5" fill="#c39f36"/>
      <circle cx="48" cy="78" r=".5" fill="#c39f36"/>
      <circle cx="52" cy="82" r=".5" fill="#c39f36"/>
      <circle cx="56" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="59" cy="95" r=".5" fill="#c39f36"/>
      <circle cx="59" cy="95" r=".8" fill="#c39f36"/>
      <circle cx="63" cy="88" r=".5" fill="#c39f36"/>
      <circle cx="63" cy="83" r=".8" fill="#c39f36"/>
      <circle cx="70" cy="92" r=".5" fill="#c39f36"/>
      <circle cx="75" cy="98" r=".5" fill="#c39f36"/>
      <circle cx="82" cy="87" r=".5" fill="#c39f36"/>
      <circle cx="85" cy="92" r=".5" fill="#c39f36"/>
      <circle cx="91" cy="95" r=".5" fill="#c39f36"/>
      <circle cx="98" cy="93" r=".8" fill="#c39f36"/>
      <circle cx="95" cy="78" r=".5" fill="#c39f36"/>
      <circle cx="90" cy="85" r=".5" fill="#c39f36"/>
      
      //หิน
      <ellipse cx="18" cy="93.5" rx="5" ry="2" fill="#dba61f" />
      <ellipse cx="88" cy="95.5" rx="7" ry="3" fill="#dba61f" />
      <ellipse cx="18" cy="92" rx="4" ry="2" fill="#fd77c0" stroke="#b13784" stroke-width=".2" />
      <circle cx="15" cy="92" r=".5" fill="#b13784"/>
      <circle cx="17" cy="90.8" r=".5" fill="#b13784"/>
      <circle cx="18" cy="92" r=".5" fill="#b13784"/>
      <circle cx="20" cy="91" r=".5" fill="#b13784"/>
      <circle cx="21" cy="92" r=".5" fill="#b13784"/>
      <ellipse cx="88" cy="94" rx="6" ry="3" fill="#fd77c0" stroke="#b13784" stroke-width=".2" />
      <circle cx="91" cy="93." r=".5" fill="#b13784"/>
      <circle cx="89" cy="91.9" r=".5" fill="#b13784"/>
      <circle cx="84" cy="93" r=".5" fill="#b13784"/>
      <circle cx="86" cy="92" r=".5" fill="#b13784"/>
      <circle cx="93" cy="93" r=".5" fill="#b13784"/>
      <circle cx="87.5" cy="93.5" r=".5" fill="#b13784"/>
      
      //ปะกาลังหรือเปล่าวะ
      <ellipse cx="57" cy="86" rx="5" ry="2" fill="#dba61f" />
      <circle cx="57" cy="85" r="2" fill="#f3661f" stroke="#b13784" stroke-width=".2"/>
      <circle cx="59" cy="85" r="2" fill="#f3661f" stroke="#b13784" stroke-width=".2"/>
      <circle cx="55" cy="85" r="2" fill="#f3661f" stroke="#b13784" stroke-width=".2"/>
      <circle cx="57" cy="84" r="2.11" fill="#f3661f" stroke="#b13784" stroke-width=".2"/>
      
      //หอย
      <ellipse cx="6" cy="70.5" rx="3" ry="2" fill="#dba61f" />
      <circle cx="6" cy="69.1" r="2.5" fill="#f4cfc7" stroke="#b13784" stroke-width=".1"/>
      <ellipse cx="6" cy="69" rx="1" ry="2.5" fill="#f4cfc7" stroke="#b13784" stroke-width=".1"/>
      
      //สาหร่าย
      <ellipse cx="36" cy="97.5" rx="9" ry="2" fill="#dba61f" />
      //ซ้าย
      <circle cx="32" cy="96" r="2.5" fill="green" />
      <circle cx="31" cy="94" r="2.2" fill="green"/>
      <circle cx="30" cy="92" r="2" fill="green" />
      <circle cx="29" cy="90" r="1.8" fill="green" />
      <circle cx="29" cy="88" r="1.6" fill="green" />
      <circle cx="29" cy="86" r="1.6" fill="green" />
      <circle cx="30" cy="84" r="1.6" fill="green"/>
      <circle cx="31" cy="82" r="1.6" fill="green" />
      <circle cx="31" cy="80" r="1.5" fill="green" />
      <circle cx="31" cy="78" r="1.4" fill="green" />
      <circle cx="31" cy="76" r="1.3" fill="green" />
      <circle cx="30" cy="75" r="1.2" fill="green" />
      <circle cx="29" cy="74" r="1" fill="green" />
     //กลาง
      <circle cx="35.8" cy="96" r="2.5" fill="green" />
      <circle cx="36.8" cy="94" r="2.2" fill="green"/>
      <circle cx="37.5" cy="92" r="2" fill="green" />
      <circle cx="37.8" cy="90" r="1.8" fill="green" />
      <circle cx="37.5" cy="88" r="1.6" fill="green" />
      <circle cx="36.7" cy="86" r="1.6" fill="green" />
      <circle cx="36.5" cy="84" r="1.6" fill="green"/>
      <circle cx="36" cy="82" r="1.6" fill="green" />
      <circle cx="36" cy="80" r="1.5" fill="green" />
      <circle cx="36.7" cy="78" r="1.4" fill="green" />
      <circle cx="36.4" cy="76" r="1.3" fill="green" />
      <circle cx="37" cy="75" r="1.2" fill="green" />
      <circle cx="38" cy="74" r="1" fill="green" />
      //ขวา
      <circle cx="40.5" cy="96" r="2.5" fill="green" />
      <circle cx="42" cy="94" r="2.2" fill="green"/>
      <circle cx="42.5" cy="92" r="2" fill="green" />
      <circle cx="42.8" cy="90" r="1.8" fill="green" />
      <circle cx="43" cy="88" r="1.6" fill="green" />
      <circle cx="43.5" cy="86" r="1.6" fill="green" />
      <circle cx="43" cy="84" r="1.6" fill="green"/>
      <circle cx="42.5" cy="82" r="1.6" fill="green" />
      <circle cx="42" cy="80" r="1.5" fill="green" />
      <circle cx="43" cy="78" r="1.4" fill="green" />
      <circle cx="43.8" cy="76" r="1.3" fill="green" />
      <circle cx="44.5" cy="75" r="1.2" fill="green" />
      <circle cx="45.5" cy="74" r="1" fill="green" />
      
      //หิน
      <ellipse cx="79" cy="85.9" rx="8" ry="2" fill="#dba61f" />
      <ellipse cx="81" cy="82" rx="6.4" ry="3" fill="#dba61f" />
      <ellipse cx="79" cy="84" rx="7" ry="3" fill="#9a99a3" stroke="#807f86" stroke-width=".2"/>
      <ellipse cx="81" cy="81" rx="6" ry="3" fill="#9a99a3" stroke="#807f86" stroke-width=".2"/>
      
      //หัวใจ
      <circle cx="5" cy="98" r=".6" fill="#be8c38" />
      <circle cx="3" cy="95" r=".6" fill="#be8c38" />
      <circle cx="7" cy="95" r=".6" fill="#be8c38" />
      <circle cx="4" cy="95.5" r=".6" fill="#be8c38" />
      <circle cx="6" cy="95.5" r=".6" fill="#be8c38" />
      <circle cx="3" cy="96" r=".6" fill="#be8c38" />
      <circle cx="7" cy="96" r=".6" fill="#be8c38" />
      <circle cx="3" cy="97" r=".6" fill="#be8c38" />
      <circle cx="7" cy="97" r=".6" fill="#be8c38" />
      <circle cx="4" cy="97.5" r=".6" fill="#be8c38" />
      <circle cx="6" cy="97.5" r=".6" fill="#be8c38" />
      <circle cx="5" cy="96" r=".6" fill="#be8c38" />
      
      //ปู
      <ellipse cx="65" cy="98" rx="3.5" ry="1" fill="#dba61f" />
      <line x1="61.3" y1="95" x2="68.5" y2="95" stroke="#659dab" stroke-width=".4"/>
      <line x1="61.3" y1="95.8" x2="68.5" y2="95.8" stroke="#659dab" stroke-width=".4"/>
      <line x1="61.3" y1="96.5" x2="68.5" y2="96.5" stroke="#659dab" stroke-width=".4"/>
      <line x1="61.3" y1="97.3" x2="68.5" y2="97.3" stroke="#659dab" stroke-width=".4"/> 
      <line x1="60.3" y1="95.8" x2="61.3" y2="95" stroke="#659dab" stroke-width=".4"/>
      <line x1="60.3" y1="96.5" x2="61.3" y2="95.8" stroke="#659dab" stroke-width=".4"/>
      <line x1="60.3" y1="97.3" x2="61.3" y2="96.5" stroke="#659dab" stroke-width=".4"/>
      <line x1="60.3" y1="98" x2="61.3" y2="97.3" stroke="#659dab" stroke-width=".4"/>
      <line x1="68.5" y1="97.3" x2="69.5" y2="98" stroke="#659dab" stroke-width=".4"/>
      <line x1="68.5" y1="96.5" x2="69.5" y2="97.3" stroke="#659dab" stroke-width=".4"/>
      <line x1="68.5" y1="95.8" x2="69.5" y2="96.5" stroke="#659dab" stroke-width=".4"/>
      <line x1="68.5" y1="95" x2="69.5" y2="95.8" stroke="#659dab" stroke-width=".4"/>
      <line x1="64" y1="96" x2="64" y2="92" stroke="#659dab" stroke-width=".3"/>
      <line x1="66" y1="96" x2="66" y2="92" stroke="#659dab" stroke-width=".3"/>
      <line x1="64" y1="96" x2="60" y2="92" stroke="#659dab" stroke-width=".3"/>
      <line x1="66" y1="96" x2="70" y2="92" stroke="#659dab" stroke-width=".3"/>
      <circle cx="61" cy="92.5" r="1.5" fill="#70aebe" stroke="#659dab" stroke-width=".2"/>
      <circle cx="69" cy="92.5" r="1.5" fill="#70aebe" stroke="#659dab" stroke-width=".2"/>
      <circle cx="64" cy="92" r=".8" fill="#70aebe" stroke="#659dab" stroke-width=".2"/>
      <circle cx="66" cy="92" r=".8" fill="#70aebe" stroke="#659dab" stroke-width=".2"/>
      <circle cx="64" cy="92" r=".7" fill="#fff" stroke="#659dab" stroke-width=".2"/>
      <circle cx="66" cy="92" r=".7" fill="#fff" stroke="#659dab" stroke-width=".2"/>
      <circle cx="64" cy="92" r=".3" fill="#000" stroke="#659dab" stroke-width=".2"/>
      <circle cx="66" cy="92" r=".3" fill="#000" stroke="#659dab" stroke-width=".2"/>
      <ellipse cx="65" cy="96" rx="3" ry="2" fill="#70aebe" stroke="#659dab" stroke-width=".2" />
      <line x1="61" y1="92.5" x2="59.5" y2="90" stroke="#f5c13d" stroke-width=".6"/>
      <line x1="69" y1="92.5" x2="70.7" y2="90" stroke="#f8cf68" stroke-width=".6"/>
      
    </svg>
  </body>
</html>