63070013
✨ นายไกรวิน แนวอินทร์
<html> <head> <title>Let's Start</title> <style> body{ margin: 0; font-family:sans-serif; animation: bg 5s infinite alternate linear; background: grey; } svg{ display: block; margin:auto; background: hsl(240, 70%, 30%); height: 100%; } img{ position: fixed; bottom: 0; opacity: 0; z-index: -1; } </style> </head> <body> <img src="https://cdn.discordapp.com/attachments/801023050640130079/840600379955347466/lowpoly.jpg" /> <svg viewBox="0 0 100 100"> <rect width="100" height="100" fill="url(#cir)" /> <defs> <pattern id="cir" viewBox="0 0 10 10" width="10%" height="10%"> <circle r="2" cx="2.5" cy="2.5" fill="white"> <animate attributeName="cy" values=" 2.5; 5; 7.5; 5; 2.5; " dur="2s" repeatCount="indefinite" /> <animate attributeName="cx" values=" 2.5; 5; 7.5; 5; 2.5; " dur="2s" repeatCount="indefinite" /> </circle> <circle r="1" cx="7.5" cy="7.5" fill="white"> <animate attributeName="cx" values=" 7.5; 5; 2.5; 5; 7.5; " dur="2s" repeatCount="indefinite" /> <animate attributeName="r" values=" 1; 2; 1; 0.5; 1; " dur="3s" repeatCount="indefinite" /> </circle> </pattern> </defs> <path d="M 0 70 q10 20 20 0 10 -20 20 0 10 20 20 0 10 -20 20 0 10 20 20 0 V100 H0" fill="hsl(240, 70%, 95%)"> <animate attributeName="d" values=" M 0 70 q10 20 20 0 10 -20 20 0 10 20 20 0 10 -20 20 0 10 20 20 0 V100 H0; M 0 70 q10 -20 20 0 10 20 20 0 10 -20 20 0 10 20 20 0 10 -20 20 0 V100 H0; M 0 70 q10 20 20 0 10 -20 20 0 10 20 20 0 10 -20 20 0 10 20 20 0 V100 H0; " dur="4s" repeatCount="indefinite" /> </path> <path d="M 37 74 l15 15, 8.5 -10" fill="hsl(30, 20%, 70%)" /> <path d="M 48 80 l7 0, 5 -5, -7 0" fill="hsl(240, 20%, 30%)" /> <path d="M 60.5 79 l-6 1, -5 -5, 6 -1" fill="hsl(240, 20%, 35%)" /> <path d="M 42 79 l6 1, 5 -5, -6 -1" fill="hsl(240, 20%, 35%)" /> <path d="M 37 70 l15 0, -10 9" fill="hsl(240, 20%, 40%)" /> <path d="M 65.5 70 l-15 0, 10 9" fill="hsl(240, 20%, 40%)" /> <path d="M 37 7 l15 0, -10 9" fill="hsl(240, 20%, 30%)" /> <path d="M 65.5 60 l0 10, -5 5" fill="hsl(30, 30%, 70%)" /> <path d="M 60.5 75 l0 -10, 5 -5" fill="hsl(30, 30%, 60%)" /> <path d="M 60.5 75 l0 -10, -5 4" fill="hsl(30, 30%, 50%)" /> <path d="M 60.5 75 l-5 1, 0 -7" fill="hsl(30, 30%, 40%)" /> <path d="M 55.5 76 l-6 0, -1 -7" fill="hsl(30, 30%, 40%)" /> <path d="M 55.5 76 l0 -7, -7 0" fill="hsl(30, 30%, 30%)" /> <path d="M 37 60 l0 10, 7 5, 1 -5" fill="hsl(30, 30%, 70%)" /> <path d="M 44 75 l0 -10, 5 5" fill="hsl(30, 30%, 50%)" /> <path d="M 44 75 l0 -10, -5 -5" fill="hsl(30, 30%, 60%)" /> <path d="M 44 75 l6 1, -1 -6" fill="hsl(30, 30%, 60%)" /> <path d="M 37 70 l0 4, 5 5" fill="hsl(240, 20%, 50%)" /> <path d="M 37 70 l0 8, -5 0, -5 -3" fill="hsl(240, 20%, 20%)" /> <path d="M 65.5 70 l0 8, 5 0, 5 -3" fill="hsl(240, 20%, 20%)" /> <path d="M 65.5 74 l-4 9, -5 0" fill="hsl(30, 20%, 60%)" /> <path d="M 37 74 l4 9, 5 0" fill="hsl(30, 20%, 60%)" /> <path d="M 37 74 l-1 4, 5 5" fill="hsl(30, 20%, 70%)" /> <path d="M 65.5 74 l1 4, -5 5" fill="hsl(30, 20%, 70%)" /> <path d="M 65.5 70 l0 4, -5 5" fill="hsl(240, 20%, 50%)" /> <g transform="translate(-14.5 -23) scale(1.3)"> <path d="M 58 52 l-20 0, 0 -20, 20 0, 0 10" fill="hsl(30, 30%, 80%)" /> <path d="M 40 60 l10 2, -5 -12" fill="hsl(30, 30%, 95%)" /> <path d="M 35 55 l2 0, 5 5, -4 1, -3 -2" fill="hsl(30, 30%, 75%)" /> <path d="M 32 50 l1 5, 3 .1" fill="hsl(30, 40%, 80%)" /> <path d="M 35 39 l5 -5, 3 12 " fill="hsl(30, 30%, 75%)" /> <path d="M 34 48 l-3 -3, 6 -1, 4 0 " fill="hsl(30, 40%, 80%)" /> <path d="M 32 45 l1 7, 3 3,-2 -7 " fill="hsl(30, 40%, 85%)" /> <path d="M 34 48 l7 -4, 4 3, -10 2 " fill="hsl(30, 40%, 90%)" /> <path d="M 34 48 l5 .1, -3 7 " fill="hsl(30, 40%, 90%)" /> <path d="M 44 55 l5 -1, -.2 -7.2" fill="hsl(30, 40%, 90%)" /> <path d="M 36 55 l9 0, -3 5" fill="hsl(30, 40%, 90%)" /> <path d="M 36 55 l9.1 0.1, -6.1 -7.1" fill="hsl(30, 30%, 85%)" /> <path d="M 45 55 l-6 -7, 6 -1" fill="hsl(30, 40%, 90%)" /> <path d="M 52.4 38.2 l7 3.7, 3.1 5, -3 2" fill="hsl(30, 30%, 65%)" /> <path d="M 43 65 l-2 -5, -5 0, 1 3" fill="hsl(30, 30%, 90%)" /> <path d="M 45 55 l0 -8, 3.5 .2" fill="hsl(30, 40%, 95%)" /> <path d="M 33 55 l4 8, 1 -3" fill="hsl(30, 30%, 80%)" /> <path d="M 37 63 l5 5, 1 -3" fill="hsl(30, 30%, 80%)" /> <path d="M 42 68 l5 3, 2 1, -2 -3" fill="hsl(30, 30%, 80%)" /> <path d="M 49 72 l3 0, 2 -1, -2 -2" fill="hsl(30, 30%, 80%)" /> <path d="M 54 71 l3 -2, 3 -3, 2 -3, -4 1" fill="hsl(30, 30%, 80%)" /> <path d="M 62 63 l3 -5, 1 -10, -2 0" fill="hsl(30, 30%, 80%)" /> <path d="M 49 72 l-2 -3, 5 0 " fill="hsl(30, 30%, 70%)" /> <path d="M 35 39 l0 6, 6 -1 " fill="hsl(30, 30%, 89%)" /> <path d="M 35 39 l0 -4, 2 -5, 2 0, 3 3 " fill="hsl(30, 30%, 95%)" /> <path d="M 52 38 l2.1 -8, 5.5 12 " fill="hsl(30, 30%, 70%)" /> <path d="M 60 43 l1.5 .5, 3.1 5, -3 2" fill="hsl(30, 30%, 70%)" /> <path d="M 61 43 l5 1, -1 5" fill="hsl(30, 30%, 55%)" /> <path d="M 62 50 l-3.5 2, 1 9, 4 -5" fill="hsl(30, 30%, 70%)" /> <path d="M 58 40 l6 1, 3 5, -7 -3" fill="hsl(30, 30%, 60%)" /> <path d="M 64 48 l-2 1.5, -1 .5 3 7" fill="hsl(30, 30%, 60%)" /> <path d="M 58 64 l4.9 -5, -1 4.2" fill="hsl(30, 30%, 70%)" /> <path d="M 58 64 l5 -10, -1 6" fill="hsl(30, 30%, 60%)" /> <path d="M 58 64 l-4 3, 0 4" fill="hsl(30, 30%, 65%)" /> <path d="M 43 65 l5 0, 2 -3, -9 -2" fill="hsl(30, 30%, 80%)" /> <path d="M 48 65 l1 1, 5 0, 0 -5, -4 1" fill="hsl(30, 30%, 80%)" /> <path d="M 54 67 l4 -3, -4 -3" fill="hsl(30, 30%, 75%)" /> <path d="M 54 61 l4 3, 1.5 -3" fill="hsl(30, 30%, 70%)" /> <path d="M 59.2 57.7 l0 -6.6, -3 -.8, -2 6.9" fill="hsl(30, 30%, 80%)" /> <path d="M 54.3 57.7 l2 -6.6, -2.4 -.8, -6 6.9" fill="hsl(30, 30%, 70%)" /> <path d="M 49 54 l2.1 -.4, -2.4 -8," fill="hsl(30, 30%, 80%)" /> <path d="M 51 53.7 l-2.4 -8, 5 5" fill="hsl(30, 30%, 60%)" /> <path d="M 54 61 l5.6 0, 3 -6," fill="hsl(30, 30%, 65%)" /> <path d="M 54 61 l5 -3.4, -7 -1," fill="hsl(30, 30%, 75%)" /> <path d="M 54 61 l-4 1, -3.4 -8," fill="hsl(30, 30%, 90%)" /> <path d="M 54 61 l-7 -6.6, 4 -.8," fill="hsl(30, 30%, 80%)" /> <path d="M 54 71 l-5 -5, 5 0" fill="hsl(30, 30%, 70%)" /> <path d="M 42 68 l6 -3, -5 0" fill="hsl(30, 30%, 70%)" /> <path d="M 42 68 l6 -3, 4 4 -5 0" fill="hsl(30, 30%, 65%)" /> </g> <path d="M 33 35 l2 -2, 2 -1, 3 0, 2 1, 1 1, -2 -1, -4 -.4, " fill="hsl(240, 40%, 50%)" stroke="none" stroke-width=".5" /> <path d="M 56 35 l1 -1, 2 -1, 3 0, 2 1, 2 2, -4 -2.4, -3 0" fill="hsl(240, 40%, 50%)" stroke="none" stroke-width=".5" /> <g id="mouth"> <path d="M 45 59 l1 1, 3 1, 3 0, 3 -1, 1 -1, -4 -1, -3 0z" fill="hsl(0, 40%, 50%)" stroke="hsl(0, 40%, 50%)" stroke-width=".5" /> </g> <path d="M 56 40 l-.5 3, 2 1, 4 1, 4 -2, .5 -2, -2 -2, -5 -1" fill="hsl(240, 10%, 90%)" stroke="none" stroke-width=".5" /> <path d="M 33 40 l.5 2, 4 2, 4 -1, 2 -1, -.5 -3, -2 -2, -5 1" fill="hsl(240, 10%, 90%)" stroke="none" stroke-width=".5" /> <path d="M 59 38 l-1 2, 0.4 2.5, 1 1.5, 2 0, 1.6 -1.8, -.1 -3, -1 -1.5" fill="hsl(240, 20%, 40%)" stroke="black" stroke-width=".5" /> <path d="M 36.5 37.7 l-1 2, 0.7 3, 1 1, 2 0, 1 -1, .7 -2, -1 -3" fill="hsl(240, 20%, 40%)" stroke="black" stroke-width=".5" /> <path d="M 33 40 l2 -2, 2 -1, 3 0, 2 1, 1 1, -2 -1, -4 -.4, " fill="black" stroke="black" stroke-width=".5" /> <path d="M 56 40 l1 -1, 2 -1, 3 0, 2 1, 2 2, -4 -2.4, -3 0" fill="black" stroke="black" stroke-width=".5" /> <path d="M 61 40 l-1 1, .9 1 .5 -.1 M 38.5 39.5 l-1 1, .9 1 .5 -.1" fill="black" stroke="black" stroke-width=".5" /> <path d="M 33 40 l.5 1, 3 -1, 1 -2" fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 33 40 l.5 -1, 5 -2, 4 1, 1 2 " fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 43.5 41 l-.5 -1, -5 -2, -4 1, 1 2 " fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 56 40 l.5 1, 3 -1, 1 -2" fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 56 42 l.5 -1, 5 -2, 4 1, 1 2 " fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 65.5 41 l-.5 -1, -5 -2, -4 1, 1 2 " fill="hsla(240, 10%, 0%, .3)" stroke="none" stroke-width=".5" /> <path d="M 11 9 l3 2, 15 2, -8 -9" fill="hsl(220, 50%, 45%)" /> <path d="M 14 11 l10.4 1, -2 12.5" fill="hsl(220, 50%, 50%)" /> <path d="M 30 0 l15 0, -7 5, -11 0" fill="hsl(220, 50%, 30%)" /> <path d="M 67 5 l11 5, 2 15, -11 4" fill="hsl(220, 50%, 30%)" /> <path d="M 65 0 l5 0, 8 10, -11 4" fill="hsl(220, 50%, 50%)" /> <path d="M 53 0 l16 0, -4 15, -11 4" fill="hsl(220, 50%, 40%)" /> <path d="M 53 0 l14 5, 2 15, -11 4" fill="hsl(220, 50%, 20%)" /> <path d="M 67 5 l11 5, 2 15, -11 4" fill="hsl(220, 50%, 30%)" /> <path d="M 47 4.7 l6 -10, 2 15, -11 0" fill="hsl(220, 50%, 30%)" /> <path d="M 42 0 l12 0, -7 5, -11 0" fill="hsl(220, 50%, 50%)" /> <path d="M 34 6 l9 -10, 5 8, 2 5" fill="hsl(220, 50%, 40%)" /> <path d="M 27 3 l3 -6, 5 8, 3 5" fill="hsl(220, 50%, 60%)" /> <path d="M 9 19 l14 -3.1, -1 8" fill="hsl(220, 50%, 40%)" /> <path d="M 9 19 l14 1, -1 8" fill="hsl(220, 50%, 50%)" /> <path d="M 23 13 l4 0,7 3, -5 15 -7 -5" fill="hsl(220, 50%, 50%)" /> <path d="M 7 29 l13 -3, 0 9" fill="hsl(220, 50%, 50%)" /> <path d="M 23 13 l4 -10,8 3, 3 11.3," fill="hsl(220, 50%, 40%)" /> <path d="M 23 13 l-3 14, -1 12, 5 10 -1 -4" fill="hsl(220, 50%, 60%)" /> <path d="M 23 26 l4 1, 2 4, -2 20, 1 -5" fill="hsl(220, 50%, 55%)" /> <path d="M 23 26 l3 14, 1 12, 6 7 -4" fill="hsl(220, 50%, 70%)" /> <path d="M 27 36 l0 2, 1 5, 4 13, -1 -20, 1 -15" fill="hsl(220, 50%, 60%)" /> <path d="M 35 6 l15 3, -6 7.1, -6 2" fill="hsl(220, 50%, 50%)" /> <path d="M 50 9 l8 0, -1 7.1, -6 2" fill="hsl(220, 50%, 50%)" /> <path d="M 35 16.5 l3 .5, -1 7" fill="hsl(220, 50%, 30%)" /> <path d="M 37 24 l4 12, 5 3" fill="hsl(220, 50%, 50%)" /> <path d="M 37 24 l3 -8, 2 16" fill="hsl(220, 50%, 50%)" /> <path d="M 43 16 l7 -7, 7.3 6, -3 0" fill="hsl(220, 50%, 60%)" /> <path d="M 43 16 l14 -1.3, -7 10, -3 0" fill="hsl(220, 50%, 50%)" /> <path d="M 40 19 l3 -3, 8 13, -7 -2" fill="hsl(220, 50%, 50%)" /> <path d="M 58 9 l10 1, 6 7.1, -4 1" fill="hsl(220, 50%, 40%)" /> <path d="M 47.3 23 l10 -8.4, -5 16, -2 0" fill="hsl(220, 50%, 45%)" /> <path d="M 56 19 l5 10, 8 3" fill="hsl(220, 50%, 40%)" /> <path d="M 56 19 l13 -3, 0 17" fill="hsl(220, 50%, 45%)" /> <path d="M 69 25 l0 10, 8 5" fill="hsl(220, 50%, 50%)" /> <path d="M 72 36.7 l0 30, 4 -12" fill="hsl(220, 50%, 50%)" /> <path d="M 72 37 l6 3, -2 15" fill="hsl(220, 50%, 40%)" /> <path d="M 68.92 34.91 l3 1.8, -1 13" fill="hsl(220, 50%, 55%)" /> <path d="M 69 35 l-3 20, 5 -5" fill="hsl(220, 50%, 45%)" /> <path d="M 46 27.5 l7 1, 2 11" fill="hsl(220, 50%, 40%)" /> <path d="M 40 19 l1 10, 16 13" fill="hsl(220, 50%, 56%)" /> <path d="M 37 24 l1 -12, 6 3" fill="hsl(220, 50%, 40%)" /> <path d="M 37 24 l7 12, 10 7, -4 -10" fill="hsl(220, 50%, 65%)" /> <path d="M 68.8 25 l7.5 14.1, 1.5 1, 2.5 -10" fill="hsl(220, 50%, 40%)" /> <path d="M 65 13.5 l13 -2, 1.9 12" fill="hsl(220, 50%, 50%)" /> <path d="M 68.8 25 l.2 -9, 11 7" fill="hsl(220, 50%, 40%)" /> <path d="M 68.8 25 l11 -2, 0.5 7.1" fill="hsl(220, 50%, 50%)" /> <path d="M 56 19 l2 -10, 11 7.1" fill="hsl(220, 50%, 40%)" /> <path d="M 9 19 l2 -10, 11 7.1" fill="hsl(220, 50%, 60%)" /> <path d="M 7 29 l2 -10, 11 7.1" fill="hsl(220, 50%, 60%)" /> <path d="M 7 29 l2 10, 5 -7.1" fill="hsl(220, 50%, 60%)" /> <path d="M 9 39 l15 35, 1 -10" fill="hsl(220, 50%, 60%)" /> <path d="M 9 39 l5 -7, 5.6 2.9" fill="hsl(220, 50%, 40%)" /> <path d="M 9 39 l10.4 -4, 0 5" fill="hsl(220, 50%, 50%)" /> <path d="M 9 39 l10.4 1, -2 12.5" fill="hsl(220, 50%, 40%)" /> <path d="M 24 74 l-6 -2, 1 -10" fill="hsl(220, 50%, 40%)" /> </svg> </body> </html>