SVG Path Pattern (Branch 6506) (Copy 7662) (Branch..
✨ นางสาวพรปวีณ์ โสภณอริยนนท์
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:linear-gradient(to bottom,#12A491 ,#030E29,#010716 ); } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- Code Here --> <svg> <animate attributeName="x" values="0;10;20;0;-10;0;0;0" dur="5s" repeatCount="indefinite" /> <path stroke-width="2" fill="#0BCDF2" stroke="white" troke-linecap="round" stroke-linejoin="round" d=" M15,45 c1,60 74,78 76,0 z" > </path> <path stroke-width="2" fill="#7CF5F8 " stroke="white" troke-linecap="round" stroke-linejoin="round" d=" M20.5,45 c1,60 64,68 66,0 z" > </path> <ellipse cx="52" cy="88" rx="6" ry="4" fill="url(#fish)"/> <circle r="3" cx="47" cy="88" fill="white"/> <ellipse cx="47" cy="88" rx="1" ry="2"fill="url(#eye)"/> <ellipse cx="47" cy="88" rx="2" ry="1"fill="url(#eye)"/> <circle r="3" cx="60" cy="89" fill="url(#fish)"/> <circle r="3" cx="60" cy="86" fill="url(#fish)"/> </svg> <defs> <pattern id="fish" viewBox="0,0,8,8" width="10%" height="10%"> <rect width="8" height="8" fill="yellow"> </rect> <circle r="7" cx="2" cy="2" fill="#DD2C00"/> <circle r="4" cx="6" cy="6" fill="#64DD17"/> <circle r=".9" cx="6" cy="6" fill="#000"/> <circle r="2" cx="3" cy="5" fill="#004D40"/> </pattern> <pattern id="eye" viewBox="0,0,9,9" width="10%" height="10%"> <circle r="8" cx="5" cy="0" fill="#3E2723"/> <circle r="4" cx="6" cy="5" fill="#000"/> </pattern> </defs> <svg> <animate attributeName="y" values="-100;10;20;0;-10;20;20;0" dur="5s" repeatCount="indefinite" /> <circle r="8" cx="70" cy="70" fill="url(#fish)"/> <circle r="5" cx="65" cy="66" fill="white"/> <circle r="3" cx="65" cy="66" fill="url(#eye)"/> <circle r="3" cx="80" cy="72" fill="url(#fish)"/> <circle r="3" cx="80" cy="68" fill="url(#fish)"/></svg> --bigfish1--- <svg> <animate attributeName="y" values="100;-10;20;0;10;-20;20;0" dur="5s" repeatCount="indefinite" /> <circle r="8" cx="40" cy="69" fill="url(#fish)"/> <circle r="5" cx="35" cy="66" fill="white"/> <circle r="3" cx="35" cy="66" fill="url(#eye)"/> <circle r="3" cx="42" cy="79" fill="url(#fish)"/> <circle r="3" cx="39" cy="79" fill="url(#fish)"/></svg> --bigfish2--- <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="2" cx="39.3" cy="55" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="3" cx="39.3" cy="45" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="5" cx="39.4" cy="35" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="6" cx="39.4" cy="20" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="2" cx="39" cy="55" fill="white"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="3" cx="39" cy="45" fill="white"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="5" cx="39" cy="35" fill="white"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="6" cx="39" cy="20" fill="white"/></svg> ---ฟองซ้าย--- <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="4" cx="65.5" cy="55" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="8" cx="65.5" cy="35" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="10s" repeatCount="indefinite" /> <circle r="3" cx="65.5" cy="15" fill="gray"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="4" cx="65" cy="55" fill="white"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="8" cx="65" cy="35" fill="white"/></svg> <svg><animate attributeName="x" values="0;10;10;0;10;10;10;0" dur="20s" repeatCount="indefinite" /> <circle r="3" cx="65" cy="15" fill="white"/></svg> ---ฟองขวา--- <svg><animate attributeName="x" values="100;10;20;0;0;10;20;100" dur="5s" repeatCount="indefinite" /> <ellipse cx="10" cy="10" rx="5" ry="2" fill="black"/> <ellipse cx="5" cy="10" rx="1" ry="3" fill="black"/></svg> ---ปลา1--- <svg><animate attributeName="x" values="-100;10;20;10;-20;-10;-20;0" dur="5s" repeatCount="indefinite" /> <ellipse cx="90" cy="25" rx="5" ry="2" fill="black"/> <ellipse cx="95" cy="25" rx="1" ry="3" fill="black"/></svg> ---ปลา2--- <ellipse cx="93" cy="93" rx="1" ry="8" fill="#095629"/> <ellipse cx="96" cy="93" rx="1" ry="8" fill="#095629"/> <ellipse cx="5" cy="89" rx="1" ry="12" fill="#095629"/> <ellipse cx="93" cy="93" rx="1" ry="8" fill="#095629"/> <ellipse cx="19" cy="97" rx="5" ry="3" fill="#563809 "/> <ellipse cx="9" cy="93" rx="1" ry="12" fill="#095629"/> <ellipse cx="26" cy="93" rx="1" ry="8" fill="#095629"/> <ellipse cx="29" cy="93" rx="1" ry="8" fill="#095629"/> <ellipse cx="92" cy="93" rx="1" ry="8" fill="green"/> <ellipse cx="95" cy="93" rx="1" ry="8" fill="green"/> <ellipse cx="4" cy="89" rx="1" ry="12" fill="green"/> <ellipse cx="92" cy="93" rx="1" ry="8" fill="green"/> <ellipse cx="16" cy="97" rx="5" ry="3" fill="brown"/> <ellipse cx="8" cy="93" rx="1" ry="12" fill="green"/> <ellipse cx="25" cy="93" rx="1" ry="8" fill="green"/> <ellipse cx="28" cy="93" rx="1" ry="8" fill="green"/> ---สาหร่าย--- </svg> <audio loop="loop" src="https://cdn.discordapp.com/attachments/804012794017611807/834371827064504330/6_Mysterious_Deep_Sea_Sounds.mp3" type="audio/mpeg" autoplay></audio> </body> </html>