From 6c3958b53d0ff5b3d5dd531ccca2aa2970a96679 Mon Sep 17 00:00:00 2001
From: Megaemce <1651451+Megaemce@users.noreply.github.com>
Date: Fri, 5 Apr 2024 15:46:53 +0700
Subject: [PATCH] version 5, more bright bone

---
 fire.css         | 36 ++++++++++++++++++------------------
 index.html       |  2 +-
 noiseMedium2.svg | 13 +++++++++++++
 3 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 noiseMedium2.svg

diff --git a/fire.css b/fire.css
index d7d6827..cb42e1f 100644
--- a/fire.css
+++ b/fire.css
@@ -24,7 +24,7 @@
     position: absolute;
     z-index: 1;
     width: 100%;
-    height: 97%;
+    height: 100%;
     min-width: 400px;
     min-height: 400px;
 }
@@ -33,11 +33,11 @@
     background-image: linear-gradient(
                 180deg,
                 rgb(0 0 0) 29% /* blending top of the smog */,
-                rgb(86, 86, 86) 80% /* making the central smog gray */,
-                transparent 88% /* ignore the fire */
+                rgb(145 75 0) 80% /* making the central smog gray */,
+                #00000000 88% /* ignore the fire */
             )
             /* linear gradient for the smog */,
-        url(noiseMedium.svg), url(noiseMedium.svg), url(noiseSmall.svg),
+        url(noiseMedium2.svg), url(noiseMedium2.svg), url(noiseSmall.svg),
         url(noiseBig.svg);
     background-blend-mode: color-burn /* smog gradient and noiseMedium */,
         color-burn /* noiseMedium and noiseMedium */,
@@ -56,13 +56,13 @@
     min-height: 400px;
 
     background-image: radial-gradient(
-                ellipse 21% 157% at 50% 87%,
+                ellipse 19% 167% at 50% 128%,
                 transparent 35%,
                 black 70%
             )
             /* limiting the hight of the fire */,
-        radial-gradient(ellipse 79% 131% at 50% 25%, transparent 44%, black 53%)
-            /* limiting the bottom of the fire to not go over the stones */;
+        radial-gradient(ellipse 28% 114% at 50% 33%, transparent 44%, black 53%);
+    /* limiting the bottom of the fire to not go over the stones */
 }
 
 .fire_lights {
@@ -73,34 +73,34 @@
     min-width: 400px;
     min-height: 400px;
     background-image: radial-gradient(
-            ellipse 48% 13% at 50% 95%,
-            #ff990033 12% /* center of fire light */,
-            #4040400c 50% /* general light outside bone */,
+            ellipse 45% 31% at 50% 88%,
+            #08040454 12% /* center of fire light */,
+            #372b1da3 42% /* general light outside bone */,
             transparent 100% /* no effect outside */
         ),
         /* horizontal lights on the ground around bone*/
             radial-gradient(
-                ellipse 22% 42% at 50% 85%,
-                #ff990033 0% /* center of fire light */,
-                #4040400c 28% /* general light outside bone */,
+                ellipse 18% 42% at 50% 86%,
+                #ffb20082 0% /* center of fire light */,
+                #ffad0017 28% /* general light outside bone */,
                 transparent 100% /* no effect outside */
             )
             /* vertical lights */;
-    mix-blend-mode: luminosity;
-    /* background-blend-mode: luminosity; */
+    mix-blend-mode: lighten;
+    background-blend-mode: color-burn;
+    filter: blur(10px) opacity(0.7);
 }
 
-.bone_back {
+.bone_front {
     z-index: 4;
     position: absolute;
     width: 100%;
     height: 100%;
-    filter: drop-shadow(0px 11px 14px black);
     background-position: 51% bottom;
     background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
-    mix-blend-mode: overlay;
+    mix-blend-mode: color-dodge;
 }
 
 @keyframes firing {
diff --git a/index.html b/index.html
index 9edca9e..0f5dc25 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
             <div id="fire" class="fire"></div>
             <div class="fire_limits"></div>
             <div class="fire_lights"></div>
-            <div class="bone_back"></div>
+            <div class="bone_front"></div>
             <button id="start" onclick="startSound()">START THE FIRE</button>
         </div>
 
diff --git a/noiseMedium2.svg b/noiseMedium2.svg
new file mode 100644
index 0000000..6d81336
--- /dev/null
+++ b/noiseMedium2.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256" style="filter: sepia(1) contrast(5)">>
+    <defs>
+        <filter id="noise" x="0" y="0" width="100%" height="100%">
+            <feTurbulence
+                            baseFrequency="0.025"
+                            numOctaves="1"
+                            seed="2"
+                            stitchTiles="stitch"
+                        />
+        </filter>
+    </defs>
+    <rect width="256" height="256" filter="url(#noise)" />
+</svg>