SVG ASSIGNMENT อู๋-สัณห์พิชญ์
✨ Sanpis Poolsilpe
<html> <head> <title>SVG </title> <style> body{ background:#666; margin:0em; margin-top:2em; font-family:sans-serif; } svg{ background:#29D6DA; width:110vmin; height:90vmin; display:block; margin:auto; box-shadow:0px 0px 10px #0006; } #upper{ transform-box: fill-box; transform-origin: center; transform: rotate(35deg); } #lower{ transform-box: fill-box; transform-origin: center; transform: rotate(-35deg); } #fish1{ animation: move1 10s linear infinite ; } @keyframes move1{ 0% { transform: translateX(0px) rotateY(0deg); } 30% { transform: translatey(50px) translateX(150px) rotateY(0deg); } 31% { transform: translatey(35px) translateX(150px) rotateY(180deg); } 60% { transform: translatey(0px) translateX(-30px) rotateY(180deg); } } #fish2{ animation: move2 12s 1s linear infinite; transform-origin: 60% 50%; } @keyframes move2{ 0%{ transform: translatey(0) translateX(0) rotateY(0);} 30%{ transform: translateX(-150px) translatey(-10px) rotateY(0);} 50%{transform: translateX(0px) translatey(20px) rotateY(180deg)} 75%{transform: translateX(100px) translatey(-20px) rotateY(180deg)} 80%{transform: translateX(90px) translatey(-20px) rotateY(180deg)} } #seaweed{ animation: bid 1.5s linear infinite alternate; transform-box: fill-box; transform-origin: center; } @keyframes bid{ 0%{transform: skewx(15deg);} 100%{transform: skewx(-15deg);} } .leaft{ transform-box: fill-box; transform-origin: center; transform: rotate(45deg); } .right{ transform-box: fill-box; transform-origin: center; transform: rotate(-45deg); } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- some plant --> <line x1="80" y1="65" x2="80" y2="10" style="fill:green;stroke:green;stroke-width:1"/> <ellipse cx="80" cy="62" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="56" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="50" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="44" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="38" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="32" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="26" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="20" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="14" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="80" cy="8" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <line x1="100" y1="65" x2="100" y2="10" style="fill:green;stroke:green;stroke-width:1"/> <ellipse cx="100" cy="62" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="56" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="50" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="44" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="38" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="32" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="26" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="20" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="14" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <ellipse cx="100" cy="8" rx="9" ry="2" style="fill:#79a62f;stroke:#79a62f;stroke-width:.4" /> <!-- cave --> <circle cx="95" cy="88" r="30" fill="#515051"/> <circle cx="95" cy="82" r="18" fill="black"/> <polygon points="78.5,74.5 79.5,85 75.5,85" fill="black" /> <!-- ปลา1 --> <g id="fish1"> <polygon points="12.5,43.5 12.5,45 10.5,42 " fill="#ff5d05" stroke="red"/> <polygon points="12.5,54.5 12.5,56 10.5,58 " fill="#ff5d05" stroke="red"/> <polygon points="5,50 3,47 0,45 0,55 3,53" fill="#ff5d05" stroke="red" stroke-width=".3"/> <ellipse cx="12.5" cy="50" rx="9" ry="5" style="fill:#fa8900;stroke:#ffc680;stroke-width:.4" /> <line x1="7" y1="46" x2="13" y2="46" style="stroke:#ffc680;stroke-width:.3"/> <line x1="5.5" y1="47" x2="13" y2="47" style="stroke:#ffc680;stroke-width:.3"/> <line x1="4.5" y1="48" x2="13" y2="48" style="stroke:#ffc680;stroke-width:.3"/> <line x1="4" y1="49" x2="13" y2="49" style="stroke:#ffc680;stroke-width:.3"/> <line x1="3.5" y1="50" x2="13" y2="50" style="stroke:#ffc680;stroke-width:.3"/> <line x1="3.5" y1="51" x2="13" y2="51" style="stroke:#ffc680;stroke-width:.3"/> <line x1="4.5" y1="52" x2="13" y2="52" style="stroke:#ffc680;stroke-width:.3"/> <line x1="5.5" y1="53" x2="13" y2="53" style="stroke:#ffc680;stroke-width:.3"/> <line x1="7" y1="54" x2="13" y2="54" style="stroke:#ffc680;stroke-width:.3"/> <ellipse cx="15.6" cy="50" rx="5.8" ry="4.5" style="fill:#fa8900;stroke:#ffc680;stroke-width:.4" /> <circle cx="19" cy="49" r="1" stroke="white" stroke-width=".5"/> <circle cx="24" cy="48" r="0.8" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="48" to="1" dur="2s" begin="0s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" dur="2s" begin="0s" repeatCount="indefinite"/> </circle> </g> <rect x="100" y="70" width="13" height="40" fill="black"/> <polygon points="111.5,75 111.5,70 109,70" fill="#515051" stroke="#515051" stroke-width="1"/> <!-- light WATERPROOF --> <line x1="31.5" y1="20" x2="31.5" y2="0" style="stroke:white;stroke-width:1.7"/> <line x1="31.5" y1="20" x2="31.5" y2="0" style="stroke:black;stroke-width:1"/> <polygon points="20,30 23,20 40,20 43,30" fill="white" stroke="gray" stroke-width="1"/> <!-- some plant 2 --> <g class="leaft"> <ellipse cx="6" cy="56" rx="4" ry="2" style="fill:#90EE90;stroke:#059033;stroke-width:.4" /> </g> <g class="right"> <ellipse cx="14" cy="61.2" rx="4" ry="2" style="fill:#90EE90;stroke:#059033;stroke-width:.4" /> </g> <g class="right"> <ellipse cx="14" cy="71.5" rx="4" ry="2" style="fill:#90EE90;stroke:#059033;stroke-width:.4" /> </g> <g class="leaft"> <ellipse cx="6" cy="66" rx="4" ry="2" style="fill:#90EE90;stroke:#059033;stroke-width:.4" /> </g> <line x1="10" y1="85" x2="10" y2="55" style="stroke:#b30012;stroke-width:1"/> <line x1="10" y1="70" x2="5" y2="65" style="stroke:#b30012;stroke-width:1"/> <line x1="10" y1="75" x2="15" y2="70" style="stroke:#b30012;stroke-width:1"/> <line x1="10" y1="65" x2="15" y2="60" style="stroke:#b30012;stroke-width:1"/> <line x1="10" y1="60" x2="5" y2="55" style="stroke:#b30012;stroke-width:1"/> <!-- oxygen tube --> <polygon points="-9.5,0 0,10 0,80 -3,80 -3,12 -13,0" fill="#79a62f" stroke="#9ecd50" stroke-width="1"/> <circle cx="0" cy="80" r="5" fill="#b0b0d8" stroke="white" stroke-width=".5"/> <!-- oxygen --> <g> <animate attributeName="opacity" from="1" to="0" dur="4s" begin="0s" repeatCount="indefinite"/> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="80" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="14" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="76" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="18" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="75" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="22" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="75" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="26" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="75" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="30" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> <circle cx="5" cy="25" r="1.5" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="75" to="1" dur="4s" begin="0s" repeatCount="indefinite"/> <animate attributeName="cx" from="5" to="35" dur="4s" begin="0s" repeatCount="indefinite"/> </circle> </g> <!-- sandfloor --> <polygon points="-11,100 -11,85 120,85 120,100" stroke="#d8caae" fill="#d8caae" stroke-width=".05"/> <!--seaweed--> <g id="seaweed"> <polygon points="60,85 59,80 57,78 57,78 56,74 55,78 57,80" fill="#79a62f" stroke="#9ecd50" stroke-width=".3"/> <polygon points="63,85 65,80 64,77 62,75 63,72 62,69 60,73 59,76 61,78 62,82 " fill="#79a62f" stroke="#9ecd50" stroke-width=".3"/> <polygon points="68,85 70,80 71,79 71.5,78 71,74 70,78 68,80" fill="#79a62f" stroke="#9ecd50" stroke-width=".3"/> </g> <!-- rock --> <ellipse cx="65.5" cy="84" rx="5" ry="3" style="fill:#828886;stroke:#515051;stroke-width:.4" /> <ellipse cx="60.5" cy="85" rx="3" ry="2" style="fill:#828886;stroke:#515051;stroke-width:.4" /> <!-- crab that never hurt fish --> <polygon points="20,91 17,88 15,92 17,90" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <polygon points="20,93 17,90 15,94 17,92" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <polygon points="20,93 17,92 15,96 17,94" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <polygon points="31,91 34,88 36,92 34,90" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <polygon points="31,93 34,90 36,94 34,92" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <polygon points="31,93 34,92 36,96 34,94" fill="#db1f32" stroke="#b30012" stroke-width=".3"/> <line x1="20" y1="85" x2="23" y2="90" style="stroke:#b30012;stroke-width:.3"/> <circle cx="20" cy="85" r="2" fill="#db1f32"/> <rect x="17.5" y="82.5" width="2.5" height="2.5" fill="#29D6DA"> <animate attributeName="rx" values="0;5;0" dur="1s" begin="0s" repeatCount="indefinite"/> </rect> <line x1="31" y1="85" x2="28" y2="90" style="stroke:#b30012;stroke-width:.3"/> <circle cx="31" cy="85" r="2" fill="#db1f32"/> <rect x="31" y="82.5" width="2.5" height="2.5" fill="#29D6DA"/> <line x1="24.5" y1="86" x2="24.5" y2="88" style="stroke:#b30012;stroke-width:.3"/> <circle cx="24.5" cy="86" r=".7"/> <line x1="26.5" y1="86" x2="26.5" y2="88" style="stroke:#b30012;stroke-width:.3"/> <circle cx="26.5" cy="86" r=".7"/> <ellipse cx="25.5" cy="92" rx="7" ry="4" style="fill:#db1f32;stroke:#b30012;stroke-width:.4" /> <!-- ปลา2 --> <g id="fish2"> <polygon points="74,18 73.5,15.7 75.5,16.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="76.7,16 77.2,14 78.5,15.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="79.5,16 81.3,14 82,16" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="83,16 84.8,15 85,17.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="85.5,18 88.1,18 87.5,21" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="73.5,29.5 73,31.5 75,31" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="76,31.5 76.5,33.5 78,32.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="78.8,31.8 81,33.9 82,31.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="83,32 84.8,32.7 85,30" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <polygon points="85,30 88.1,29.8 87.5,26.5" fill="#feae51ff" stroke="#8c32e7" stroke-width=".3"/> <ellipse cx="73" cy="25", rx="3" ry="1.2" style="fill:#feae51ff;stroke:#515051;stroke-width:.4"/> <ellipse cx="73" cy="23.5", rx="3" ry="1.2" style="fill:#feae51ff;stroke:#515051;stroke-width:.4"/> <ellipse id="upper" cx="87" cy="25", rx="3" ry="1.7" style="fill:#feae51ff;stroke:#515051;stroke-width:.4" /> <ellipse id="lower" cx="87" cy="23.5", rx="3" ry="1.7" style="fill:#feae51ff;stroke:#515051;stroke-width:.4"/> <circle cx="80" cy="24" r="8.5" fill="#8c32e7" stroke="#feae51ff" stroke-width=".4" /> <circle cx="74.5" cy="22" r="1.5" fill="#ffffff"/> <circle cx="74.5" cy="22" r="1" fill="#19052e"/> <circle cx="81.5" cy="24" r=".5" fill="#57129b"/> <circle cx="80.5" cy="20" r=".5" fill="#57129b"/> <circle cx="83.5" cy="19" r=".5" fill="#57129b"/> <circle cx="86.5" cy="24" r=".5" fill="#57129b"/> <circle cx="82.5" cy="21" r=".5" fill="#57129b"/> <circle cx="79.5" cy="22.8" r=".5" fill="#57129b"/> <circle cx="83.5" cy="25" r=".5" fill="#57129b"/> <circle cx="78.5" cy="20" r=".5" fill="#57129b"/> <circle cx="85.5" cy="22" r=".5" fill="#57129b"/> <circle cx="77.5" cy="25.5" r=".5" fill="#57129b"/> <circle cx="80" cy="26.8" r=".5" fill="#57129b"/> <circle cx="84" cy="27.8" r=".5" fill="#57129b"/> <circle cx="75.5" cy="27" r=".5" fill="#57129b"/> <circle cx="68" cy="25" r="0.8" stroke="white" fill-opacity="0" stroke-width=".5"> <animate attributeName="cy" from="25" to="1" dur="2s" begin="0s" repeatCount="indefinite" /> <animate attributeName="opacity" from="1" to="0" dur="2s" begin="0s" repeatCount="indefinite"/> </circle> </g> </svg> </body> </html>