SVG Path Arcs : Fook (63070034) AND Loogtarn (6307..
✨ นางสาวจุฑามาศ ชนาฐิติกุล
<html> <head> <title>Let's Start </title> <style> body{ background:#004D40; margin:1em; font-family:sans-serif; color:white; } svg{ background:url(https://64.media.tumblr.com/22d2a3887d03151c823e9ea3dc4bbe6f/0cd8a1eca8b3cccb-45/s400x600/feb9dcc73518f7a5bba8130f54680431803553ca.gifv) no-repeat center; background-size: cover; width: 100%; } </style> </head> <body> <svg viewBox="0 0 100 100"> <!-- รังผึ้ง --> <g transform="translate(1,20)"> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m38,29 a2,1 0 0,0 20,0 a2,1 0 0,0 -20,0 "> </path> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m33,22 a2,1 0 0,0 30,0 a2,1 0 0,0 -30,0 "> </path> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m30.5,15 a2,1 0 0,0 35,0 a2,1 0 0,0 -35,0 "> </path> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m33,10 a2,1 0 0,0 30,0 a2,1 0 0,0 -30,0 "> </path> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m35.4,5 a2,1 0 0,0 25,0 a2,1 0 0,0 -25,0 "> </path> <path fill="#FFCA28" stroke="#FB8C00" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m40,0 a2,1 0 0,0 15,0 a2,1 0 0,0 -15,0 "> </path> <g transform="translate(45,12)"> <path fill="#3E2723" stroke="#795548" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d=" m2,0 q-6,7 0,10 q3,1 7,0 q6,-8 -6,-10z "> </path> </g> </g> <!-- ก้านรังผึ้ง --> <path fill="#795548" stroke="#BF360C" stroke-width="0" stroke-linecap="round" stroke-linejoin="round" d=" m48,3 l-1,15 a1,2 50 0,0 4,0z "> </path> <!-- กิ่งไม้ --> <path fill="#795548" stroke="#BF360C" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d=" m0,8 l30,-5 l40,0z "> </path> <!-- ใบไม้ --> <path fill="#43A047" stroke="#1B5E20" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" d=" m10,8.5 q6,-2 3,4 q-6,-2 -3,-4z M20,1 q1,7 -4,4 q-3,-3 4,-4 "> </path> <g transform="scale(0.7) translate(80,0)"> <path fill="#43A047" stroke="#1B5E20" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" d=" m20,4 a2,1 0 0,1 3,0 q3,2 -1,6 q-6,-4 -2,-6z "> </path> <path fill="#43A047" stroke="#1B5E20" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" d=" m10,6.5 a2,1 0 0,1 3,0 q3,2 -1,6 q-6,-4 -2,-6z "> </path> <path fill="#43A047" stroke="#1B5E20" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round" d=" m16,8 a2,1 0 0,1 3,0 q3,2 -1,6 q-6,-4 -2,-6z "> </path> </g> <defs> <pattern id="Bee"> </pattern> </defs> <!-- ตัวที่ 1 --> <g transform="scale(0.2) translate(50,80)"> <!-- ผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m42,40 a3,1.5 0 0,0 20,0 a3,1.5 0 0,0 -20,0 "></path> <!-- ลายผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="m46, 37.2 s8, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="m57, 36 s5, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="m51, 36.8 s5, 16 0 0,0 -20, 0 "> </path> <!-- เข็มผึ้ง--> <path d="M39 38 l3 1 l2 5 z" > </path> <!--ปีก--> <circle cx="54" cy="31" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> <circle cx="49" cy="33" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> </g> <!-- ตัวที่ 2 --> <g transform="scale(0.2) translate(220,115)"> <!-- ผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m42,40 a3,1.5 0 0,0 20,0 a3,1.5 0 0,0 -20,0 "></path> <!-- ลายผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="m46, 37.2 s8, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="m57, 36 s5, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="m51, 36.8 s5, 16 0 0,0 -20, 0 "> </path> <!-- เข็มผึ้ง--> <path d="M39 38 l3 1 l2 5 z" > </path> <!--ปีก--> <circle cx="54" cy="31" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> <circle cx="49" cy="33" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> </g> <!-- ตัวที่ 3 --> <g transform="scale(0.3) translate(85,150)"> <!-- ผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m42,40 a3,1.5 0 0,0 20,0 a3,1.5 0 0,0 -20,0 "></path> <!-- ลายผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="m46, 37.2 s8, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="m57, 36 s5, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="m51, 36.8 s5, 16 0 0,0 -20, 0 "> </path> <!-- เข็มผึ้ง--> <path d="M39 38 l3 1 l2 5 z" > </path> <!--ปีก--> <circle cx="54" cy="31" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> <circle cx="49" cy="33" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> </g> <!-- ตัวที่ 4 --> <g transform="scale(0.4) translate(20,80)"> <!-- ผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m42,40 a3,1.5 0 0,0 20,0 a3,1.5 0 0,0 -20,0 "></path> <!-- ลายผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="m46, 37.2 s8, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="m57, 36 s5, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="m51, 36.8 s5, 16 0 0,0 -20, 0 "> </path> <!-- เข็มผึ้ง--> <path d="M39 38 l3 1 l2 5 z" > </path> <!--ปีก--> <circle cx="54" cy="31" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> <circle cx="49" cy="33" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> </g> <!-- ตัวที่ 5 --> <g transform="scale(0.3) translate(200,105)"> <!-- ผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d=" m42,40 a3,1.5 0 0,0 20,0 a3,1.5 0 0,0 -20,0 "></path> <!-- ลายผึ้ง--> <path fill="#ff0" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="m46, 37.2 s8, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" d="m57, 36 s5, 15 0 0,0 -20, 0 "> </path> <path fill="#ff0" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="m51, 36.8 s5, 16 0 0,0 -20, 0 "> </path> <!-- เข็มผึ้ง--> <path d="M39 38 l3 1 l2 5 z" > </path> <!--ปีก--> <circle cx="54" cy="31" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> <circle cx="49" cy="33" r="5" stroke="black" stroke-width="1.2" fill="#03befc"/> </g> <!-- 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>