diff --git a/fire.css b/fire.css index 755e859..ce12723 100644 --- a/fire.css +++ b/fire.css @@ -29,7 +29,7 @@ body { mix-blend-mode: exclusion; - animation: flickeringBone 5s ease-in-out infinite; + animation: flickeringBone 4s ease-in-out infinite; } .fire { @@ -39,7 +39,7 @@ body { height: 100vh; bottom: 0; - mix-blend-mode: hard-light; + mix-blend-mode: plus-lighter; /* making sure that flickering is making the fire ligther */ } .fire.on { @@ -53,30 +53,57 @@ body { animation: firing 10s linear infinite; } -.fire_limits { +.smog_limits { position: absolute; z-index: 2; width: 100vw; + height: 100vh; + bottom: 0; + + background-image: url(noiseSmall.svg), + radial-gradient( + ellipse 50vmax 90vmax at 33% 65%, + #000000 30%, + #ffffff 52% + ), + radial-gradient( + ellipse 50vmax 90vmax at 67% 65%, + #000000 30%, + white 52% + ); + background-size: 50vmin 50vmin, 100%, 100%; + background-blend-mode: difference; + + filter: grayscale(1) contrast(1.5) invert(1); + + mix-blend-mode: multiply; + + animation: smog 20s linear infinite; +} + +.fire_limits { + position: absolute; + z-index: 3; + width: 100vw; height: 100vmax; bottom: 0; background-image: radial-gradient( - ellipse 21% 24% at 50% 81%, - #cb8f8f 30%, - black 52% - ) - /* limiting the hight of the fire */, - radial-gradient(ellipse 20% 68% at 50% 62%, white 38%, black 52%), - radial-gradient(ellipse 45% 92% at 50% 77%, #a16d22 13%, black 52%); + ellipse 25% 58% at 50% 62%, + white 38%, + black 52% + ), + radial-gradient(ellipse 24% 24% at 50% 81%, #ffffff00 30%, black 52%), + radial-gradient(ellipse 69% 87% at 50% 77%, #ffffffa3 13%, black 95%); background-size: contain; - background-blend-mode: soft-light; + background-blend-mode: overlay; mix-blend-mode: multiply; } .fire_lights { position: absolute; - z-index: 3; + z-index: 4; width: 100vw; height: calc(100vw / var(--aspect-ratio)); bottom: 0; @@ -99,12 +126,12 @@ body { background-size: contain; background-blend-mode: color-burn; - animation: flickeringLights 5s ease-in-out infinite; + /* animation: flickeringLights 4s ease-in-out infinite; */ } .bon_front { position: absolute; - z-index: 4; + z-index: 5; width: 30vw; height: calc(30vw / var(--aspect-ratio)); bottom: 0; @@ -115,14 +142,13 @@ body { background-position: 51% 100%; background-repeat: no-repeat; background-size: contain; - background-blend-mode: color-burn; mix-blend-mode: color-dodge; } button { position: absolute; - z-index: 5; + z-index: 6; width: 100%; height: 100%; top: 0; @@ -136,6 +162,15 @@ button { cursor: pointer; } +@keyframes smog { + from { + background-position: 0 100vmin, 0, 0; + } + to { + background-position: 0 -100vmin, 0, 0; + } +} + @keyframes firing { from { background-position: -25vmin 100vmin, 25vmin 100vmin, 0 100vh, 0; @@ -150,7 +185,7 @@ button { filter: brightness(1); } 50% { - filter: brightness(10); + filter: brightness(7); } 100% { filter: brightness(1); @@ -161,7 +196,7 @@ button { filter: blur(7px) opacity(0.91); } 50% { - filter: blur(10px) opacity(0.95); + filter: blur(10px) opacity(0.99); } 100% { filter: blur(7px) opacity(0.91); diff --git a/index.html b/index.html index 7d6c7f2..2d9c7f5 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+
diff --git a/noiseSmall.svg b/noiseSmall.svg index 6d465be..6194227 100644 --- a/noiseSmall.svg +++ b/noiseSmall.svg @@ -3,7 +3,7 @@