Hello World! (Branch 8161) (Copy 8163) (Copy 8168)
✨ puriwat udompittayasit
<!DOCTYPE html> <html lang="en"> <html> <head> <head> <title>ภูริวัจน์ อุดมพิทยสิทธิ์(63070138)</title> <style> body { margin: 0; background-image: url("https://png.pngtree.com/thumb_back/fw800/background/20190223/ourmid/pngtree-autumn-outskirts-woods-distant-mountains-illustration-background-paintedillustration-backgroundoutskirtsskyfar-mountainadvertising-image_68304.jpg"); background-size: cover; background-repeat: no-repeat; height:100vh; overflow:hidden; position:relative; } svg{ position: absolute; left: 13rem; right: 0; width:100%; } .bird{ position:absolute; } .cloud2{ position:absolute; right: 4rem; top: 1rem; } .cloud{ position:absolute; left: 11rem; top: 1rem; } .img{ top } </style> </head> <body> <svg class="bird" viewBox="0 0 200 200"> <path id='1' d="M45 31 L60.1 32 L65.5 23.9 L52 27.3 z" stroke="red" stroke-width="0" fill="#628C6F"/> <path id='2' d="M45 31 L57 44 L60.1 32" stroke="red" stroke-width="0" fill="#566A24"/> <path id='3' d="M45 31 L25 43.5 L57 44" stroke="red" stroke-width="0" fill="#688F6F"/> <path id='4' d="M25 43.5 L32.6 52 L57 44" stroke="red" stroke-width="0" fill="#927D0D"/> <path id='5' d="M25 43.5 L17 57 L32.6 52" stroke="red" stroke-width="0" fill="#9FB676"/> <path id='6' d="M17 57 L24 70 L32.6 52" stroke="red" stroke-width="0" fill="#C9A927"/> <path id='7' d="M24 70 L45 57 L32.6 52" stroke="red" stroke-width="0" fill="#F09710"/> <path id='8' d="M24 70 L45 72 L45 57" stroke="red" stroke-width="0" fill="#E4AD15"/> <path id='9' d="M24 70 L19 84.7 L45 72" stroke="red" stroke-width="0" fill="#CEBD6A"/> <path id='10' d="M19 84.7 L38.3 87 L45 72" stroke="red" stroke-width="0" fill="#9E9B2F"/> <path id='11' d="M38.3 87 L53.2 69.5 L45 72" stroke="red" stroke-width="0" fill="#C2BA77"/> <path id='12' d="M38.3 87 L60 96 L53.2 69.5" stroke="red" stroke-width="0" fill="#5B6D0A"/> <path id='13' d="M60 96 L65.5 75 L53.2 69.5" stroke="red" stroke-width="0" fill="#38601A"/> <path id='14' d="M60 96 L72 91 L65.5 75" stroke="red" stroke-width="0" fill="#184F1E"/> <path id='15' d="M72 91 L84.5 86 L65.5 75" stroke="red" stroke-width="0" fill="#722600"/> <path id='16' d="M72 91 L85.5 96 L84.5 86" stroke="red" stroke-width="0" fill="#5F1801"/> <path id='17' d="M84.5 86 L80 73.5 L76.5 73.9 z" stroke="red" stroke-width="0" fill="#992C0F"/> <path id='18' d="M76.5 73.9 L65.5 75 L84.5 86" stroke="red" stroke-width="0" fill="#700405"/> <path id='19' d="M65.5 75 L70 67 L76.5 73.9" stroke="red" stroke-width="0" fill="#8B0200"/> <path id='20' d="M70 67 L54 62 L65.5 75" stroke="red" stroke-width="0" fill="#A62710"/> <path id='21' d="M54 62 L53.2 69.5 L65.5 75 z" stroke="red" stroke-width="0" fill="#A80200"/> <path id='22' d="M54 62 L45 57 L45 72 L53.2 69.5 L54 62 z" stroke="red" stroke-width="0" fill="#EF7D09"/> <path id='23' d="M54 62 L65.5 60.1 L57 44 L45 57" stroke="red" stroke-width="0" fill="#A65D05"/> <path id='24' d="M57 44 L32.6 52 L57 44 L45 57 L32.6 52" stroke="red" stroke-width="0" fill="#A56A08"/> <path id='25' d="M66.6 36 L66.6 41.9 L60.3 50.5 L57 44 z" stroke="red" stroke-width="0" fill="#B0AF9E"/> <path id='26' d="M57 44 L66.6 36 L60.1 32" stroke="red" stroke-width="0" fill="#B1ADA9"/> <path id='27' d="M66.6 36 L70.5 35.5 L78.4 24 L60.1 32" stroke="red" stroke-width="0" fill="#888B31"/> <path id='28' d="M78.4 24 L65.5 23.9 L60.1 32" stroke="red" stroke-width="0" fill="#F8B617"/> <path id='29' d="M78.4 24 L81 37.5 L70.5 35.5" stroke="red" stroke-width="0" fill="#213624"/> <path id='30' d="M81 37.5 L86.5 32 L78.4 24" stroke="red" stroke-width="0" fill="#3E3D14"/> <path id='31' d="M86.5 32 L97 30 L91.5 27 L78.4 24" stroke="red" stroke-width="0" fill="#AF5114"/> <path id='32' d="M97 30 L100 36.7 L98.7 40 L97 39 L92.5 39 L86.5 32" stroke="red" stroke-width="0" fill="#7F030B"/> <path id='33' d="M92.5 39 L87.5 43.7 L83.5 44.1 L86.5 32" stroke="red" stroke-width="0" fill="#8C0C07"/> <path id='34' d="M83.5 44.1 L81 37.5 L86.5 32" stroke="red" stroke-width="0" fill="#96340C"/> <path id='35' d="M83.5 44.1 L78.5 42 L81 37.5" stroke="red" stroke-width="0" fill="#998F8B"/> <path id='36' d="M78.5 42 L75 46 L66.5 48.5 L66.9 44 L66.6 41.9 66.6 36 L70.5 35.5 L81 37.5" stroke="red" stroke-width="0" fill="#AFA29A"/> <path id='37' d="M66.5 48.5 L66.5 48.5 L60.3 50.5 L66.6 41.9 L66.9 44" stroke="red" stroke-width="0" fill="#A1978F"/> <path id='38' d="M66.5 48.5 L66.5 48.5 L65.5 60.1 L60.3 50.5" stroke="red" stroke-width="0" fill="#A4A3A2"/> <path id='39' d="M65.5 60.1 L77 55.2 L66.5 48.5" stroke="red" stroke-width="0" fill="#717169"/> <path id='39.25' d="M77 55.2 L71 63 L70 67 L65.5 60.1" stroke="red" stroke-width="0" fill="#768180"/> <path id='39.5' d="M65.5 60.1 L54 62 L70 67" stroke="red" stroke-width="0" fill="#962105"/> <path id='40' d="M77 55.2 L75 46 L66.5 48.5" stroke="red" stroke-width="0" fill="#B4B1A9"/> <path id='41' d="M77 55.2 L80.5 54 L75 46" stroke="red" stroke-width="0" fill="#92928A"/> <path id='42' d="M80.5 54 L83 48.5 L83.5 44.1 L78.5 42 L75 46" stroke="red" stroke-width="0" fill="#ABACA4"/> <path id='43' d="M83 48.5 L88.9 45.3 L83.5 44.1" stroke="red" stroke-width="0" fill="#8E796D"/> <path id='44' d="M88.9 45.3 L89.9 45.3 L91.3 43.3 L92.5 39 L87.5 43.7 L83.5 44.1" stroke="red" stroke-width="0" fill="#937469"/> <path id='44.5' d="M91.3 43.3 L97 39 L92.5 39" stroke="red" stroke-width="0" fill="#978382"/> <path id='45' d="M97 39 L96 54 L93.5 44 L89.9 45.3 L91.3 43.3" stroke="red" stroke-width="0" fill="#69615C"/> <path id='46' d="M98.7 40 L102 52 L96 54 L97 39" stroke="red" stroke-width="0" fill="#9D9E99"/> <path id='47' d="M96 54 L100 58 L102 52" stroke="red" stroke-width="0" fill="#918A84"/> <path id='48' d="M100 60.5 L100 75 L96 85 L88 93 L91 85 L93 76 L94 71" stroke="red" stroke-width="0" fill="#35332D"/> <path id='49' d="M92 69 L94 71 L100 60.5 L91 62" stroke="red" stroke-width="0" fill="#524336"/> <path id='50' d="M100 58 L100 60.5 L91 62 L91 58.5 L89.8 53 L96 54" stroke="red" stroke-width="0" fill="#786F5E"/> <path id='51' d="M89.8 53 L93.5 44 L96 54" stroke="red" stroke-width="0" fill="#362E23"/> <path id='52-53' d="M91 62 L86.5 62 L80.5 54 L83 48.5 L88.9 45.3 L89.9 45.3 L93.5 44" stroke="red" stroke-width="0" fill="#1A1C1B"/> <path id='53.5' d="M92 69 L91 62 L86.5 62" stroke="red" stroke-width="0" fill="#272A28"/> <path id='54' d="M77 55.2 L77 63.7 L85.2 65 L86.5 62 L80.5 54" stroke="red" stroke-width="0" fill="#121413"/> <path id='55' d="M80 73.5 L85 72 L92 69 L86.5 62 L85.2 65 L77 63.7 L77 55.2 L71 63 L70 67" stroke="red" stroke-width="0" fill="#040003"/> <circle cx="69" cy="40" r="2" stroke="black" stroke-width="0" fill="#7F827B" /> <circle cx="69" cy="40" r="1" stroke="black" stroke-width="0" fill="#070A07" /> <path id='lilbird' d="M4 5 Q8 5 8 12 M8 12 Q8 5 12 5" stroke="black" stroke-width="0.6" fill="none"> <animate attributeName="d" values="M4 5 Q8 5 8 12 M8 12 Q8 5 12 5;M4 10 Q8 8 8 15 M8 15 Q8 8 12 10;M4 5 Q8 5 8 12 M8 12 Q8 5 12 5" dur="1s" repeatCount="indefinite"/> </path> <path id='lilbird' d="M114 5 Q118 5 118 12 M118 12 Q118 5 122 5" stroke="black" stroke-width="0.6" fill="none"> <animate attributeName="d" values="M114 5 Q118 5 118 12 M118 12 Q118 5 122 5; M114 10 Q118 8 118 15 M118 15 Q118 8 122 10;M114 5 Q118 5 118 12 M118 12 Q118 5 122 5" dur="1s" repeatCount="indefinite"/> </path> <path id='lilbird' d="M24 25 Q28 25 28 32 M28 32 Q28 25 32 25" stroke="black" stroke-width="0.6" fill="none"> <animate attributeName="d" values="M24 25 Q28 25 28 32 M28 32 Q28 25 32 25;M24 30 Q28 28 28 35 M28 35 Q28 28 32 30;M24 25 Q28 25 28 32 M28 32 Q28 25 32 25" dur="1s" repeatCount="indefinite"/> </path> <path id='lilbird' d="M99 25 Q103 25 103 32 M103 32 Q103 25 108 25" stroke="black" stroke-width="0.6" fill="none"> <animate attributeName="d" values="M99 25 Q103 25 103 32 M103 32 Q103 25 108 25;M99 30 Q103 28 103 35 M103 35 Q103 28 108 30;M99 25 Q103 25 103 32 M103 32 Q103 25 108 25" dur="1s" repeatCount="indefinite"/> </path> </svg> <img src="https://i.pinimg.com/474x/8d/5d/3f/8d5d3f0612ab7904a47c1f16df76fba1.jpg" height="180"> </body> </html>