SVG Path Arcs (เป้-ชนิกานต์ 63070030)
✨ CHANIKARN KAMWONG
<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"> <!-- <path d="m17,73 --> <!-- h66" stroke="#83a071" stroke-linecap="round" stroke-linejoin="round"></path> --> <path fill="#d6944f" stroke="#d89651" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m20,40 a1,1.7 -10 0,1 19,-10 q10,-3 20,0 a1,1.7 10 0,1 19,10 q-0.5,2.5 0,5 q3,15 -1,30 q-27,5 -54,0 q-4,-15 -2,-30 q0.4,-2.5 -1,-5 " > <!-- <animate attributeName="d" values=" m30,50 a60,40 0 0,1 -10,-40 a60,40 0 0,1 10,40; m30,50 a60,40 0 0,1 0,-40 a60,40 0 0,1 0,40; m30,50 a60,40 0 0,1 -10,-40 a60,40 0 0,1 10,40; " dur="1s" repeatCount="indefinite" /> --> </path> <path fill="#f9f2e0" stroke="#f9f2e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m24.5,40 a1,1.7 -10 0,1 10.5,-10 z "> </path> <path fill="#f9f2e0" stroke="#f9f2e0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m24.5,40 a1,1.7 -10 0,1 10.5,-10 z " transform="scale(-1,1) translate(-99,0)"> </path> <circle cx="39" cy="49" r="3.5" fill="#4e281f"></circle> <circle cx="61" cy="49" r="3.5" fill="#4e281f"></circle> <ellipse cx="39" cy="40" rx="2.75" ry="2" fill="#f9f2e0" transform="rotate(21) translate(12.5,-15)"></ellipse> <ellipse cx="61" cy="40" rx="2.75" ry="2" fill="#f9f2e0" transform="rotate(-21) translate(-19,21)"></ellipse> <path fill="#f9f2e0" stroke="#f9f2e0" d="m43,56 c2,-2 9,-4 14,0 t2,1 6,-1 c2,-1 7,-2 7,5 c1,9 -19,19 -38,7 z"></path> <path fill="#f9f2e0" stroke="#f9f2e0" d="m43,56 c2,-2 9,-4 14,0 t2,1 6,-1 c2,-1 7,-2 7,5 c1,9 -19,19 -38,7 z" transform="scale(-1,1) translate(-100.3,0)"></path> <path d="m47,65 l3,-2 l3,2 l-2,2 " stroke="none" fill="#ef7489"></path> <path d="m47,65 a1,0.9 0 0,0 6,0 " stroke="#4e281f" stroke-linecap="round" stroke-linejoin="round" fill="#ef7489"></path> <path d="m44,62 a1,0.9 0 0,0 6,0 v-5" fill="none" stroke="#4e281f" stroke-linecap="round" stroke-linejoin="round"></path> <path d="m50,62 a1,0.9 0 0,0 6,0" fill="none" stroke="#4e281f" stroke-linecap="round" stroke-linejoin="round"></path> <path d="m46,56.5 q4,-2 8,0 q2,2 -1,4 q-2,1 -6,0 q-2.5,-2 -1,-4" stroke="none" fill="#4e281f" stroke-linecap="round" stroke-linejoin="round" transform="scale(1.1) translate(-4.7,-5)"></path> <!-- <path fill="#0000" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m20,70 a2,2 0 0,0 10,-50" ></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> </body> </html>