นายจักราภัทร สุดใจ 63070016
✨ Chakraphat Sudjai
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family:sans-serif; } svg{ background:#f12e00; } </style> </head> <body> <svg viewBox="0 0 100 100"> <path stroke-width="1" stroke="gold" stroke-linecap="round" d=" M20,30 C40,10 60,10 80,30 " > <animate attributeName="d" values=" M20,30 C40,10 60,10 80,30; M20,40 C40,20 60,20 80,40; M20,50 C40,30 60,30 80,50; " dur="4s" repeatCount="indefinite" /> </path> <path stroke-width="1" stroke="gold" stroke-linecap="round" d=" M20,50 c-0,20 60,20 60,0 " > </path> <path stroke-width="0.1" stroke="black" stroke-linecap="round" fill="white" d=" M20,80 q5 -14 10 0 M30,80 q5 -14 10 0 M40,80 q5 -14 10 0 M50,80 q5 -14 10 0 M60,80 q5 -14 10 0 M70,80 q5 -14 10 0 " > <animate attributeName="d" values=" M20,80 q5 -14 10 0 M30,80 q5 -14 10 0 M40,80 q5 -14 10 0 M50,80 q5 -14 10 0 M60,80 q5 -14 10 0 M70,80 q5 -14 10 0; M20,60 q5 -14 10 0 M30,60 q5 -14 10 0 M40,60 q5 -14 10 0 M50,60 q5 -14 10 0 M60,60 q5 -14 10 0 M70,60 q5 -14 10 0; " dur="4s" repeatCount="indefinite" /> </path> <path stroke-width="0.1" stroke="black" stroke-linecap="round" fill="white" d=" M20,10 q5 14 10 0 M30,10 q5 14 10 0 M40,10 q5 14 10 0 M50,10 q5 14 10 0 M60,10 q5 14 10 0 M70,10 q5 14 10 0 " > <animate attributeName="d" values=" M20,10 q5 14 10 0 M30,10 q5 14 10 0 M40,10 q5 14 10 0 M50,10 q5 14 10 0 M60,10 q5 14 10 0 M70,10 q5 14 10 0; M20,35 q5 14 10 0 M30,35 q5 14 10 0 M40,35 q5 14 10 0 M50,35 q5 14 10 0 M60,35 q5 14 10 0 M70,35 q5 14 10 0; " dur="4s" repeatCount="indefinite" /> </path> <path stroke-width="0.5" stroke="gold" stroke-linecap="round" fill="brown" d=" M15,40 C15,30 80,30 80,40 " > <animate attributeName="d" values=" M15,40 C10,30 85,30 85,40; M15,50 C15,40 85,40 85,50; M15,50 C15,45 85,45 85,50 ; " dur="4s" repeatCount="indefinite" /> </path> <path stroke-width="0.5" stroke="gold" stroke-linecap="round" fill="brown" d=" M15,40 c-0,10 70,10 70,0 " > <animate attributeName="d" values=" M15,40 c-0,10 70,10 70,0; M15,50 c-0,10 70,10 70,0; M15,50 c-0,10 70,10 70,0; " dur="4s" repeatCount="indefinite" /> </path> <circle r="1" fill="red" cx="20" cy="70"/> <circle r="1" fill="orange" cx="20" cy="30"/> <circle r="1" fill="green" cx="50" cy="30"/> <circle r="1" fill="deepskyblue" cx="80" cy="30"/> <circle r="1" fill="purple" cx="80" cy="70"/> <!-- 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"/> <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="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> </svg> <br> <br> <svg viewBox="0 0 100 100"> <path stroke="deeppink" stroke-width="2" d=" m10,70 q5,-20 10,0 t10,0 t10,0 t10,0 t10,0 t10,0 t10,0 t10,0 " ></path> <path stroke ="deeppink" stroke-width="2" stroke-linecap="round" fill="yellow" d=" m10,10 q10,0 10,10 t10,10 t10,10 t10,10 t10,10 t10,10 t10,10 t10,10 " > </path> <path stroke ="deepskyblue" stroke-width="2" stroke-linecap="round" fill="lime" d=" m10,70 C0,0 100,100 80,70 s-0,-20 5,00 " > </path> <circle r="1" fill="red" cx="20" cy="70"/> <circle r="1" fill="orange" cx="20" cy="30"/> <circle r="1" fill="green" cx="50" cy="30"/> <circle r="1" fill="deepskyblue" cx="80" cy="30"/> <circle r="1" fill="purple" cx="80" cy="70"/> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m30,10 c-10,20 10,20 0,0 " > </path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m60,40 c-10,20 20,10 0,0 " > </path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="40,80 c-20,0 0,10 0,0 " > </path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round"> <animate attributeName="d" values=" m30,10 c-10,20 10,20 0,0; m60,40 c-10,20 20,10 0,0; m40,80 c-20,0 0,10 0,0; m30,10 c-10,20 10,20 0,0; " dur="4s" repeatCount="indefinite" /> </path> <!-- 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="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> </svg> <br> <br> <svg viewBox="0 0 100 100"> <path stroke-width="2" stroke="gold" stroke-linecap="round" d=" M20,70 C20,30 70,30 80,70 s0,0 20,0 " > </path> <path stroke-width="2" stroke="blue" stroke-linecap="round" d=" M30,65 c-20,30 60,30 40,0 " > </path> <circle r="1" fill="red" cx="20" cy="70"/> <circle r="1" fill="purple" cx="80" cy="70"/> <circle r="1" fill="green" cx="50" cy="30"/> <circle r="1" fill="orange" cx="20" cy="30"/> <circle r="1" fill="deepskyblue" cx="80" cy="30"/> <!-- 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="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> </svg> </body> </html>