Created Hat Class and added hat animations

hat.css

@@ -1,10 +1,71 @@
 
+:root {
+    --hat-color:#312802;
+    --hat-eye-color:#010101;
+}
+#hat-main {
+    margin-top: 15vh;
+    margin-left: auto;
+    margin-right: auto;
+    width: 20rem;
+    height: 20rem;
+    display: none;
+    text-shadow: 12px 12px 30px 30px rgba(168, 47, 47, 0.199);
+}
+#thoughts {
 
-#hat-canvas {
-    margin-top: 15%;
-    z-index: 1;
-    position: relative;
+    color:white;
+    margin-top: 30px;
+    font-family: sans-serif;
+    white-space: nowrap;
+    text-align: center;
     margin-left: auto;
     margin-right: auto;
-    display: block;
+    width: 30em;
+    overflow: hidden;
+
+}
+@keyframes type{ 
+    from { width: 0; } 
+  } 
+#hat-eye-left {
+    opacity: 0;
+}
+
+#hat-eye-right {
+    opacity: 0;
+}
+
+#hat-mouth {
+    opacity: 0;
+}
+
+
+@keyframes initialize-hat {
+    from {fill: var(--hat-color);opacity: 0 }
+    to {fill:  var(--hat-color);opacity: 1}
+}
+
+@keyframes hat-floating {
+	0% {
+		text-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.767);
+		transform: translateY(0px);
+	}
+	50% {
+		text-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
+		transform: translateY(-20px);
+	}
+	100% {
+		text-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.925);
+		transform: translateY(0px);
+	}
+}
+
+@keyframes initialize-hat-eyes {
+    from {opacity: 0}
+    to {fill: var(--hat-eye-color);opacity: 1;}
+}
+@keyframes initialize-hat-mouth {
+    from {fill:#000;opacity: 0}
+    to {fill:#000;opacity: 1;}
 }

hat.js

@@ -1,44 +1,48 @@
-let canvas = document.getElementById("hat-canvas");
-let context = canvas.getContext("2d");
-let scale = 1;
-
-
-function initializeHat() {
-
-    context.moveTo(0*scale,100*scale);
-    context.strokeStyle = '#493716';
-    context.fillStyle = '#493716';
-
-    context.lineTo(0*scale,90*scale);
-    context.stroke();
-    context.lineTo(100*scale,90*scale);
-    context.stroke();
-    context.lineTo(100*scale,100*scale);
-    context.stroke();
-    context.lineTo(0*scale,100*scale);
-    context.stroke();
-    context.fill();
-
-
-    context.moveTo(10*scale,80*scale);
-
-    context.lineTo(90*scale,80*scale);
-    context.stroke();
-    context.lineTo(70*scale,35*scale);
-    context.stroke();
-    context.lineTo(80*scale,0*scale);
-    context.stroke();
-    context.lineTo(45*scale,32*scale);
-    context.stroke();
-    context.lineTo(10*scale,80*scale);
-    context.stroke();
-    context.fill();
+class Hat {
+
+    static THOUGHTS = [
+        {
+            thought : "You seem to be a little shy...",
+            color: "green"
+        }
+    ]
+
+    intialize(scene = null, animation = "none", ANIM_TIME = 1){
+        let hat = document.getElementById("hat-main");
+        let hatBackground = document.getElementById("hat-bg");
+        let hatEyeLeft = document.getElementById("hat-eye-left")
+        let hatEyeRight = document.getElementById("hat-eye-right")
+        let hatMouth = document.getElementById("hat-mouth")
+
+        hat.style.display="block";
+        hatBackground.style.animation=`${ANIM_TIME}s initialize-hat forwards`;
+        hatEyeLeft.style.animation=`${ANIM_TIME}s  initialize-hat-eyes forwards 1s`;
+        hatEyeRight.style.animation=`${ANIM_TIME}s  initialize-hat-eyes forwards 1s`;
+        hatMouth.style.animation=`${ANIM_TIME}s  initialize-hat-mouth forwards 1.5s`;
+
+        if(scene != null && animation !="none"){
+            scene.style.animation = animation;
+        }
+    } 
 
+    float(ANIM_TIME) {
+        let hat = document.getElementById("hat-main");
+        hat.style.animation= `hat-floating ${ANIM_TIME}s ease-in-out infinite`
+    }
+
+    think(ANIME_TIME){
+        let thoughts = document.getElementById("thoughts");
+        let randomThought = this.getRandomThought();
+        thoughts.innerText = Hat.THOUGHTS[randomThought].thought;
+        thoughts.style.animation = "type 5s steps(60,start)";
+    }
+
+     getRandomThought() {
+        let min = 0;
+        let max = Hat.THOUGHTS.length - 1;
+        let index = Math.floor(Math.random() * (max - min + 1) + min); 
+        return index;
+      }
+
 }
 
-initializeHat();
-
-
-
-
-

index.html

@@ -11,14 +11,16 @@
 </head>
 <body>
 
-    <section class="wrapper">
-        <div id="stars"></div>
-        <div id="stars2"></div>
-        <div id="stars3"></div>
-        <canvas id="hat-canvas" height="100px" width="100px">
-    </section>
-    <canvas id="hat-canvas" height="100px" width="100px"></canvas>
-
+    <svg id="hat-main" width="241" height="293" viewBox="0 0 241 293" xmlns="http://www.w3.org/2000/svg">
+        <path id="hat-bg" d="M233.469 256.375H7.53125C3.37023 256.375 0 260.472 0 265.531V283.844C0 288.903 3.37023 293 7.53125 293H233.469C237.63 293 241 288.903 241 283.844V265.531C241 260.472 237.63 256.375 233.469 256.375ZM110.406 238.063L105.438 146.5C105.438 146.5 107.68 168.634 105.438 183.125C104.481 189.306 108.241 198.161 108.241 198.161L109.412 219.75L110.406 238.063H210.875L170.202 122.677C167.293 114.432 166.977 105.177 169.312 96.6671L195.812 0L107.518 61.3412C96.3797 69.0792 87.5638 80.938 82.3542 95.1907L30.125 238.063H97.9062H110.406Z" />
+        <path id="hat-eye-left" d="M74.2103 136.476L69.067 156.524L113.887 164.234L74.2103 136.476Z"/>
+        <path id="hat-eye-right" d="M160.912 132.621L126.378 165.005L167.524 157.295L160.912 132.621Z"/>
+        <path id="hat-mouth" d="M96.253 198.161H68.3323L96.253 206.642L124.174 195.076L153.564 206.642L178.546 198.161H149.89L124.174 183.511L96.253 198.161Z"/>
+        </svg>
+
+    <h3 id="thoughts"></h3>
+    <button type="button" id="sort-btn"> SORT </button>
     <script src="hat.js"></script>
+    <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -0,0 +1,13 @@
+
+const ANIM_TIME = 2;
+const FLOAT_ANIM_TIME = 3;
+let hat = new Hat();
+let scene = document.getElementsByTagName("html")[0];
+hat.intialize(scene,"1s initialize-scene forwards",ANIM_TIME);
+
+
+document.getElementById('sort-btn').addEventListener('click',()=>{
+    document.getElementById('sort-btn').style.animation="0.2s disappear forwards";
+    hat.float(FLOAT_ANIM_TIME);
+    hat.think(ANIM_TIME);
+})

style.css

@@ -1,10 +1,37 @@
 html {
     height: 100%;
     overflow: hidden;
-    background: radial-gradient(ellipse at bottom, #1b2735 0%,#090a0f 100%);
+    background: #000;
+
 }
 
+#sort-btn {
+    margin-left: auto;
+    margin-right:auto;
+    display: block;
+    margin-top: 5rem;
+    width: 16rem;
+    height: 3rem;
+    border-radius:25px;
+    border:none;
+    color: #ffff;
+    font-weight: normal;
+    font-size: 1.2rem;
+    background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%);
+
+}
+#sort-btn:hover {
+    cursor:pointer;
+}
 
+@keyframes disappear {
+    to {opacity: 0}
+}
+@keyframes initialize-scene {
+    from  {background: #000}
+    to {    background: radial-gradient(ellipse at bottom, #1b2735 0%,#090a0f 100%);
+    }
+}
 
 .wrapper {
   position: relative;

test.html

@@ -0,0 +1,7 @@
+<svg id="hat-main" width="241" height="293" viewBox="0 0 241 293" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path id="hat-background" d="M233.469 256.375H7.53125C3.37023 256.375 0 260.472 0 265.531V283.844C0 288.903 3.37023 293 7.53125 293H233.469C237.63 293 241 288.903 241 283.844V265.531C241 260.472 237.63 256.375 233.469 256.375ZM110.406 238.063L105.438 146.5C105.438 146.5 107.68 168.634 105.438 183.125C104.481 189.306 108.241 198.161 108.241 198.161L109.412 219.75L110.406 238.063H210.875L170.202 122.677C167.293 114.432 166.977 105.177 169.312 96.6671L195.812 0L107.518 61.3412C96.3797 69.0792 87.5638 80.938 82.3542 95.1907L30.125 238.063H97.9062H110.406Z" />
+    <path id="hat-eye-left" d="M74.2103 136.476L69.067 156.524L113.887 164.234L74.2103 136.476Z" />
+    <path id="hey-eye-right" d="M160.912 132.621L126.378 165.005L167.524 157.295L160.912 132.621Z" />
+    <path id="hat-mouth" d="M96.253 198.161H68.3323L96.253 206.642L124.174 195.076L153.564 206.642L178.546 198.161H149.89L124.174 183.511L96.253 198.161Z"/>
+</svg>
+