การบ้าน svg 64070080 แนน-เพ็ญพิชชา
✨ PENPITCHA YOOPRASERT
<html> <head> <title>Homework SVG</title> <style> body{ background-image: linear-gradient(hsl(176, 99%, 54%), hsl(187, 63%, 41%), hsl(187, 63%, 25%)); margin:1em; font-family:sans-serif; } svg{ width:90vmin; height:90vmin; display:block; margin:auto; box-shadow:10px 10px 100px #0006; } .fish { transform: translateY(150px); animation: popup 3s 1s ease infinite; } .bubble1 { animation: hideshow 5s ease infinite; } .bubble2 { animation: hideshow2 5s ease infinite; } @keyframes popup { 0% { transform: translateX(40px); } 25% { transform: translateX(10px); } 50% { transform: translateX(-30px); transform: translateY(-20px); } 75% { transform: translateX(-35px); } 100% { transform: translateX(-70px); } } @keyframes hideshow { 0% { opacity: 0;} 20% { opacity: 1;} 40% { opacity: 0; } 60% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 1; } } @keyframes hideshow2 { 0% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 0; } } </style> </head> <body> <svg viewBox="0 0 100 100"> <g fill="hsl(38, 69%, 78%)"> <ellipse cx="0" cy="115" rx="100" ry="30" /> <ellipse cx="100" cy="115" rx="100" ry="30" /> </g> <g fill="black"> <rect x="4" y="79" width="1" height="1"></rect> <rect x="4" y="78" width="1" height="1"></rect> <rect x="4" y="77" width="1" height="1"></rect> <rect x="4" y="76" width="1" height="1"></rect> <rect x="5" y="75" width="1" height="1"></rect> <rect x="5" y="74" width="1" height="1"></rect> <rect x="6" y="73" width="1" height="1"></rect> <rect x="5" y="80" width="1" height="1"></rect> <rect x="5" y="81" width="1" height="1"></rect> <rect x="6" y="82" width="1" height="1"></rect> <rect x="6" y="83" width="1" height="1"></rect> <rect x="7" y="84" width="1" height="1"></rect> <rect x="7" y="72" width="1" height="1"></rect> <rect x="7" y="73" width="1" height="1"></rect> <rect x="7" y="74" width="1" height="1"></rect> <rect x="7" y="75" width="1" height="1"></rect> <rect x="6" y="76" width="1" height="1"></rect> <rect x="6" y="77" width="1" height="1"></rect> <rect x="6" y="78" width="1" height="1"></rect> <rect x="7" y="79" width="1" height="1"></rect> <rect x="7" y="80" width="1" height="1"></rect> <rect x="8" y="81" width="1" height="1"></rect> <rect x="8" y="82" width="1" height="1"></rect> <rect x="9" y="83" width="1" height="1"></rect> <rect x="9" y="84" width="1" height="1"></rect> <rect x="8" y="85" width="1" height="1"></rect> <rect x="9" y="85" width="1" height="1"></rect> <rect x="10" y="82" width="1" height="1"></rect> <rect x="11" y="81" width="1" height="1"></rect> <rect x="11" y="80" width="1" height="1"></rect> <rect x="11" y="80" width="1" height="1"></rect> <rect x="11" y="79" width="1" height="1"></rect> <rect x="10" y="78" width="1" height="1"></rect> <rect x="9" y="77" width="1" height="1"></rect> <rect x="9" y="76" width="1" height="1"></rect> <rect x="9" y="76" width="1" height="1"></rect> <rect x="9" y="75" width="1" height="1"></rect> <rect x="10" y="74" width="1" height="1"></rect> <rect x="10" y="73" width="1" height="1"></rect> <rect x="11" y="72" width="1" height="1"></rect> <rect x="11" y="71" width="1" height="1"></rect> <rect x="12" y="70" width="1" height="1"></rect> <rect x="13" y="69" width="1" height="1"></rect> <rect x="14" y="70" width="1" height="1"></rect> <rect x="14" y="69" width="1" height="1"></rect> <rect x="14" y="68" width="1" height="1"></rect> <rect x="13" y="71" width="1" height="1"></rect> <rect x="13" y="72" width="1" height="1"></rect> <rect x="12" y="73" width="1" height="1"></rect> <rect x="12" y="74" width="1" height="1"></rect> <rect x="11" y="75" width="1" height="1"></rect> <rect x="12" y="76" width="1" height="1"></rect> <rect x="12" y="77" width="1" height="1"></rect> <rect x="13" y="78" width="1" height="1"></rect> <rect x="14" y="79" width="1" height="1"></rect> <rect x="14" y="80" width="1" height="1"></rect> <rect x="13" y="81" width="1" height="1"></rect> <rect x="12" y="82" width="1" height="1"></rect> <rect x="12" y="83" width="1" height="1"></rect> <rect x="11" y="84" width="1" height="1"></rect> <rect x="10" y="85" width="1" height="1"></rect> <rect x="11" y="85" width="1" height="1"></rect> <rect x="12" y="85" width="1" height="1"></rect> <rect x="13" y="83" width="1" height="1"></rect> <rect x="13" y="83" width="1" height="1"></rect> <rect x="14" y="82" width="1" height="1"></rect> <rect x="15" y="81" width="1" height="1"></rect> <rect x="16" y="81" width="1" height="1"></rect> <rect x="17" y="80" width="1" height="1"></rect> <rect x="17" y="79" width="1" height="1"></rect> <rect x="16" y="78" width="1" height="1"></rect> <rect x="15" y="77" width="1" height="1"></rect> <rect x="15" y="76" width="1" height="1"></rect> <rect x="15" y="75" width="1" height="1"></rect> <rect x="16" y="74" width="1" height="1"></rect> <rect x="16" y="73" width="1" height="1"></rect> <rect x="16" y="72" width="1" height="1"></rect> <rect x="17" y="73" width="1" height="1"></rect> <rect x="18" y="74" width="1" height="1"></rect> <rect x="18" y="75" width="1" height="1"></rect> <rect x="17" y="76" width="1" height="1"></rect> <rect x="17" y="77" width="1" height="1"></rect> <rect x="18" y="78" width="1" height="1"></rect> <rect x="19" y="79" width="1" height="1"></rect> <rect x="19" y="80" width="1" height="1"></rect> <rect x="18" y="81" width="1" height="1"></rect> <rect x="18" y="82" width="1" height="1"></rect> <rect x="17" y="83" width="1" height="1"></rect> <rect x="16" y="84" width="1" height="1"></rect> <rect x="15" y="84" width="1" height="1"></rect> <rect x="14" y="85" width="1" height="1"></rect> <rect x="13" y="85" width="1" height="1"></rect> <rect x="70" y="79" width="1" height="1"></rect> <rect x="70" y="78" width="1" height="1"></rect> <rect x="70" y="77" width="1" height="1"></rect> <rect x="70" y="76" width="1" height="1"></rect> <rect x="71" y="75" width="1" height="1"></rect> <rect x="71" y="74" width="1" height="1"></rect> <rect x="72" y="73" width="1" height="1"></rect> <rect x="71" y="80" width="1" height="1"></rect> <rect x="71" y="81" width="1" height="1"></rect> <rect x="72" y="82" width="1" height="1"></rect> <rect x="72" y="83" width="1" height="1"></rect> <rect x="73" y="84" width="1" height="1"></rect> <rect x="73" y="72" width="1" height="1"></rect> <rect x="73" y="73" width="1" height="1"></rect> <rect x="73" y="74" width="1" height="1"></rect> <rect x="73" y="75" width="1" height="1"></rect> <rect x="72" y="76" width="1" height="1"></rect> <rect x="72" y="77" width="1" height="1"></rect> <rect x="72" y="78" width="1" height="1"></rect> <rect x="73" y="79" width="1" height="1"></rect> <rect x="73" y="80" width="1" height="1"></rect> <rect x="74" y="81" width="1" height="1"></rect> <rect x="74" y="82" width="1" height="1"></rect> <rect x="75" y="83" width="1" height="1"></rect> <rect x="75" y="84" width="1" height="1"></rect> <rect x="74" y="85" width="1" height="1"></rect> <rect x="75" y="85" width="1" height="1"></rect> <rect x="76" y="82" width="1" height="1"></rect> <rect x="77" y="81" width="1" height="1"></rect> <rect x="77" y="80" width="1" height="1"></rect> <rect x="77" y="80" width="1" height="1"></rect> <rect x="77" y="79" width="1" height="1"></rect> <rect x="76" y="78" width="1" height="1"></rect> <rect x="75" y="77" width="1" height="1"></rect> <rect x="75" y="76" width="1" height="1"></rect> <rect x="75" y="76" width="1" height="1"></rect> <rect x="75" y="75" width="1" height="1"></rect> <rect x="76" y="74" width="1" height="1"></rect> <rect x="76" y="73" width="1" height="1"></rect> <rect x="77" y="72" width="1" height="1"></rect> <rect x="77" y="71" width="1" height="1"></rect> <rect x="78" y="70" width="1" height="1"></rect> <rect x="79" y="69" width="1" height="1"></rect> <rect x="80" y="70" width="1" height="1"></rect> <rect x="80" y="69" width="1" height="1"></rect> <rect x="80" y="68" width="1" height="1"></rect> <rect x="79" y="71" width="1" height="1"></rect> <rect x="79" y="72" width="1" height="1"></rect> <rect x="78" y="73" width="1" height="1"></rect> <rect x="78" y="74" width="1" height="1"></rect> <rect x="77" y="75" width="1" height="1"></rect> <rect x="78" y="76" width="1" height="1"></rect> <rect x="78" y="77" width="1" height="1"></rect> <rect x="79" y="78" width="1" height="1"></rect> <rect x="80" y="79" width="1" height="1"></rect> <rect x="80" y="80" width="1" height="1"></rect> <rect x="79" y="81" width="1" height="1"></rect> <rect x="78" y="82" width="1" height="1"></rect> <rect x="78" y="83" width="1" height="1"></rect> <rect x="77" y="84" width="1" height="1"></rect> <rect x="76" y="85" width="1" height="1"></rect> <rect x="77" y="85" width="1" height="1"></rect> <rect x="78" y="85" width="1" height="1"></rect> <rect x="79" y="83" width="1" height="1"></rect> <rect x="79" y="83" width="1" height="1"></rect> <rect x="80" y="82" width="1" height="1"></rect> <rect x="81" y="81" width="1" height="1"></rect> <rect x="82" y="81" width="1" height="1"></rect> <rect x="83" y="80" width="1" height="1"></rect> <rect x="83" y="79" width="1" height="1"></rect> <rect x="82" y="78" width="1" height="1"></rect> <rect x="81" y="77" width="1" height="1"></rect> <rect x="81" y="76" width="1" height="1"></rect> <rect x="81" y="75" width="1" height="1"></rect> <rect x="82" y="74" width="1" height="1"></rect> <rect x="82" y="73" width="1" height="1"></rect> <rect x="82" y="72" width="1" height="1"></rect> <rect x="83" y="73" width="1" height="1"></rect> <rect x="84" y="74" width="1" height="1"></rect> <rect x="84" y="75" width="1" height="1"></rect> <rect x="83" y="76" width="1" height="1"></rect> <rect x="83" y="77" width="1" height="1"></rect> <rect x="84" y="78" width="1" height="1"></rect> <rect x="85" y="79" width="1" height="1"></rect> <rect x="85" y="80" width="1" height="1"></rect> <rect x="84" y="81" width="1" height="1"></rect> <rect x="84" y="82" width="1" height="1"></rect> <rect x="83" y="83" width="1" height="1"></rect> <rect x="82" y="84" width="1" height="1"></rect> <rect x="81" y="84" width="1" height="1"></rect> <rect x="80" y="85" width="1" height="1"></rect> <rect x="79" y="85" width="1" height="1"></rect> </g> <g fill="hsl(110, 37%, 21%)"> <rect x="6" y="74" width="1" height="2"></rect> <rect x="5" y="76" width="1" height="4"></rect> <rect x="6" y="79" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="7" y="81" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="8" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="13" y="70" width="1" height="1"></rect> <rect x="12" y="71" width="1" height="2"></rect> <rect x="11" y="73" width="1" height="2"></rect> <rect x="10" y="75" width="1" height="2"></rect> <rect x="10" y="77" width="1" height="1" fill="hsl(110, 37%, 15%)"></rect> <rect x="11" y="76" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="12" y="78" width="1" height="4" fill="hsl(110, 37%, 15%)"></rect> <rect x="13" y="79" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="11" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="10" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="17" y="74" width="1" height="2"></rect> <rect x="16" y="75" width="1" height="3"></rect> <rect x="17" y="78" width="1" height="1"></rect> <rect x="18" y="79" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="17" y="81" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="16" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="15" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="14" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="12" y="84" width="2" height="1" fill="hsl(110, 37%, 15%)"></rect> <rect x="72" y="74" width="1" height="2"></rect> <rect x="71" y="76" width="1" height="4"></rect> <rect x="72" y="79" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="73" y="81" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="74" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="79" y="70" width="1" height="1"></rect> <rect x="78" y="71" width="1" height="2"></rect> <rect x="77" y="73" width="1" height="2"></rect> <rect x="76" y="75" width="1" height="2"></rect> <rect x="76" y="77" width="1" height="1" fill="hsl(110, 37%, 15%)"></rect> <rect x="77" y="76" width="1" height="3" fill="hsl(110, 37%, 15%)"></rect> <rect x="78" y="78" width="1" height="4" fill="hsl(110, 37%, 15%)"></rect> <rect x="79" y="79" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="77" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="76" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="83" y="74" width="1" height="2"></rect> <rect x="82" y="75" width="1" height="3"></rect> <rect x="83" y="78" width="1" height="1"></rect> <rect x="84" y="79" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="83" y="81" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="82" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="81" y="82" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="80" y="83" width="1" height="2" fill="hsl(110, 37%, 15%)"></rect> <rect x="78" y="84" width="2" height="1" fill="hsl(110, 37%, 15%)"></rect> </g> <g fill="black"> <rect x="45" y="88" width="10" height="1"></rect> <rect x="44" y="87" width="1" height="1"></rect> <rect x="55" y="87" width="1" height="1"></rect> <rect x="43" y="84" width="1" height="3"></rect> <rect x="56" y="84" width="1" height="3"></rect> <rect x="44" y="82" width="1" height="2"></rect> <rect x="55" y="82" width="1" height="2"></rect> <rect x="45" y="81" width="1" height="1"></rect> <rect x="54" y="81" width="1" height="1"></rect> <rect x="46" y="80" width="1" height="1"></rect> <rect x="53" y="80" width="1" height="1"></rect> <rect x="47" y="79" width="6" height="1"></rect> <rect x="55" y="78" width="5" height="1"></rect> <rect x="54" y="79" width="1" height="1"></rect> <rect x="60" y="79" width="1" height="1"></rect> <rect x="61" y="80" width="1" height="1"></rect> <rect x="62" y="81" width="1" height="1"></rect> <rect x="63" y="82" width="1" height="2"></rect> <rect x="64" y="84" width="1" height="3"></rect> <rect x="63" y="87" width="1" height="1"></rect> <rect x="55" y="88" width="8" height="1"></rect> </g> <g fill="grey"> <rect x="44" y="84" width="1" height="3"></rect> <rect x="45" y="82" width="1" height="5"></rect> <rect x="46" y="81" width="1" height="6"></rect> <rect x="47" y="80" width="1" height="7"></rect> <rect x="48" y="80" width="1" height="7"></rect> <rect x="49" y="80" width="1" height="6"></rect> <rect x="50" y="80" width="1" height="6"></rect> <rect x="51" y="80" width="1" height="5"></rect> <rect x="52" y="80" width="1" height="5"></rect> <rect x="53" y="81" width="1" height="3"></rect> <rect x="54" y="82" width="1" height="2"></rect> <rect x="45" y="87" width="10" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="44" y="86" width="12" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="45" y="85" width="11" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="47" y="84" width="9" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="49" y="83" width="6" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="53" y="82" width="2" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="54" y="80" width="1" height="1"></rect> <rect x="55" y="79" width="1" height="3"></rect> <rect x="56" y="79" width="1" height="3"></rect> <rect x="57" y="79" width="1" height="2"></rect> <rect x="58" y="79" width="1" height="2"></rect> <rect x="59" y="79" width="1" height="2"></rect> <rect x="56" y="87" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="57" y="86" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="57" y="85" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="57" y="84" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="56" y="83" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="56" y="82" width="7" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="57" y="81" width="5" height="1" fill="hsl(173, 0%, 40%)"></rect> <rect x="59" y="80" width="2" height="1" fill="hsl(173, 0%, 40%)"></rect> </g> <g fill="black" class="fish"> <rect x="50" y="50" width="7" height="1"></rect> <rect x="49" y="49" width="1" height="1"></rect> <rect x="47" y="48" width="1" height="1"></rect> <rect x="46" y="46" width="1" height="2"></rect> <rect x="47" y="45" width="1" height="1"></rect> <rect x="48" y="44" width="2" height="1"></rect> <rect x="50" y="43" width="7" height="1"></rect> <rect x="57" y="44" width="1" height="1"></rect> <rect x="58" y="44" width="1" height="1"></rect> <rect x="59" y="45" width="1" height="1"></rect> <rect x="57" y="49" width="2" height="1"></rect> <rect x="59" y="48" width="1" height="1"></rect> <rect x="60" y="46" width="1" height="2"></rect> <rect x="61" y="45" width="1" height="1"></rect> <rect x="62" y="44" width="2" height="1"></rect> <rect x="63" y="45" width="1" height="1"></rect> <rect x="62" y="46" width="1" height="1"></rect> <rect x="62" y="47" width="1" height="1"></rect> <rect x="63" y="48" width="1" height="2"></rect> <rect x="62" y="49" width="1" height="1"></rect> <rect x="61" y="48" width="1" height="1"></rect> <rect x="50" y="45" width="1" height="1"></rect> <rect x="52" y="51" width="1" height="1"></rect> <rect x="53" y="52" width="2" height="1"></rect> <rect x="55" y="51" width="1" height="1"></rect> <rect x="55" y="42" width="1" height="1"></rect> <rect x="53" y="41" width="2" height="1"></rect> <rect x="52" y="42" width="1" height="1"></rect> <rect x="52" y="45" width="1" height="1"></rect> <rect x="53" y="46" width="1" height="2"></rect> <rect x="52" y="48" width="1" height="1"></rect> <rect x="48" y="48" width="2" height="1"></rect> </g> <g fill="hsl(41, 100%, 59%)" class="fish"> <rect x="47" y="46" width="1" height="2"></rect> <rect x="48" y="45" width="2" height="3"></rect> <rect x="50" y="44" width="1" height="1"></rect> <rect x="50" y="46" width="1" height="4"></rect> <rect x="51" y="44" width="1" height="6"></rect> <rect x="52" y="44" width="1" height="1"></rect> <rect x="52" y="46" width="1" height="2"></rect> <rect x="50" y="49" width="7" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="53" y="48" width="6" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="54" y="46" width="6" height="2" fill="hsl(41, 100%, 40%)"></rect> <rect x="53" y="45" width="6" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="50" y="44" width="7" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="53" y="51" width="2" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="53" y="42" width="2" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="62" y="48" width="1" height="1" fill="hsl(41, 100%, 40%)"></rect> <rect x="61" y="46" width="1" height="2" fill="hsl(41, 100%, 40%)"></rect> <rect x="62" y="45" width="1" height="1" fill="hsl(41, 100%, 40%)"></rect> </g> <g class="bubble1" fill="hsl(176, 100%, 89%)"> <circle cx="50" cy="70" r="1"></circle> <circle cx="54" cy="75" r="1"></circle> <circle cx="90" cy="15" r="2"></circle> <circle cx="10" cy="70" r="1"></circle> <circle cx="0" cy="80" r="2"></circle> <circle cx="10" cy="20" r="2"></circle> <circle cx="30" cy="30" r="2"></circle> <circle cx="80" cy="40" r="1"></circle> </g> <g class="bubble2" fill="hsl(176, 100%, 89%)"> <circle cx="40" cy="50" r="2"></circle> <circle cx="50" cy="10" r="2"></circle> <circle cx="20" cy="40" r="1"></circle> <circle cx="70" cy="30" r="3"></circle> <circle cx="90" cy="80" r="2"></circle> <circle cx="80" cy="70" r="1"></circle> <circle cx="20" cy="80" r="1"></circle> <circle cx="70" cy="75" r="2"></circle> </g> </svg> </body> </html>