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>