From 2173ccdf6b0182a130bc8737d4aed3d548d08f77 Mon Sep 17 00:00:00 2001
From: Megaemce <1651451+Megaemce@users.noreply.github.com>
Date: Sat, 6 Apr 2024 21:48:24 +0700
Subject: [PATCH] add longer flames, add flickering animation, clean the css

---
 fire.css   | 58 ++++++++++++++++++++++++++++--------------------------
 noise1.svg |  2 +-
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/fire.css b/fire.css
index 7d6e45f..5ad6de2 100644
--- a/fire.css
+++ b/fire.css
@@ -1,5 +1,6 @@
 * {
     margin: 0;
+    width: 100%;
     height: 100%;
 }
 
@@ -10,22 +11,16 @@
 .bone_back {
     z-index: 0;
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-position: 51% bottom;
+    background-position: 51% 100%;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
-    filter: drop-shadow(0px 10px 15px black);
+    animation: flickering 10s cubic-bezier(0.4, 0, 1, 1) infinite;
 }
 
 .fire {
-    position: absolute;
     z-index: 1;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
 }
 
 .fire.on {
@@ -40,16 +35,12 @@
 }
 
 .fire_limits {
-    position: absolute;
     z-index: 2;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
 
     background-image: radial-gradient(
                 ellipse 21% 24% at 50% 81%,
-                white 30%,
+                #cb8f8f 30%,
                 black 52%
             )
             /* limiting the hight of the fire */,
@@ -60,12 +51,9 @@
 }
 
 .fire_lights {
-    position: absolute;
     z-index: 3;
-    width: 100%;
-    height: 100%;
-    min-width: 400px;
-    min-height: 400px;
+    position: absolute;
+
     background-image: radial-gradient(
             ellipse 45% 31% at 50% 88%,
             #08040454 12% /* center of fire light */,
@@ -88,12 +76,12 @@
 .bone_front {
     z-index: 4;
     position: absolute;
-    width: 100%;
-    height: 100%;
-    background-position: 51% bottom;
+
+    background-position: 51% 100%;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
+    background-blend-mode: color-burn;
     mix-blend-mode: color-dodge;
 }
 
@@ -110,17 +98,31 @@
     }
 }
 
+@keyframes flickering {
+    0% {
+        filter: brightness(1);
+    }
+    25% {
+        filter: brightness(12);
+    }
+    66% {
+        filter: brightness(5);
+    }
+    80% {
+        filter: brightness(21);
+    }
+}
+
 button {
-    position: fixed;
+    z-index: 5;
+    position: absolute;
+
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     font-size: xx-large;
     font-family: monospace;
     color: rgb(98, 48, 1);
-    background-color: #000000e1;
+    background-color: #000000;
     border: none;
     cursor: pointer;
-    z-index: 5; /* Ensure button is on top */
 }
diff --git a/noise1.svg b/noise1.svg
index e8bc106..85be7ae 100644
--- a/noise1.svg
+++ b/noise1.svg
@@ -4,7 +4,7 @@
 			seed="53322332"
 			stitchTiles="stitch" 
 			numOctaves="1" 
-			baseFrequency="0.009" />
+			baseFrequency="0.02 0.009" />
 	</filter>
 	<rect width="512" height="512" fill="white" filter="url(#noise)" />
 </svg>