ปลาวาฬที่ไม่ใช่ปลาแล้วไม่ได้ท้องด้วย แต่คนวาดมันวา..
✨ นายกฤติน กลิ่นแก้ว
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#eee; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- Code Here --> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect fill="#0001" width="1" height="10" x="1" y="0"/> <rect fill="#0001" width="1" height="10" x="3" y="0"/> <rect fill="#0001" width="1" height="10" x="5" y="0"/> <rect fill="#0001" width="1" height="10" x="7" y="0"/> <rect fill="#0001" width="1" height="10" x="9" y="0"/> <rect fill="#0001" width="10" height="1" x="0" y="1"/> <rect fill="#0001" width="10" height="1" x="0" y="3"/> <rect fill="#0001" width="10" height="1" x="0" y="5"/> <rect fill="#0001" width="10" height="1" x="0" y="7"/> <rect fill="#0001" width="10" height="1" x="0" y="9"/> <path d="M0 0 h10 L9 1 h-8 v8 L0 10 z" fill="#ff05"/> <path d="M10 10 h-10 L1 9 h8 v-8 L10 0 z" fill="#0f05"/> <rect fill="#0002" width="10" height=".1" x="0" y="9.9"/> <rect fill="#0002" width="10" height=".1" x="0" y="0"/> <rect fill="#0002" height="10" width=".1" y="0" x="9.9"/> <rect fill="#0002" height="10" width=".1" y="0" x="0"/> </pattern> </defs> <rect fill="#bde1f7" x="0" y="0" width="100" height="100"/> <path d="M0,50 q10,-10 20,0 t20,0 t20,0 t20,0 t20,0 v50 h-100" stroke="#0000" stroke-width="1" fill="#63ccc7" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M0,60 q12.2,-10 25,0 t20,0 t20,0 t20,0 t20,0 v50 h-110" stroke="#0000" stroke-width="1" fill="#00acae" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M0,70 q15,-10 30,0 t20,0 t20,0 t20,0 t20,0 v50 h-120" stroke="#0000" stroke-width="1" fill="#01868d" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M0,80 q17.5,-10 35,0 t20,0 t20,0 t20,0 t20,0 v50 h-130" stroke="#0000" stroke-width="1" fill="#006174" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M0,90 q20,-10 40,0 t20,0 t20,0 t20,0 t20,0 v50 h-140" stroke="#0000" stroke-width="1" fill="#004d61" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M0,100 q22.5,-10 45,0 t20,0 t20,0 t20,0 t20,0 v50 h-140" stroke="#0000" stroke-width="1" fill="#00364a" stroke-linecap="round" stroke-linejo3n="round"/> <path fill="#24446a" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M35,60 c2.5,5 5,5 5,5 c-1,-5 0,-5 0,-5; M35,60 c3,4, 7.5,2.5 7.5,2.5 c-3.5,-2.5 -2.5,-2.5 -2.5,-2.5 ; M35,60 c2.5,5 5,5 5,5 c-1,-5 0,-5 0,-5; " dur="2s" repeatCount="indefinite" /> </path> <path d="M20,50 q0,10 10,10 h30 v-10 h-30" stroke="#0000" stroke-width="1" fill="#f4f3ee" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M21.5,50 q0,8.5 8.5,8.5 h30 v-10 h-30" stroke="#ccccca" stroke-width="0.5" fill="#0000" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M23,50 q0,7 7,7 h30 v-10 h-30" stroke="#ccccca" stroke-width="0.5" fill="#0000" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M24.5,50 q0,5.5 5.5,5.5 h30 v-10 h-30" stroke="#ccccca" stroke-width="0.5" fill="#0000" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M26,50 q0,4 4,4 h30 v-10 h-30" stroke="#ccccca" stroke-width="0.5" fill="#0000" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M27.5,50 q0,2.5 2.5,2.5 h30 v-10 h-30" stroke="#ccccca" stroke-width="0.5" fill="#0000" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M20,50 h10 q0,2 2,2 h10 c20,18 30,0 30,0 q7,-10 2,-22.5 h-2.5 q0,10 -10,10 h-32.25 q-10,0 -10,10" stroke="#0000" stroke-width="1" fill="#32668d" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M72.5,30 h-7.5 q-7.5,0 -7.5,-7.5 h7.5 q7.5,0 7.5,7.5" stroke="#0000" stroke-width="1" fill="#24446a" stroke-linecap="round" stroke-linejo3n="round"/> <path d="M72.5,30 h7.5 q7.5,0 7.5,-7.5 h-7.5 q-7.5,0 -7.5,7.5" stroke="#0000" stroke-width="1" fill="#24446a" stroke-linecap="round" stroke-linejo3n="round"/> <path fill="#24446a" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M45,53 c2.5,12 10,12 10,12 c-2.5,-5 0,-7.5 0,-7.5 c-3,-10 -10,-5 -10,-5; M45,53 c2.5,10 12.5,10 12.5,10 c-5,-7.5 -2.5,-7.5 -2.5,-7.5 c-3,-7.5 -10,-5 -10,-2.5; M45,53 c2.5,12 10,12 10,12 c-2.5,-5 0,-7.5 0,-7.5 c-3,-10 -10,-5 -10,-5; " dur="2s" repeatCount="indefinite" /> </path> <path fill="#52e3f6" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M40,35 c-15,-5 -0,-10 0,0; M32.5,27.5 c-7.5,6 -7.5,-2 0,0; M25,30 c-5,10 -5,0 0,0; " dur="2s" repeatCount="indefinite" /> </path> <path fill="#52e3f6" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M40,35 c15,-5 0,-10 0,0; M47.5,27.5 c7.5,6 7.5,-2 0,0; M55,30 c5,10 5,0 0,0; " dur="2s" repeatCount="indefinite" /> </path> <path fill="#f4f3ee" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M120,0 q10,0 10,10 q10,0 10,10 h-40 q0,-5 5,-5 q0,-5 5,-5q0,-5 5,-5q0,-5 5,-5; M-20,0 q10,0 10,10 q10,0 10,10 h-40 q0,-5 5,-5 q0,-5 5,-5q0,-5 5,-5q0,-5 5,-5; " dur="20s" repeatCount="indefinite" /> </path> <path fill="#FFFFFF" stroke="#0000" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" M-20,0 q5,0 5,5 q5,0 5,5 q5,0 5,5 q5,0 5,5 h-40 q0,-10 10,-10 q0,-10 10,-10; M120,0 q5,0 5,5 q5,0 5,5 q5,0 5,5 q5,0 5,5 h-40 q0,-10 10,-10 q0,-10 10,-10; " dur="20s" repeatCount="indefinite" /> </path> <circle cx="40" cy="50" r="0.5"/> <!--<rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/>--> </svg> <br> <br> </body> </html>