Line theme Group D P’Arin (Copy 7744)
✨ YAMONPORN CHERTBAMRUNG
<html> <head> <title>Let's Start </title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Kanit:wght@600&display=swap" rel="stylesheet"> <style> body{ background:hsl(250,100%,75%); overflow:hidden; margin:0; font-family:sans-serif; } svg{ background:transparent; } .bar{ margin:0; width:100%; height:80px; background:hsl(100,100%,40%); box-shadow: 0px 2px 20px 0px; } .text{ margin-left:40px; padding:7px; font-size:45px; color:white; font-family: 'Kanit', sans-serif; text-shadow: 3px 4px 10px #000000; } </style> </head> <body> <div class="bar"> <div class="text"> LINE THEME </div> </div> <!-- red palm--> <svg viewBox="-30 0 310 50"> <svg viewBox="0 0 40 40"> </svg> <ellipse cx="20" cy="23" rx="16" ry="16" fill="hsl(0,100%,45%)" /> <svg x="21" y="9"> <path d="M3,2 L1,6" stroke="black"/> </svg> <svg x="14" y="9"> <path d="M3,2 L5,6" stroke="black"/> </svg> <svg> <ellipse cx="15" cy="19" rx="3" ry="5" fill="hsl(0,100%,0%)" /> </svg> <svg x="11"> <ellipse cx="15" cy="19" rx="3" ry="5" fill="hsl(0,100%,0%)" /> </svg> <ellipse cx="20" cy="28" fill="hsl(0,100%,0%)" rx="3" ry="6"> <animate attributeName="ry" values="2;3;6;3;2" dur="5s" repeatCount="indefinite" /> </ellipse> <!-- kero modji--> <svg viewBox="34 0 40 50"> <radialGradient id="lime" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:hsl(90, 100%, 50%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(90, 88%, 48%);stop-opacity:1" /> </radialGradient> <svg x="18"> <ellipse cx="15" cy="15" rx="6" ry="7" fill="hsl(90, 88%, 48%)" > <animate attributeName="fill" values="#f584e1;#b184f5;#84c9f5;#84f5ce;#88f584;#d4f584;#f5ab84" dur="3s" repeatCount="indefinite" /></ellipse> </svg> <ellipse cx="15" cy="15" rx="6" ry="7" fill="hsl(90, 88%, 48%)" > <animate attributeName="fill" values="#f584e1;#b184f5;#84c9f5;#84f5ce;#88f584;#d4f584;#f5ab84" dur="3s" repeatCount="indefinite" /></ellipse> <ellipse cx="24" cy="25" rx="16" ry="13" fill="url(#lime)" > <animate attributeName="fill" values="#f584e1;#b184f5;#84c9f5;#84f5ce;#88f584;#d4f584;#f5ab84" dur="3s" repeatCount="indefinite" /></ellipse> <svg x="18" y="25" width="30"> <path d="M0,2 C6,0 6 0 12,2" stroke="black" fill="transparent"/> </svg> <svg x="17" y="24.5"> <path d="M-5,-5 C2,1 2 2 0,4" stroke="black" fill="transparent"/> </svg> <svg x="27.5" y="24.5"> <path d="M5,-5 C2,2 2 2 3,4" stroke="black" fill="transparent"/> </svg> <svg> <!-- <ellipse cx="15" cy="15" rx="6" ry="7" fill="url(#lime)" /> --> <ellipse cx="15" cy="15" rx="4" ry="5" fill="white" /> <ellipse cx="15" cy="15" rx="3" ry="4" fill="black" ><animate attributeName="ry" values="4;3;2;3;4" dur="3s" repeatCount="indefinite" /></ellipse> </svg> <svg x="18"> <!-- <ellipse cx="15" cy="15" rx="6" ry="7" fill="url(#lime)" /> --> <ellipse cx="15" cy="15" rx="4" ry="5" fill="white" /> <ellipse cx="15" cy="15" rx="3" ry="4" fill="black" ><animate attributeName="ry" values="4;3;2;3;4" dur="3s" repeatCount="indefinite" /></ellipse> </svg></svg> <!-- brown tonhom--> <svg viewBox="-55 2 40 40"> <circle cx="12" cy="12" fill="#E9AE7D" r="3.5"></circle> <circle cx="12" cy="12" fill="#B46C2E" r="2"></circle> <svg x="20"> <circle cx="8" cy="12" fill="#E9AE7D" r="3.5"></circle> <circle cx="8" cy="12" fill="#B46C2E" r="2"></circle></svg> <ellipse cx="20" cy="22" rx="14" ry="12" fill="#E9AE7D" /> <svg> <ellipse cx="17" cy="17" fill="black" rx="1.3" ry="1.5"> <animate attributeName="rx" values="1.3;1.3;1.3;1.3;1.3" dur="1.5s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.5;1.5;0;1.5;1.5" dur="1.5s" repeatCount="indefinite" /> </ellipse> </svg> <svg x="10"> <ellipse cx="13" cy="17" fill="black" rx="1.3" ry="1.5"> <animate attributeName="rx" values="1.3;1.3;1.3;1.3;1.3" dur="1.5s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.5;1.5;0;1.5;1.5" dur="1.5s" repeatCount="indefinite" /></ellipse> </svg> <svg y="-2.8"> <circle cx="20" cy="26" fill="hsl(30,70%,90%)" r="5"/> <ellipse cx="20" cy="23" rx="1" ry="0.8" fill="hsl(30,70%,0%)" /> <line x1="20" y1="23" x2="20" y2="26" stroke="hsl(30,70%,0%)" stroke-width="1" stroke-linecap="round" /> <path d="M20,13 Q13,8 16,13 Q14,17 20,12 Q26,9 23,13.2 Q24,18 20,12"fill="#EC407A" stroke="#000" stroke-width="0.3"/> <path d="M20,13.8 Q19,12 16.5,12.5"fill="transparent"stroke="#000" stroke-width="0.3"/> <path d="M20,13.5 Q21,12 23,12.5"fill="transparent"stroke="#000" stroke-width="0.3"/> <ellipse cx="19.5" cy="12.5" rx="1.3" ry="1.6" fill="#EC407A" stroke="#000" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/> <svg x="17"y="24" > <path d="M3,2 L1,4.9" stroke="black"/> </svg> <svg x="20"y="23"> <path d="M-1,2 L3,5.6" stroke="black"/> </svg> </svg> </svg> </svg> <!-- duck j--> <svg viewBox="-30 0 310 50"> <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="40%" style="stop-color:hsl(53, 100%, 50%); stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(43, 88%, 48%);stop-opacity:1" /> </radialGradient> <ellipse cx="20" cy="21" rx="16" ry="15" fill="url(#grad1)" /> <svg> <ellipse cx="16" cy="18" fill="black" rx="1.3" ry="1.5"> <animate attributeName="rx" values="1.3;1.3;1.3;1.3;1.3" dur="1s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.5;1.5;0;1.5;1.5" dur="1s" repeatCount="indefinite" /> </ellipse> </svg> <svg x="10"> <ellipse cx="14.3" cy="18" fill="black" rx="1.3" ry="1.5"> <animate attributeName="rx" values="1.3;1.3;1.3;1.3;1.3" dur="1s" repeatCount="indefinite" /> <animate attributeName="ry" values="1.5;1.5;0;1.5;1.5" dur="1s" repeatCount="indefinite" /></ellipse> </svg> <svg y="3"> <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:hsl(30, 94%, 51%);stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(21, 100%, 51%);stop-opacity:1" /> </linearGradient> <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:#FD6707;stop-opacity:1" /> <stop offset="100%" style="stop-color:hsl(21, 100%, 51%);stop-opacity:1" /> </linearGradient> <ellipse cx="20" cy="23" rx="8" ry="3" fill="url(#grad2)" /> <ellipse cx="20" cy="25" rx="8" ry="3" fill="url(#grad2)" transform='rotate(0)'/> <circle cx="25.3" cy="24" fill="url(#grad3)" r="3"></circle> <svg x="11.5" y="16.07" width="13"> <path d="M14,8 A 13 10 20 0 1 1 8" stroke="hsl(21, 100%, 51%)" stroke-width="0.1" fill="transparent"/> </svg> </svg> <!-- white om--> <svg viewBox="30 0 40 50"> <ellipse cx="20" cy="20" rx="15" ry="15" fill="white" stroke="black" stroke-width="0.5"/> <line x1="15" y1="15" x2="18.5" y2="17" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <line x1="15" y1="17" x2="18.5" y2="17" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <line x1="16" y1="19.5" x2="18.5" y2="17" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <line x1="25.5" y1="14" x2="23" y2="16.7" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <line x1="26" y1="16" x2="23" y2="16.7" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <line x1="25.5" y1="18" x2="23" y2="16.7" stroke="black" stroke-linecap="round" stroke-width="0.5"/> <svg x="15.5" y="17.5"> <path d="M3.5,3 C3.5,0 6.5,0 7,2.5" stroke="black" fill="transparent" stroke-linecap="round" stroke-width="0.5" /></svg> <circle cx="12" cy="22" fill="hsl(350, 100%, 92%)" r="2.8"> <animate attributeName="fill" values="hsl(350, 100%, 92%);hsl(350, 100%, 85%);hsl(350, 100%, 85%);hsl(350, 100%, 92%)" dur="1.5s" repeatCount="indefinite" /></circle> <circle cx="29" cy="20" fill="hsl(350, 100%, 92%)" r="2.5"> <animate attributeName="fill" values="hsl(350, 100%, 92%);hsl(350, 100%, 85%);hsl(350, 100%, 85%);hsl(350, 100%, 92%)" dur="1.5s" repeatCount="indefinite" /></circle> <svg x="10" y="18"> <path d="M2.2,5 C5.5,6 12,8 19,2.5" stroke="black" fill="transparent" stroke-linecap="round" stroke-width="0.5" /></svg> </svg> <!-- white uncle kim--> <svg viewBox="-70 0 40 50"> <circle cx="20" cy="20" fill="white" stroke="black" stroke-width=".8" fill="none" r="15"></circle> <circle cx="15" cy="19" stroke="black" stroke-width=".5" fill="none" r="3.2"></circle> <circle cx="25" cy="19" stroke="black" stroke-width=".5" fill="none" r="3.2"></circle> <line x1="18" y1="19" x2="22" y2="19" stroke-width=".5" stroke="black"></line> <line x1="23" y1="3" x2="23" y2="13" stroke-width=".5" stroke="black"></line> <line x1="25" y1="4" x2="25" y2="14.5" stroke-width=".5" stroke="black"></line> <line x1="27" y1=3.5 x2="27" y2="13.5" stroke-width=".5" stroke="black"></line> <line x1="29" y1=7 x2="29" y2="13" stroke-width=".5" stroke="black"></line> <line x1="5" y1="18" x2="9.5" y2="18.5" stroke-width="5.3" stroke="black"></line> <line x1="35" y1="18" x2="30.5" y2="18.5" stroke-width="5.3" stroke="black"></line> <defs> <linearGradient id="e" x1="18" y1="24" x2="18" y2="33" gradientUnits="userSpaceOnUse"> <stop stop-color="black" offset="0" /> <stop stop-color="white" offset="1" /> </linearGradient> </defs> <rect x="17.5" y="25" fill="url(#e)" width="5" height="6.5" stroke="black" stroke-width=".3"> <animate attributeName="height" values="6;7;9;7;6" dur="3s" repeatCount="indefinite" /></rect> </svg> </svg> <!-- white pang--> <svg viewBox="-30 0 330 50"> <ellipse cx="12.8" cy="14.5" rx="6.8" ry="7" fill="#000" /> <ellipse cx="27.8" cy="14.5" rx="6.8" ry="7" fill="#000" /> <ellipse cx="20" cy="24" rx="15" ry="13" fill="#fff" stroke="#000" stroke-width="0.8"/> <ellipse cx="15" cy="19" rx="4.1" ry="4.5" fill="#000" /> <path d="M13,19.5 Q15,17.5 17.3,18.5 "fill="transparent" stroke="#fff" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"/> <ellipse cx="26" cy="19" rx="4.1" ry="4.5" fill="#000" /> <path d="M24,18.5 Q27,17 28.3,19.5 "fill="transparent" stroke="#fff" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <ellipse cx="20" cy="24" rx="4.7" ry="5" fill="#fff" stroke="#000" stroke-width="0.2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19,21 Q20,19.8 21,21 Q20.8,22 20,24 Q19.2,22 19,21 M20,24 v1 "fill="#000" stroke="#000" stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18,25.1 h4 Q21.5,28 20,28 Q18.5,28 18,25.1 "fill="#e53935" stroke="#000" stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.6,27 Q20,26.7 21.3,27 Q21,28 20,28 Q19.2,28 18.6,27 "fill="#F8BBD0" stroke="#000" stroke-width="0.4" stroke-linecap="round" stroke-linejoin="round"/> <!-- cony don--> <svg viewBox="30 2 40 50"> <radialGradient id="head" cx="%" cy="100%" r="50%" fx="50%" fy="100%"> <stop offset="0%" style="stop-color:#d3d3d3 ; stop-opacity:1" /> <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" /> </radialGradient> <radialGradient id="ears" cx="50%" cy="50%" r="60%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:#fee7ef ; stop-opacity:1" /> <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1" /> </radialGradient> <svg> <ellipse cx="5" cy="14" rx="2.5" ry="6.5" fill="url(#ears)" transform='rotate(-25)'> <animate attributeName="rx" values="2.5;2;2.5;2;2.5;2.5;2.5;2.5;2.5" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="6.5;6;6.5;6;6.5;6.5;6.5;6.5;6.5" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg> <ellipse cx="31" cy="-3" rx="2.5" ry="6.5" fill="url(#ears)" transform='rotate(25)'> <animate attributeName="rx" values="2.5;2;2.5;2;2.5;2.5;2.5;2.5;2.5" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="6.5;6;6.5;6;6.5;6.5;6.5;6.5;6.5" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg> <ellipse cx="5" cy="14" rx="1.5" ry="4.5" fill="#ef89a1" transform='rotate(-25)'> <animate attributeName="rx" values="1.5;1;1.5;1;1.5;1.5;1.5;1.5;1.5" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="4.5;4;4.5;4;4.5;4.5;4.5;4.5;4.5" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg> <ellipse cx="31" cy="-3" rx="1.5" ry="4.5" fill="#ef89a1" transform='rotate(25)'> <animate attributeName="rx" values="1.5;1;1.5;1;1.5;1.5;1.5;1.5;1.5" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="4.5;4;4.5;4;4.5;4.5;4.5;4.5;4.5" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <ellipse cx="20" cy="22" rx="14.5" ry="13" fill="url(#head)" /> <ellipse cx="17" cy="21" fill="#black" stroke-width="0.4" rx="1" ry="1"/> <ellipse cx="23" cy="21" fill="#black" stroke-width="0.4" rx="1" ry="1"/> <svg> <ellipse cx="20" cy="25" fill="#fff" stroke="black" stroke-width="0.4" rx="1.4" ry="1"> <animate attributeName="rx" values="1.4;1.4;1.4;1.4;1.4;1.6;1.4;1.6;1.4" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;1;1;1;1.2;1" dur="2s" repeatCount="indefinite" /> <animate attributeName="cy" values="25;25;25;25;25;24.6;25;24.6;25" dur="2s" repeatCount="indefinite" /> </ellipse> </svg> <svg> <line x1="20" y1="28" x2="20" y2="26" stroke="black" stroke-width="0.4" stroke- linecap="round" > <animate attributeName="y2" values="26;26;26;26;26;25.7;26;25.7;26" dur="2s" repeatCount="indefinite"/> </line></svg> <path fill="#cf4336" d="M2.1,1.3C1.5,2.4,-1.3,2.4,-2,1.3C-2.7,0.2,-1.3,-1.9,0.03,-1.9C1.4,-1.9,2.8,0.27,2.1,1.3Z" transform="translate(20 29)" stroke="black" stroke-width="0.4" /> <svg> <ellipse cx="12" cy="25" fill="#ffc2c7" stroke-width="0.4" rx="2" ry="1"> <animate attributeName="rx" values="2;2;2;2;2;2.2;2;2.2;2" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;1;1;1;1.2;1" dur="2s" repeatCount="indefinite"/> <animate attributeName="cy" values="25;25;25;25;25;24.6;25;24.6;25" dur="2s" /> </ellipse> </svg> <svg> <ellipse cx="28" cy="25" fill="#ffc2c7" stroke-width="0.4" rx="2" ry="1"> <animate attributeName="rx" values="2;2;2;2;2;2.2;2;2.2;2" dur="2s" repeatCount="indefinite" /> <animate attributeName="ry" values="1;1;1;1;1;1.2;1" dur="2s" repeatCount="indefinite"/> <animate attributeName="cy" values="25;25;25;25;25;24.6;25;24.6;25" dur="2s"/> </ellipse> </svg> </svg> <!-- white phu--> <svg viewBox="-95 0 40 60"> <ellipse cx="7.5" cy="20" rx="5" ry="6" fill="#F4C9A5" stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" ><animate attributeName="rx" values="6;5;4;6" dur="2s" repeatCount="indefinite" /> </ellipse> <ellipse cx="32.5" cy="20" rx="5" ry="6" fill="#F4C9A5" stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"><animate attributeName="rx" values="6;5;4;6" dur="2s" repeatCount="indefinite" /></ellipse> <ellipse cx="20" cy="22.3" rx="13.8" ry="14" fill="#F4C9A5" stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" /> <!-- <circle r="6" cx="20" cy="14" fill="#F4C9A5"/> --> <ellipse cx="20" cy="27" rx="16" ry="10.5" fill="#F4C9A5"stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" /> <ellipse cx="20" cy="19" rx="13" ry="7" fill="#F4C9A5"/> <ellipse cx="20" cy="22" rx="13" ry="6" fill="#F4C9A5"/> <path d="M7.6,16 l1.6,1.5 l0.3,6 l-3.3,-2 " stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M32.3,16 l-1.6,1.5 l0.3,6 l3.2,-1" stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="16" cy="18" fill="#42A5F5" r="3"stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></circle> <circle cx="24" cy="18" fill="#42A5F5" r="3"stroke="#000" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M13.2,18 Q14,14 18,16 Q16,18 13.2,18" fill="#fff" /> <path d="M21.2,18 Q22.4,14 26,16 Q24,18 21.2,18" fill="#fff" /> <path d="M19,18 Q20,17 21,18" fill="transparent"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16,12 l3,3"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M24,12 l-3,3"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18,22 Q20,20 22,22"fill="transparent"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <ellipse cx="16" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="17" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="18" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="19" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="20" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="21" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="22" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="23" cy="24" rx="0.8" ry="1" fill="#000"/> <ellipse cx="24" cy="24" rx="0.8" ry="1" fill="#000"/> <path d="M14,26.5 h12 Q24.25,34 20,34 Q16,34 14,26.5 "fill="#f44336"stroke="#b71c1c" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5,27.4 h10.8" fill="#fff"stroke="#fff" stroke-width="1"/> <path d="M15.5,30 Q20,28.5 24.2,30 Q24.5,32.6 20,33.7 Q16.8,33.3 15.5,30 "fill="#ef9a9a"stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11,13.7 Q13,11 15,10.8" fill="transparent"stroke="#fff" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <circle cx="10" cy="15" fill="#fff" r="0.4"></circle> <path d="M7.2,16 Q5.5,15.3 4.5,17 M6,15.8 l-0.5,3"fill="transparent"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> <path d="M33,16 Q35,16 36,17 M34,16.5 l0.5,2.8" fill="transparent"stroke="#000" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/> </svg> </svg> </body> </html>