HBD DOGGY LOW POLYGON 63070049
✨ NATCHAPOL NUNTHASUNTI
<!DOCTYPE html> <html> <head> <title>พี ณัชพล นันทสันติ (63070049)</title> <style> body { margin: 0; background-color: #FA677D; animation: bgcl 4s ease-in infinite alternate; } svg { width: 100%; } .fil0 { fill: #555351 } .fil1 { fill: #494745 } .fil2 { fill: #63615C } .fil3 { fill: #5B5B5B } .fil4 { fill: #474646 } .fil5 { fill: #F2EAE2 } .fil6 { fill: #DCD5CF } .fil7 { fill: #A77843 } .fil8 { fill: #90693D } .fil9 { fill: #DEA266 } .fil10 { fill: #1CF48D } .fil11 { fill: #40D08C } .fil12 { fill: #715535 } .fil13 { fill: #585654 } .fil14 { fill: #7F7D7A } .fil15 { fill: #807C78 } .fil16 { fill: #60574C } .click { animation: de 500ms ease-in infinite alternate; } .click:hover { animation: de 200ms ease-in infinite alternate; cursor: pointer; } h1 { bottom: 2em; position: fixed; display: flex; text-align: center; justify-content: center; letter-spacing: 3px; font-family: Arial, Helvetica, sans-serif; font-size: 5em; text-shadow: 2px 2px 10px yellowgreen; color: #0B90FF; animation: big 2s ease-in infinite alternate; } @keyframes de { from { transform: rotatez(0deg) } to { transform: rotatez(-3deg) } } @keyframes big { from { transform: scale(1, 1) } to { transform: scale(1.1, 1.1) } } @keyframes bgcl { 0% { background-color: #FA677D; } 25% { background-color: #FF8700; } 50% { background-color: #8FFF00; } 75% { background-color: #00FBFF; } 100% { background-color: #D566FE; } } </style> </head> <body> <h1 id="demo"></h1> <svg viewBox="-12 20 100 100"> <g class="click" onclick="process()"> <path class="fil0" d="M40 ,92L35.9 62.6 34.7 86.6 z"></path> <path class="fil0" d="M 32 52 C 31 47 27 47 25 50 L 22 54 z"></path> <path class="fil0" d="M 22 63 C 25 69 27 68 32 52 z"></path> <path class="fil12" d="M37.9,69.2L38.5 67.3 35.9 62.7 z"></path> <path class="fil0" d="M31.7,55L35.9 62.8 37.8 55.6 40 47.4 z"></path> <path class="fil1" d="M 32 52 L 31 55 L 32 55 z"></path> <path class="fil1" d="M40,91.7L38 69.4 35.8 62.6 z"></path> <path class="fil0" d="M35.7,46.3L31.7 55 40 47.4 z"></path> <path class="fil2" d="M34.7,86.6L35.9 62.6 29.5 81.6 z"></path> <path class="fil2" d="M 22 63 L 22 54 L 32 52 Z M 32 52 z"></path> <path class="fil2" d="M31.7,55L35.7 46.3 31.6 51.7 z"></path> <path class="fil3" d="M38.5,67.3L40 70.7 40 67.3 z"></path> <path class="fil4" d="M40,70.7L38.5 67.3 37.9 69.2 z"></path> <path class="fil15" d="M29.7,82.2L35.85 62.7 32 65.4 z"></path> <path class="fil13" d="M31.6,51.8L35.7 46.3 33.9 46.8 32.3 47.3 z"> </path> <path class="fil14" d="M35.8,62.7L40 62.7 40 47.4 37.8 55.6 z"></path> <path class="fil6" d="M37.9,69.2L40 91.7 40 70.7 z"></path> <path class="fil7" d="M40,62.7L35.9 62.7 38.5 67.3 z"></path> <path class="fil8" d="M38.5,67.3L40 67.3 40 62.7 z"></path> <path class="fil0" d="M40,91.7L44.1 62.7 45.3 86.6 z"></path> <path class="fil0" d="M 48 52 L 58 63 L 58 54 z"></path> <path class="fil13" d="M 48 52 L 52 63 C 55 70 58 65 58 63 z"></path> <path class="fil12" d="M42.1,69.2L41.5 67.3 44.1 62.7 z"></path> <path class="fil1" d="M48.3,55L44.1 62.7 42.2 55.6 40 47.4 z"></path> <path class="fil1" d="M 48 52 L 49.5 55 L 48 55 z"></path> <path class="fil1" d="M40,91.7L42 69.4 44.1 62.7 z"></path> <path class="fil0" d="M44.2,46.3L48.3 55 40 47.4 z"></path> <path class="fil2" d="M45.3,86.6L44.1 62.7 50.5 81.6 z"></path> <path class="fil2" d="M 48 52 C 49 47 53 46 56 50 L 58 54 z"></path> <path class="fil2" d="M48.3,55L44.2 46.3 48.4 51.8 z"></path> <path class="fil3" d="M41.5,67.3L40 70.7 40 67.3 z"></path> <path class="fil4" d="M40,70.7L41.5 67.3 42.1 69.2 z"></path> <path class="fil16" d="M50.4,81.6L44.1 62.7 48 65.3 z"></path> <path class="fil13" d="M48.4,51.8L44.2 46.3 46.1 46.8 47.7 47.3 z"> </path> <path class="fil13" d="M44.1,62.7L40 62.7 40 47.4318 42.2 55.6 z"> </path> <path class="fil6" d="M42.1,69.2L40 91.7 40 70.7 z"></path> <path class="fil7" d="M40,62.7L44.1 62.7 41.5 67.3 z"></path> <path class="fil8" d="M41.5,67.3L40 67.3 40 62.7 z"></path> <path class="fil5" d="M50,100 L46 86 L50.4 81.6 z"></path> <path class="fil5" d="M50,100 L46 86 L48 100 z"></path> <path class="fil5" d="M30,100 L34 86 L29.6 81.6 z"></path> <path class="fil5" d="M30,100 L34 86 L32 100 z"></path> <path class="fil5" d="M 50 82 C 53 80 65 79 61 72 C 58 77 50 74 50 81 z"></path> <path class="fil10" stroke="url(#test)" stroke-width="0.5" d="M44,46.3L40 47.5 40 30 z"></path> <path class="fil11" stroke="url(#test)" stroke-width="0.5" d="M36,46.3L40 47.5 40 30 z"></path> <ellipse cx="45" cy="57" rx="1" ry="2" style="fill:#32302E;stroke:black;stroke-width:0.1"> <animate attributeName="ry" values="1;1;-2;1;1" dur="800ms" repeatCount="indefinite"></animate> </ellipse> <ellipse cx="35" cy="57" rx="1" ry="2" style="fill:#32302E;stroke:black;stroke-width:0.1"> <animate attributeName="ry" values="1;1,-2;1;1" dur="800ms" repeatCount="indefinite"></animate> </ellipse> <defs> <linearGradient id="test" gradientTransform="rotate(90)" x1="-0.3" x2="1.3"> <stop offset="0" stop-color="red"></stop> <stop offset="0.2857" stop-color="#ff0"></stop> <stop offset="0.4286" stop-color="#0f0"></stop> <stop offset="0.5714" stop-color="cyan"></stop> <stop offset="0.7142" stop-color="blue"></stop> <stop offset="0.8571" stop-color="#f0f"></stop> <stop offset="1" stop-color="red"></stop> <animateTransform attributeName="gradientTransform" attributeType="XML" type="rotate" from="0 0.5 0.5" to="360 0.5 0.5" dur="600ms" repeatCount="indefinite"></animateTransform> </linearGradient> </defs> </g> <g> <path class="fil10" d="M 29 101 C 31 100 37 99 36 94 C 37.3333 96.3333 39 97 40 101 z"></path> <path class="fil11" d="M 40 101 C 41 99 39 97 53 92 C 41 102 53 99 52 101 z"></path> <path class="fil10" d="M 52 101 L 73 101 C 67.6667 99 58 102 57 95 z"></path> </g> <g> <path class="fil10" d="M 21 101 C 32 98 37 99 33 95 C 34 94 39 97 35 101 z"></path> <path class="fil11" d="M 21 101 C 18 95 24 95 22 95 C 20 102 47 96 30 101 z"></path> <path class="fil10" d="M 28 89 C 28 95 24 94.3333 22 95 C 20 101 35 101 33 95 z"></path> </svg> <script> function process() { document.getElementById("demo").innerHTML = "HAPPY BIRTH DAY MY SWEETNESS DOGGY"; } </script> </body> </html>