Recaption! SVG Curve (Branch 7864)
✨ นางสาวยมลพร เชิดบำรุง
<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"> <pattern id="isometric" width="10" height="5" viewBox="0 0 100 " patternUnits="userSpaceOnUse" x="0" y="0" > <g stroke="#0004" stroke-dasharray="2 1" stroke-width=".25"> <path d="m0,0 v100"/> <path d="m10,0 v100"/> </g> <path d="m5,0 v100" stroke-width=".25" stroke="#0004" stroke-dasharray=".5"/> <g stroke-width=".25" stroke="#0004"> <path d="m0,0 l10,5"/> <path d="m10,0 l-10,5"/> </g> </pattern> <!-- Code Here --> <!-- Grid --> <defs> <pattern id="grid" viewBox="0,0,10,10" width="1%" height="1%"> <rect width="20" height="20" fill="#00E5FF"></rect> <circle r="0.5" cx="0" cy="1" fill="#0D47A1"/> <circle r="0.5" cx="2" cy="1" fill="#0D47A1"/> <circle r="0.5" cx="4" cy="1" fill="#0D47A1"/> <circle r="0.5" cx="6" cy="1" fill="#0D47A1"/> <circle r="0.5" cx="8" cy="1" fill="#0D47A1"/> <circle r="0.5" cx="10" cy="1" fill="#0D47A1"/> <!-- --> <circle r="0.5" cx="1" cy="3" fill="#0D47A1"/> <circle r="0.5" cx="3" cy="3" fill="#0D47A1"/> <circle r="0.5" cx="5" cy="3" fill="#0D47A1"/> <circle r="0.5" cx="7" cy="3" fill="#0D47A1"/> <circle r="0.5" cx="9" cy="3" fill="#0D47A1"/> <!-- --> <circle r="0.5" cx="0" cy="5" fill="#0D47A1"/> <circle r="0.5" cx="2" cy="5" fill="#0D47A1"/> <circle r="0.5" cx="4" cy="5" fill="#0D47A1"/> <circle r="0.5" cx="6" cy="5" fill="#0D47A1"/> <circle r="0.5" cx="8" cy="5" fill="#0D47A1"/> <circle r="0.5" cx="10" cy="5" fill="#0D47A1"/> <!-- --> <circle r="0.5" cx="1" cy="7" fill="#0D47A1"/> <circle r="0.5" cx="3" cy="7" fill="#0D47A1"/> <circle r="0.5" cx="5" cy="7" fill="#0D47A1"/> <circle r="0.5" cx="7" cy="7" fill="#0D47A1"/> <circle r="0.5" cx="9" cy="7" fill="#0D47A1"/> <!-- --> <circle r="0.5" cx="0" cy="9" fill="#0D47A1"/> <circle r="0.5" cx="2" cy="9" fill="#0D47A1"/> <circle r="0.5" cx="4" cy="9" fill="#0D47A1"/> <circle r="0.5" cx="6" cy="9" fill="#0D47A1"/> <circle r="0.5" cx="8" cy="9" fill="#0D47A1"/> <circle r="0.5" cx="10" cy="9" fill="#0D47A1"/> <!-- <circle r="0.5" cx="" cy="4" fill="#0D47A1"/> --> <!-- <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> <pattern id="dot" viewBox="0,0,8,8" width="10%" height="10%"> <circle r="0.5" cx="1" cy="2" fill="#0D47A1"/> </pattern> </defs> <rect fill="url(#grid)" width="1000" height="1000" x="0" y="0" style="opacity:.5"/> <path d="M0,20 l25,15 l35,-35 h-65 l5,20"stroke="#000" stroke-width="0.2" fill="#EC407A"/> <path d="M0,17 l20,13 l-20,-20" stroke="#000" stroke-width="0.2" fill="#673AB7"/> <path d="M0,9 l23,23 l-20,-32 h-3 v19" stroke="#000" stroke-width="0.2" fill="#673AB7"/> <path d="M6,0 l18,32 l-1,-10 l6,7 l-9,-20 l6,1 l-8,-10" stroke="#000" stroke-width="0.2" fill="#673AB7"/> <path d="M22,0 l5,11 l-6 ,-1 l9,18 l3,-28"stroke="#000" stroke-width="0.2" fill="#673AB7"/> <path d="M34,0 l-3,28 l10,-28"stroke="#000" stroke-width="0.2" fill="#673AB7"/> <path d="M44,0 l-11,26 l25,-26"stroke="#000" stroke-width="0.2" fill="#673AB7"/> <!-- <path d="M27,33 l-22,-11 l25,8"stroke="#000" stroke-width="0.2" fill="#00E5FF"/> --> <circle r="2" cx="4" cy="0" fill="#00004d"/> <circle r="2" cx="12" cy="0" fill="#00004d"/> <circle r="2" cx="20" cy="0" fill="#00004d"/> <circle r="2" cx="28" cy="0" fill="#00004d"/> <circle r="2" cx="36" cy="0" fill="#00004d"/> <circle r="2" cx="44" cy="0" fill="#00004d"/> <circle r="2" cx="52" cy="0" fill="#00004d"/> <circle r="2" cx="0" cy="6" fill="#00004d"/> <circle r="2" cx="8" cy="6" fill="#00004d"/> <circle r="2" cx="16" cy="6" fill="#00004d"/> <circle r="2" cx="24" cy="6" fill="#00004d"/> <circle r="2" cx="32" cy="6" fill="#00004d"/> <circle r="2" cx="40" cy="6" fill="#00004d"/> <circle r="2" cx="48" cy="6" fill="#00004d"/> <circle r="2" cx="4" cy="12" fill="#00004d"/> <circle r="2" cx="12" cy="12" fill="#00004d"/> <circle r="2" cx="20" cy="12" fill="#00004d"/> <circle r="2" cx="28" cy="12" fill="#00004d"/> <circle r="2" cx="36" cy="12" fill="#00004d"/> <circle r="2" cx="44" cy="12" fill="#00004d"/> <circle r="2" cx="0" cy="18" fill="#00004d"/> <circle r="2" cx="8" cy="18" fill="#00004d"/> <circle r="2" cx="16" cy="18" fill="#00004d"/> <circle r="2" cx="24" cy="18" fill="#00004d"/> <circle r="2" cx="32" cy="18" fill="#00004d"/> <circle r="2" cx="40" cy="17.5" fill="#00004d"/> <circle r="2" cx="12" cy="25" fill="#00004d"/> <circle r="2" cx="20" cy="25" fill="#00004d"/> <circle r="2" cx="28" cy="25" fill="#00004d"/> <path d="M27,33 l-22,-11 l25,8"stroke="#000" stroke-width="0.2" fill="#00E5FF"/> <circle r="2" cx="8" cy="53" fill="#00004d"/> <circle r="1.5" cx="8" cy="55" fill="#00004d"/> <!-- <svg width="50" height="50" viewbox="0 0 100 100"> --> <path d="M8,54 l-2.5,1 l0.5,3" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l2.5,1 l-0.5,3" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l-3.5,0.4 l-1.5,-4" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l-3.3,-0.2 l-1,-3.6" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l-2.8,-0.3 l-0.5,-3.5" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l-2.5,-0.4 l0.3,-4" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l3.5,0.4 l1.5,-4" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l3.3,-0.2 l1,-3.6" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l2.8,-0.3 l0.5,-3.5" stroke="#000" stroke-width="0.3" fill="transparent"/> <path d="M8,54 l2.5,-0.4 l0.3,-4" stroke="#000" stroke-width="0.3" fill="transparent"/> <circle r="2" cx="8" cy="53" fill="#00004d"/> <circle r="1.5" cx="8" cy="55" fill="#00004d"/> <path d="M58,100 l-3,-6 v-20 l15,-5 l-2,15 l-5,3 l-1,6 l-1.4,4 l-0.5,3" fill="#0c091e"/> <path d="M57,100 l-2,-4 Q50,93 54,72 l2,2 Q54,85 59,100"stroke="#000" stroke-width="0.5"fill="#f11b3c"/> <path d="M57.3,100 l-2,-5 Q51,91 54.5,71 l1,1 Q53,87 58.5,100" fill="#a00f29"/> <path d="M46,35 l1.5,2 l3,-2 l-2,-5"stroke="#000" stroke-width="0.5"fill="#910824"/> <path d="M49,34 Q43,43 48,55 Q50,58 49,62 Q48,65 52,70 Q52.3,70.3 52,71.5 Q51.5,72 53,74 Q54,75 56,75 Q64,73 78,66"stroke="#000"stroke-width="0.5" fill="#1a0b32"/> <path d="M49,34 Q43,43 48,55 Q50,58 49,62 Q48,65 52,70 Q52.3,70.3 52,71.5 Q51.5,72 53,74 Q54,75 56,75 Q64,73 65,71.8 Q68,69 64,53"fill="#261040"/> <path d="M52,35 Q48,53 60,74"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M53,55 Q58,64 70,65"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M55,50 Q62,58 70,52"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M47.7,36 Q49.5,39 53,38.5 " stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M46.2,50 Q50,52 51.5,49"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M48.6,63 Q51,59 53.5,60 Q54,58 56,58"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M58,40 Q48,50 52,59 Q68,60 59,40"stroke="#000" stroke-width="0.5" fill="#990d23"/> <path d="M58,42 Q49,51 53,58 Q65,58.5 58.8,42" stroke="#fff" stroke-width="0.5" fill="#fff"/> <path d="M51.8,70 Q53,67 57,68 Q60,63 64.5,64 Q63,58 71,53"stroke="#fff" stroke-width="0.3" fill="transparent"/> <path d="M54,46 Q59,49 60,56 Q62.47,54 60,45 Q57,41 54,46" fill="#958fab"/> <path d="M46,35 Q44,31 46,29 Q50,29.8 58,24 Q74,12 90,20 Q92,21.5 93,25 Q89,55 93,60 Q95,64 93,70 Q93,71 90,73 Q65,80 60,100 Q63,82 67,81 Q72,63 60,48 Q52,40 48,32" stroke="#000" stroke-width="0.5"fill="#910824"/> <path d="M50,28.9 Q49,33 55,37 Q76,53 75,65 Q77,69 93.5,64 Q94,62 92,59.5 Q89,50 92.3,25 Q93,23 90,20.5 Q74,13 58,25 Q55,27 50,29"fill="#e71739"/> <!-- <path d="M30,70 l3,-5 l3,3 l4,-4 "stroke="#e63d54" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/> <path d="M25,40 l3,4 l3,-3 l4,4 "stroke="#e63d54" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/> --> <!-- <path d="M55,10 l-3,4 l3,3 l-3,4 "stroke="#e63d54" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="transparent"/> --> <path fill="#0000" stroke="#e63d54" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" > <animate attributeName="d" values="M80,80 l3,4 l-3,3 l3,4 l-1,2 ; M30 70 l3 -5 l3 3 l4 -4 ; M25,40 l3 4 l3 -3 l4 4 l2 -2 ; M55,10 l-3,4 l3,3 l-3,4 ; " dur="2.5s" repeatCount="indefinite" /> <!-- <animate attributeName="r" values="2;2;3;4;3;2;2" dur="2s" repeatCount="indefinite" /></circle> --> <!-- <rect fill="url(#isometric)" width="1000" height="1000"/> --> <!-- <animate attributeName="height" values="4;5;6" dur="2.5s" repeatCount="indefinite" /> </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=" m20,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="m40,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 " > <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 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>