พรปวีณ์-อีฟ-63070111
✨ pornpawee
<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"> <rect fill="#186A3B" width="1000" height="1000" x="0" y="0" style="opacity:1"/> <rect fill="#000" width="50" height="1000" x="0" y="0" style="opacity:0.5"/> <!-- Code Here --> <path stroke-width="2" fill="blue" stroke="black" troke-linecap="round" stroke-linejoin="round" d=" M20,30 C20,0 80,0 80,30 v50 h-60 v-50 " > </path> <path stroke-width="2" fill="orange" stroke="black"troke-linecap="round" stroke-linejoin="round" d=" M20,30 C100,90 100,6 3,30 C20,80 80,0 80,30 " > </path> <circle fill="white" stroke="black" r="2" cx="70" cy="45"/> <path stroke-width="2" fill="blue" stroke="black"troke-linecap="round" stroke-linejoin="round" d=" M20,60 q0,0 -0,20 t20,0 "> </path> <path stroke-width="2" fill="blue" stroke="black"troke-linecap="round" stroke-linejoin="round" d=" M60,80 q20,20 20,0"> </path> <path stroke-width="2" fill="brown" stroke="black"troke-linecap="round" stroke-linejoin="round" d=" m40,80 h-20 v-9 h60 v7 h-60"> </path> <path stroke-width="2" fill="deeppink" stroke="black"troke-linecap="round" stroke-linejoin="round" d=" m80,80 h-20 v-12 h25 v12 h-30"/> <path stroke-width="2" fill="deeppink" stroke="black"troke-linecap="round" d=" m85,70 l-13,6 l-12,-7"/> <circle fill="white" stroke="black" r="1" cx="80" cy="76"/> <path stroke-width="2" fill="#d50000" stroke="black"troke-linecap="round" stroke-linejoin="round" d="m35,50 c-10,20 20,20 10,0 z"> </path> <path stroke-width="2" fill="red" stroke="black"troke-linecap="round" stroke-linejoin="round" stroke-linejoin="round" d="m35,50.7 h5 v9 v-9 h5"> </path> <path d="m24 75 h7" stroke-width="2" stroke="white" stroke="black" stroke-linecap="round" stroke-linejoin="round"/> <path d="m37 75 h7" stroke-width="2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="m50 75 h7" stroke-width="2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <svg> <animate attributeName="y" values="-100;100" dur="5s" repeatCount="indefinite" /> <path stroke-width="2" fill="red" stroke="black"troke-linecap="round" stroke-linejoin="round" d="m7,10 c-15,20 20,20 10,0 l-2,6 l-1,-14 l-6.2,7 z"/> <path stroke-width="2" fill="red" stroke="black"troke-linecap="round" stroke-linejoin="round" d="m60,10 c-15,20 20,20 10,0 l-2,6 l-1,-14 l-6.2,7 z"/> <path stroke-width="2" fill="red" stroke="black"troke-linecap="round" stroke-linejoin="round" d="m80,40 c-15,20 20,20 10,0 l-2,6 l-1,-14 l-6.2,7 z"/> <path stroke-width="2" fill="red" stroke="black"troke-linecap="round" stroke-linejoin="round" d="m20,60 c-15,20 20,20 10,0 l-2,6 l-1,-14 l-6.2,7 z"/> </svg> <!-- 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> </svg> <br> <br> <svg viewBox="0 0 100 100"> <rect fill="#F3EB07 " width="1000" height="20" x="0" y="0" style="opacity:1"/> <rect fill="#F3EB07 " width="1000" height="20" x="0" y="20" style="opacity:.9"/> <rect fill="#F3EB07 " width="1000" height="20" x="0" y="40" style="opacity:.7"/> <rect fill="#F3EB07 " width="1000" height="20" x="0" y="60" style="opacity:.5"/> <rect fill="#F3EB07 " width="1000" height="20" x="0" y="80" style="opacity:.3"/> <svg> <animate attributeName="x" values="-100;10;20;0;0;20;20;-50" dur="8s" repeatCount="indefinite" /> <path stroke-width="6" fill="#F9C047" stroke="brown" d="m60,60 c9,60 -70,2 0,0"/> <circle fill="white" r="2" cx="40" cy="70"></circle> <circle fill="black" r="1" cx="40" cy="70"></circle> <circle fill="white" r="5" cx="50" cy="70"></circle> <circle fill="black" r="3" cx="50" cy="70"></circle> <path stroke-width="6" fill="#EB7C06 " stroke="#37210A " d="m60,60 c1,10 -74,2 0,0"/></svg> <!path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m10,10 c-10,20 40,20 0,0"><!/path> <!path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m20,40 c-10,20 20,10 0,0"><!/path> <!path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m40,80 c-20,0 0,10 0,0"><!/path> <path fill="#459E1D " stroke="#153307 " stroke-width="1" stroke-linecap="round"> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m60,10 c-1,20 -40,2 0,0 "></path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m50,60 c-10,20 20,10 0,0"></path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round" d="m40,80 c-20,0 0,10 0,0"></path> <path fill="pink" stroke="deeppink" stroke-width="1" stroke-linecap="round"></path> <animate attributeName="d" values=" m10,10 c-10,20 80,20 0,0; m20,40 c-10,20 20,10 0,0; m40,80 c-20,0 0,10 0,0; m60,10 c-1,20 -40,2 0,0; m50,60 c-10,20 0,10 0,0; m70,80 c-20,0 0,10 0,0; m90,10 c-20,0 0,10 0,0; " dur="8s" repeatCount="indefinite" /> </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> </svg> <br> <br> <svg viewBox="0 0 100 100"> <path id="motionPath"fill="#04253D " stroke="#fff " stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" d=" m16.5,50 a25,30 0 1,1 70,0 a25,30 0 1,1 -70,0 " /> <rect fill="red" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> <path stroke-width="2" fill="#BA772F " stroke="black" stroke-linecap="round" d=" M20,70 C20,30 80,30 80,70 z " > </path> <path stroke-width="2" fill="#E49F57" stroke="#000" stroke-linecap="round" d=" M30,65 c-20,30 60,30 40,0 " > <circle fill="white" r="5" cx="40" cy="70"></circle> <circle fill="black" r="3" cx="40" cy="70"></circle> <circle fill="white" r="5" cx="60" cy="70"></circle> <circle fill="black" r="3" cx="60" cy="70"></circle> <animate attributeName="d" values=" M30,65 c-20,25 60,25 40,0; M30,65 c0,30 40,30 40,0; M30,65 c-20,25 60,25 40,0 " dur="1s" repeatCount="indefinite" /> </path> <circle fill="white" r="5" cx="40" cy="70"></circle> <circle fill="black" r="3" cx="40" cy="70"></circle> <circle fill="white" r="5" cx="60" cy="70"></circle> <circle fill="black" r="3" cx="60" cy="70"></circle> <svg> <animate attributeName="x" values="-100;0;0;0;50;-60;0;100" dur="4s" repeatCount="indefinite" /> <animate attributeName="y" values="-100;0;0;0;-50;0;50;100" dur="6s" repeatCount="indefinite" /> <animate attributeName="y" values="-100;0;0;0;0;0;0;100" dur="4s" repeatCount="indefinite" /> <animate attributeName="y" values="100;0;0;0;0;0;0;100" dur="4s" repeatCount="indefinite" /> <path stroke-width="2" fill="#C51EE9" stroke="#5C096E "troke-linecap="round" stroke-linejoin="round" d="m20,10 c-29,23 25,28 -0.2,1.5 l-6,15"/> <path stroke-width="2" fill="#C51EE9" stroke="#5C096E "troke-linecap="round" stroke-linejoin="round" d="m34,30 c-29,23 25,28 -0.2,1.5 l-6,15"/> <path stroke-width="2" fill="#C51EE9" stroke="#5C096E "troke-linecap="round" stroke-linejoin="round" d="m50,10 c-29,23 25,28 -0.2,1.5 l-6,15"/> <path stroke-width="2" fill="#C51EE9" stroke="#5C096E "troke-linecap="round" stroke-linejoin="round" d="m67,30 c-29,23 25,28 -0.2,1.5 l-6,15"/> <path stroke-width="2" fill="#C51EE9" stroke="#5C096E "troke-linecap="round" stroke-linejoin="round" d="m80,10 c-29,23 25,28 -0.2,1.5 l-6,15"/></svg> <!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>