SVG Plant
✨ APICHET KOMWATCHARAPONG
<html> <head> <title>Let's Start </title> <style> body{ background:#333; margin:1em; font-family: 'Mitr', sans-serif; } svg{ background:#26b99a; } </style> </head> <body> <svg viewbox="0 0 100 100"> <rect fill="#382016" x="20" y="90" width="10" height="10"></rect> <rect fill="#382016" x="70" y="90" width="10" height="10"></rect> <rect fill="#774836" x="10" y="5" width="80" height="90" rx="2"></rect> <rect fill="#553323" x="15" y="10" width="70" height="23" rx="2"></rect> <rect fill="#553323" x="15" y="38.5" width="70" height="23" rx="2"></rect> <rect fill="#553323" x="15" y="67" width="70" height="23" rx="2"></rect> <text font-size="2" fill="white" x="20" y="36.5">ฟ้า-วรรณษา</text> <text font-size="2" fill="white" x="43" y="36.5">อาร์ต-วุฒิพร</text> <text font-size="2" fill="white" x="65" y="36.5">เพลง-อนัญญา</text> <text font-size="2" fill="white" x="20" y="65">ไผ่ - ศิริบูรณ์</text> <text font-size="2" fill="white" x="41" y="65">พัตเตอร์-ภูริวัจน์</text> <text font-size="2" fill="white" x="65" y="65">เหน่ง-อภิเชฏฐ์</text> <text font-size="2" fill="white" x="18" y="93.5">โอ - วงศพัทธ์</text> <text font-size="2" fill="white" x="34" y="93.5">อั้ม-ปิยะเชษฐ์</text> <text font-size="2" fill="white" x="53" y="93.5">จีน - ทิวัตถ์</text> <text font-size="2" fill="white" x="70" y="93.5">ฟ่าง-ศุภชัย</text> <!-- phai --> <svg x="16" y="41.5" width="20" height="20" viewbox="0 0 50 50"> <!-- ใบ --> <ellipse cx="37" cy="25" rx="10" ry="5" fill="#34C166" transform="rotate(35)" stroke=black stroke-width=.6 /> <ellipse cx="6" cy="50" rx="10" ry="5" fill="#34C166" transform="rotate(-35)" stroke=black stroke-width=.6 /> <path d="M 25 47 L8,36" fill="transparent" stroke="black" stroke-width=.7 /> <path d="M 26 43 L41.2,31" fill="transparent" stroke="black" stroke-width=.7 /> <!-- หัว+ต้น --> <rect x=24 y=25 width=2 height=25 fill="#663C17" stroke=black stroke-width=.4 ></rect> <ellipse cx="25" cy="18" rx="14" ry="12" fill="#FFF800" stroke=black stroke-width=1 > <animate attributeName="ry" values="12;13;12;13;12" dur="4s" repeatCount="indefinite" /></ellipse> <!-- ตา --> <circle cx=21 cy=18 r=3 ></circle> <circle cx=21 cy=18 r=2.5 fill=#33363A></circle> <circle cx=29 cy=18 r=3 ></circle> <circle cx=29 cy=18 r=2.5 fill=#33363A ></circle> <circle cx=28 cy=17 r=.7 fill=white ></circle> <circle cx=20 cy=17 r=.7 fill=white></circle> <!-- ปาก --> <rect x=17 y=23 width=16 height=9 rx="2" fill=#C68510 stroke=black stroke-width=1 > <animate attributeName="height" values="9;8;9;8;9" dur="2s" repeatCount="indefinite" /> </rect> <rect x=20 y=25.5 width=10 height=4.5 rx="1" fill=#663C17 stroke=black stroke-width=1 > <animate attributeName="height" values="4.5;3.5;4.5;3.5;4.5" dur="2s" repeatCount="indefinite" /> </rect> </svg> <!-- pleng --> <svg x="61" y="13" width="20" height="20" viewBox="0 0 40 40"> <!-- ton --> <line x1="20" y1="20" x2="20" y2="40" stroke="#1E8449 " stroke-width="2" stroke-linecap="round" /> <!-- k1 --> <circle cx="20" cy="11" r="7" fill="#e24c4b"> <animate attributeName="r" values="7;7.5;7" dur="3s" repeatCount="indefinite" /></circle> <!-- k2 --> <circle cx="28" cy="18" r="7" fill="#e24c4b"><animate attributeName="r" values="7;7.5;7" dur="3s" repeatCount="indefinite" /></circle> <!-- k3 --> <circle cx="25" cy="27" r="7" fill="#e24c4b"><animate attributeName="r" values="7;7.5;7" dur="3s" repeatCount="indefinite" /></circle> <!-- k4 --> <circle cx="15" cy="27" r="7" fill="#e24c4b"><animate attributeName="r" values="7;7.5;7" dur="3s" repeatCount="indefinite" /></circle> <!-- k5 --> <circle cx="12" cy="18" r="7" fill="#e24c4b"><animate attributeName="r" values="7;7.5;7" dur="3s" repeatCount="indefinite" /></circle> <!-- kesorn --> <circle cx="20" cy="20" r="9" fill="#f4c533"></circle> <circle cx="20" cy="20" r="7.5" fill="#fed93d"></circle> <!-- eye --> <ellipse cx="16" cy="18" fill="black" rx=1.5 ry="2"></ellipse> <ellipse cx="15.5" cy="17.5" fill="white" rx=.5 ry=".5"></ellipse> <ellipse cx="24" cy="18" fill="black" rx=1.5 ry="2"></ellipse> <ellipse cx="23.5" cy="17.5" fill="white" rx=.5 ry=".5"></ellipse> <!-- mouth --> <ellipse cx="20" cy="24" fill="hsl(10,70%,40%)" rx=2.5 ry="2.5"> <animate attributeName="ry" values="2.5;2;2.5" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- neng --> <svg x="59.5" y="38.5" width="23" height="23" viewBox="0 0 40 40"> <line x1=14 y1=11 x2=13 y2=10 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=17 y1=9 x2=16 y2=7 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=20 y1=8 x2=20 y2=6 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=26 y1=11 x2=27 y2=10 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=24 y1=9 x2=25 y2=7 stroke=black stroke-width="1" stroke-linecap="round"></line> <!-- ก้าน --> <line x1=20 y1=29 x2=9 y2=20 stroke="#7cb777 " stroke-width="5" stroke-linecap="round" ></line> <line x1=20 y1=29 x2=31 y2=20 stroke="#7cb777 " stroke-width="5" stroke-linecap="round"></line> <!-- ต้น --> <line x1=20 y1=14 x2=20 y2=40 stroke="#35925d " stroke-width="15" stroke-linecap="round"></line> <!-- กระถาง --> <rect x=11.5 y=30 width=17 height=10 fill="#fd6f71" stroke="black" stroke-width=".5"></rect> <rect x=10 y=27 width=20 height=5 fill="#efedee" stroke="black" stroke-width=".5" ></rect> <!-- ตา --> <ellipse cx=17 cy=15 rx=1.5 ry=2 fill=black></ellipse> <ellipse cx=23 cy=15 rx=1.5 ry=2 fill=black></ellipse> <!-- ปาก --> <ellipse cx=20 cy=20 rx=2 ry=2 fill=black> <animate attributeName="rx" values="2;3;2" dur="3s" repeatCount="indefinite" /></ellipse> <!-- ตาขาว --> <circle cx=16.5 cy=14 r=0.5 fill=white></circle> <circle cx=22.5 cy=14 r=0.5 fill=white></circle> <!-- หนาม --> <line x1=14 y1=11 x2=13 y2=10 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=17 y1=9 x2=16 y2=7 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=20 y1=8 x2=20 y2=6 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=26 y1=11 x2=27 y2=10 stroke=black stroke-width="1" stroke-linecap="round"></line> <line x1=24 y1=9 x2=25 y2=7 stroke=black stroke-width="1" stroke-linecap="round"></line> </svg> <!-- o --> <svg x="14.5" y="72" width="18" height="18" viewBox="0 0 40 40"> <!-- leaf --> <ellipse cx="15" cy="35" fill="hsl(120, 100%, 40%)" rx=5 ry="3" stroke="#1E8449" stroke-width="1" > <animate attributeName="ry" values="3;1;3" dur="10s" repeatCount="indefinite" ></animate> </ellipse> <ellipse cx="25" cy="35" fill="hsl(120, 100%, 40%)" rx=5 ry="3" stroke="#1E8449" stroke-width="1"> <animate attributeName="ry" values="3;1;3" dur="10s" repeatCount="indefinite"></animate> </ellipse> <!-- body --> <rect x="19" y="20" width="2" height="20" fill="hsl(120, 100%, 40%)" stroke="#1E8449" stroke-width=".75" /> <!-- head --> <ellipse cx="20" cy="20" rx="15" ry="11" fill="brown"/> <ellipse cx="20" cy="20" rx="12" ry="9" fill="red"/> <ellipse cx="20" cy="20" rx="10" ry="7" fill="orange"/> <ellipse cx="20" cy="20" rx="8" ry="5" fill="yellow"/> <!-- eye --> <ellipse cx="15.5" cy="20" fill="black" rx=1 ry="2"></ellipse> <ellipse cx="24" cy="20" fill="black" rx=1 ry="2"></ellipse> <ellipse cx="15.5" cy="19" fill="white" rx=.5 ry=".5"></ellipse> <ellipse cx="24" cy="19" fill="white" rx=.5 ry=".5"></ellipse> <!-- mouth --> <ellipse cx="20" cy="23" fill="brown" rx=2.5 ry="1"> <animate attributeName="ry" values="1;0.5;1" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- aum --> <svg x="32.5" y="75" height="15" width="15" viewBox="0 0 40 40"> <rect x=14 y=17 width =12 height=25 fill="brown"></rect> <!-- ลำต้น--> <rect x=26 y=8 width =0.1 height=1 fill="brown"></rect> <rect x=15 y=6 width =0.1 height=1 fill="brown"></rect> <rect x=8 y=18 width =0.1 height=1 fill="brown"></rect> <rect x=35 y=14 width =0.1 height=1 fill="brown"></rect> <!--ก้านผล--> <circle cx=10 cy=10 r=12.5 fill="green"></circle> <circle cx=0 cy=15 r=12.5 fill="green"></circle> <circle cx=30 cy=10 r=12.5 fill="green"></circle> <circle cx=40 cy=15 r=12.5 fill="green"></circle> <!--ใบ --> <circle cx=26 cy=10 r=1 fill="red"></circle> <circle cx=15 cy=8 r=1 fill="red"></circle> <circle cx=8 cy=20 r=1 fill="red"></circle> <circle cx=35 cy=16 r=1 fill="red"></circle> <!-- ผลแดง --> </svg> <!-- fah --> <svg x="15" y="13" width="20" height="20" viewBox="0 0 40 40"> <!-- ton --> <line x1="20" y1="20" x2="20" y2="40" stroke="black" stroke-width="2" stroke-linecap="round" /> <!-- kib --> <!-- 1 --> <ellipse cx="20" cy="11" fill="#c1272d" rx=3 ry="8"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 2 --> <ellipse cx="20" cy="29" fill="#009245" rx=3 ry="8"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 3 --> <ellipse cx="4" cy="18.5" fill="#662d91" rx=3 ry="8" transform="rotate(-37)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 4 --> <ellipse cx="4" cy="37.25" fill="#8cc63f" rx=3 ry="8" transform="rotate(-37)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 5 --> <ellipse cx="-10.6" cy="34" fill="#fcee21" rx=3 ry="8" transform="rotate(-69)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 6 --> <ellipse cx="-12.3" cy="16.9" fill="#1b1464" rx=3 ry="8" transform="rotate(-69)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 7 --> <ellipse cx="-25.5" cy="6" fill="#2e3192" rx=3 ry="8.75" transform="rotate(-105)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 8 --> <ellipse cx="-25" cy="21" fill="#fbb03b" rx=3 ry="8" transform="rotate(-110)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 9 --> <ellipse cx="-27" cy="8" fill="#f15a24" rx=3 ry="8" transform="rotate(-139)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- 10 --> <ellipse cx="-29" cy="-11" fill="#006837" rx=3 ry="8" transform="rotate(-139)"> <animate attributeName="ry" values="8;7;8" dur="3s" repeatCount="indefinite" /></ellipse> <!-- head --> <circle cx="20" cy="20" r="8" fill="#fed93d" ></circle> <!-- mouth --> <!-- <rect x=13.75 y=19.55 width=12.5 height=6.75 fill="#fed93d"></rect> --> <circle cx="20" cy="20.5" r="6" fill="red"></circle> <!-- pidbung --> <rect x=13.75 y=15 width=12.5 height=7 fill="#fed93d"></rect> <rect x=17 y=14 width=6 height=2 fill="#fed93d"></rect> <!-- eye --> <ellipse cx="17" cy="18" fill="black" rx=1.9 ry="2"></ellipse> <ellipse cx="18" cy="17.5" fill="white" rx=.5 ry=".6"></ellipse> <ellipse cx="23" cy="18" fill="black" rx=1.9 ry=2></ellipse> <ellipse cx="24" cy="17.5" fill="white" rx=.5 ry=".6"></ellipse> </svg> <!-- art --> <svg x="38" y="13" height="20" width="20" viewBox="0 0 40 40"> <line x1="20" y1="20" x2="20" y2="40" stroke="black" stroke-width="2" stroke-linecap="round" /> <ellipse cx="20" cy="11" fill="#FFD333" rx=4 ry="8"></ellipse> <ellipse cx="20" cy="29" fill="#FFD333" rx=4 ry="8"></ellipse> <ellipse cx="4" cy="18.5" fill="#FFD333" rx=4 ry="8"transform="rotate(-37)"> </ellipse> <ellipse cx="4" cy="37.25" fill="#FFD333" rx=4 ry="8"transform="rotate(-37)"> </ellipse> <ellipse cx="-10.6" cy="34" fill="#FFD333" rx=4 ry="8"transform="rotate(-69)"> </ellipse> <ellipse cx="-12.3" cy="16.9" fill="#FFD333" rx=4 ry="8"transform="rotate(-69)"> </ellipse> <ellipse cx="-25.5" cy="6" fill="#FFD333" rx=4 ry="8"transform="rotate(-105)"> </ellipse> <ellipse cx="-25" cy="21" fill="#FFD333" rx=4 ry="8"transform="rotate(-110)"> </ellipse> <ellipse cx="-27" cy="8" fill="#FFD333" rx=4 ry="8"transform="rotate(-139)"> </ellipse> <ellipse cx="-29" cy="-11" fill="#FFD333" rx=4 ry="8"transform="rotate(-139)"> </ellipse> <circle cx="20" cy="20"r="8"fill= "#FCE7B2" /> <circle cx="17" cy="18" r="1.3" fill="#black"/> <circle cx="23" cy="18" r="1.3" fill="black"/> <ellipse cx="18" cy="18" fill="white" rx="0.7" ry="0.4"/> <ellipse cx="24" cy="18" fill="white" rx="0.7" ry="0.4"/> <ellipse cx="20" cy="23" fill="white" rx="1.5" ry="1.2"> <animate attributeName="rx" values="2;3;1"dur="3s"repeatCount="indefinite" /> <animate attributeName="ry" values=" 1;2;1" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- jean --> <svg x="45" y="69" height="25" width="25" viewbox="0 0 100 100"> <ellipse cx="50" cy="35" rx="20" ry="" fill="yellow"/> <ellipse cx="50" cy="43" rx="17" ry="11" fill="hsl(52, 100%, 86%)"/> <rect x="35" y="35" rx="10" ry="8" width="30" height="50" fill="hsl(52, 100%, 86%)"></rect> <circle cx="43" cy="29" r="2" fill="orange"></circle> <circle cx="45" cy="20" r="2" fill="orange"></circle> <circle cx="55" cy="27" r="2" fill="orange"></circle> <circle cx="65" cy="33" r="2" fill="orange"></circle> <circle cx="34" cy="33" r="2" fill="orange"></circle> <circle cx="65" cy="25" r="2" fill="orange"></circle> <circle cx="53" cy="20" r="2" fill="orange"></circle> <circle cx="37" cy="24" r="2" fill="orange"></circle> <ellipse cx="45" cy="40" rx=2 ry="4" fill=""/> <ellipse cx="55" cy="40" rx=2 ry="4" fill=""/> <ellipse cx="55" cy="39" rx=1 ry="2" fill="white"/> <ellipse cx="45" cy="39" rx=1 ry="2" fill="white"/> <ellipse cx="50" cy="50" rx="3" ry="" fill=""/> <rect x="37" y="47"width="25" height="3" fill="hsl(52, 100%, 86%)"></rect> </svg> <!-- putter --> <svg x="38.5" y="41.5" height="20" width="20" viewBox="0 0 40 40"> <!-- leaf --> <ellipse cx="15" cy="35" fill="hsl(120, 100%, 40%)" rx=5 ry="3" stroke="#1E8449" stroke-width="1" > <animate attributeName="ry" values="3;1;3" dur="10s" repeatCount="indefinite" ></animate> </ellipse> <ellipse cx="25" cy="35" fill="hsl(120, 100%, 40%)" rx=5 ry="3" stroke="#1E8449" stroke-width="1"> <animate attributeName="ry" values="3;1;3" dur="10s" repeatCount="indefinite"></animate> </ellipse> <!-- body --> <rect x="19" y="20" width="2" height="20" fill="#009900" stroke="black" stroke-width=".75" /> <!-- head --> <ellipse cx="11" cy="25" fill="#1aff1a" stroke-width="0.5" stroke="black" rx=8 ry="6"></ellipse> <ellipse cx="28" cy="25" fill="#1aff1a" stroke-width="0.5" stroke="black" rx=8 ry="6"></ellipse> <ellipse cx="20" cy="9" fill="#1aff1a" stroke-width="0.5" stroke="black" rx=7 ry="8"></ellipse> <circle cx="20" cy="20" r="8" stroke="black" stroke-width="1" fill="#66ff66" /> <!-- eye --> <ellipse cx="17.5" cy="18" fill="black" rx=1 ry="2"></ellipse> <ellipse cx="22" cy="18" fill="black" rx=1 ry="2"></ellipse> <ellipse cx="17.5" cy="17" fill="white" rx=.5 ry=".5"></ellipse> <ellipse cx="22" cy="17" fill="white" rx=.5 ry=".5"></ellipse> <!-- mouth --> <ellipse cx="20" cy="24" fill="black" rx1 ry="1"> <animate attributeName="ry" values="1;0.5;1" dur="3s" repeatCount="indefinite" /> </ellipse> </svg> <!-- fang --> <svg x="62" y="65" height="25" width="25" viewBox="0 0 40 40"> <rect fill="#875a48" width="6" height="20" x="17" y="20"></rect> <rect fill="#54381b" width="0.5" height="2" x="14.8" y="25"></rect> <rect fill="#54381b" width="0.5" height="2" x="10.7" y="24"></rect> <rect fill="#54381b" width="0.5" height="2" x="24.7" y="25"></rect> <rect fill="#54381b" width="0.5" height="2" x="28.7" y="24"></rect> <circle cx="15" cy="12" fill="#0f6929" r="4"></circle> <circle cx="25" cy="12" fill="#0f6929" r="4"></circle> <circle cx="15" cy="20" fill="#168035" r="6"></circle> <circle cx="25" cy="20" fill="#105725" r="6"></circle> <circle cx="20" cy="12" fill="#106128" r="6"></circle> <circle cx="20" cy="30" fill="#3d2914" r="1"></circle> <ellipse cx="15" cy="28" fill="#fcba03" rx="1" ry="1.5"></ellipse> <ellipse cx="11" cy="27" fill="#fcba03" rx="1" ry="1.5"></ellipse> <ellipse cx="25" cy="28" fill="#fcba03" rx="1" ry="1.5"></ellipse> <ellipse cx="29" cy="27" fill="#fcba03" rx="1" ry="1.5"></ellipse> </svg> </svg> </body> </html>