Last active
April 15, 2023 13:00
-
-
Save Jakobimatrix/23c30b5aa0e9a7f34646ec5156f3e6ec to your computer and use it in GitHub Desktop.
JavaScript extensions for tampermonkey, greasemonkey
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name darken the web | |
// @version 0.1 | |
// @description Bright Webpages get dimmed down. Its a Dark Mode for poor people! | |
// @author https://github.com/Jakobimatrix with a lot of inspiration from https://chat.openai.com/ and ChatGPT-4 | |
// @match *://*/* | |
// @grant none | |
// @run-at document-idle | |
// ==/UserScript== | |
// Known Issues: | |
/* | |
1) There are cases, where the contrast background to the text is too little after the transition to the dark side. | |
*/ | |
const threshold = 100; | |
/* | |
can you create a lookup table of the named colors such that the color name corresponds to a rgb string? | |
Sure! | |
FYI I did not check the colors... yolo :) | |
*/ | |
const namedColors = { | |
aliceblue: "rgba(240, 248, 255)", | |
antiquewhite: "rgba(250, 235, 215)", | |
aqua: "rgba(0, 255, 255)", | |
aquamarine: "rgba(127, 255, 212)", | |
azure: "rgba(240, 255, 255)", | |
beige: "rgba(245, 245, 220)", | |
bisque: "rgba(255, 228, 196)", | |
black: "rgba(0, 0, 0)", | |
blanchedalmond: "rgba(255, 235, 205)", | |
blue: "rgba(0, 0, 255)", | |
blueviolet: "rgba(138, 43, 226)", | |
brown: "rgba(165, 42, 42)", | |
burlywood: "rgba(222, 184, 135)", | |
cadetblue: "rgba(95, 158, 160)", | |
chartreuse: "rgba(127, 255, 0)", | |
chocolate: "rgba(210, 105, 30)", | |
coral: "rgba(255, 127, 80)", | |
cornflowerblue: "rgba(100, 149, 237)", | |
cornsilk: "rgba(255, 248, 220)", | |
crimson: "rgba(220, 20, 60)", | |
cyan: "rgba(0, 255, 255)", | |
darkblue: "rgba(0, 0, 139)", | |
darkcyan: "rgba(0, 139, 139)", | |
darkgoldenrod: "rgba(184, 134, 11)", | |
darkgray: "rgba(169, 169, 169)", | |
darkgreen: "rgba(0, 100, 0)", | |
darkgrey: "rgba(169, 169, 169)", | |
darkkhaki: "rgba(189, 183, 107)", | |
darkmagenta: "rgba(139, 0, 139)", | |
darkolivegreen: "rgba(85, 107, 47)", | |
darkorange: "rgba(255, 140, 0)", | |
darkorchid: "rgba(153, 50, 204)", | |
darkred: "rgba(139, 0, 0)", | |
darksalmon: "rgba(233, 150, 122)", | |
darkseagreen: "rgba(143, 188, 143)", | |
darkslateblue: "rgba(72, 61, 139)", | |
darkslategray: "rgba(47, 79, 79)", | |
darkslategrey: "rgba(47, 79, 79)", | |
darkturquoise: "rgba(0, 206, 209)", | |
darkviolet: "rgba(148, 0, 211)", | |
deeppink: "rgba(255, 20, 147)", | |
deepskyblue: "rgba(0, 191, 255)", | |
dimgray: "rgba(105, 105, 105)", | |
dimgrey: "rgba(105, 105, 105)", | |
dodgerblue: "rgba(30, 144, 255)", | |
firebrick: "rgba(178, 34, 34)", | |
floralwhite: "rgba(255, 250, 240)", | |
forestgreen: "rgba(34, 139, 34)", | |
fuchsia: "rgba(255, 0, 255)", | |
gainsboro: "rgba(220, 220, 220)", | |
ghostwhite: "rgba(248, 248, 255)", | |
gold: "rgba(255, 215, 0)", | |
goldenrod: "rgba(218, 165, 32)", | |
gray: "rgba(128, 128, 128)", | |
green: "rgba(0, 128, 0)", | |
greenyellow: "rgba(173, 255, 47)", | |
grey: "rgba(128, 128, 128)", | |
honeydew: "rgba(240, 255, 240)", | |
hotpink: "rgba(255, 105, 180)", | |
indianred: "rgba(205, 92, 92)", | |
indigo: "rgba(75, 0, 130)", | |
ivory: "rgba(255, 255, 240)", | |
khaki: "rgba(240, 230, 140)", | |
lavender: "rgba(230, 230, 250)", | |
lavenderblush: "rgba(255, 240, 245)", | |
lawngreen: "rgba(124, 252, 0)", | |
lemonchiffon: "rgba(255, 250, 205)", | |
lightblue: "rgba(173, 216, 230)", | |
lightcoral: "rgba(240, 128, 128)", | |
lightcyan: "rgba(224, 255, 255)", | |
lightgoldenrodyellow: "rgba(250, 250, 210)", | |
lightgray: "rgba(211, 211, 211)", | |
lightgreen: "rgba(144, 238, 144)", | |
lightgrey: "rgba(211, 211, 211)", | |
lightpink: "rgba(255, 182, 193)", | |
lightsalmon: "rgba(255, 160, 122)", | |
lightseagreen: "rgba(32, 178, 170)", | |
lightskyblue: "rgba(135, 206, 250)", | |
lightslategray: "rgba(119, 136, 153)", | |
lightslategrey: "rgba(119, 136, 153)", | |
lightsteelblue: "rgba(176, 196,222)", | |
lightyellow: "rgba(255, 255, 224)", | |
lime: "rgba(0, 255, 0)", | |
limegreen: "rgba(50, 205, 50)", | |
linen: "rgba(250, 240, 230)", | |
magenta: "rgba(255, 0, 255)", | |
maroon: "rgba(128, 0, 0)", | |
mediumaquamarine: "rgba(102, 205, 170)", | |
mediumblue: "rgba(0, 0, 205)", | |
mediumorchid: "rgba(186, 85, 211)", | |
mediumpurple: "rgba(147, 112, 219)", | |
mediumseagreen: "rgba(60, 179, 113)", | |
mediumslateblue: "rgba(123, 104, 238)", | |
mediumspringgreen: "rgba(0, 250, 154)", | |
mediumturquoise: "rgba(72, 209, 204)", | |
mediumvioletred: "rgba(199, 21, 133)", | |
midnightblue: "rgba(25, 25, 112)", | |
mintcream: "rgba(245, 255, 250)", | |
mistyrose: "rgba(255, 228, 225)", | |
moccasin: "rgba(255, 228, 181)", | |
navajowhite: "rgba(255, 222, 173)", | |
navy: "rgba(0, 0, 128)", | |
oldlace: "rgba(253, 245, 230)", | |
olive: "rgba(128, 128, 0)", | |
olivedrab: "rgba(107, 142, 35)", | |
orange: "rgba(255, 165, 0)", | |
orangered: "rgba(255, 69, 0)", | |
orchid: "rgba(218, 112, 214)", | |
palegoldenrod: "rgba(238, 232, 170)", | |
palegreen: "rgba(152, 251, 152)", | |
paleturquoise: "rgba(175, 238, 238)", | |
palevioletred: "rgba(219, 112, 147)", | |
papayawhip: "rgba(255, 239, 213)", | |
peachpuff: "rgba(255, 218, 185)", | |
peru: "rgba(205, 133, 63)", | |
pink: "rgba(255, 192, 203)", | |
plum: "rgba(221, 160, 221)", | |
powderblue: "rgba(176, 224, 230)", | |
purple: "rgba(128, 0, 128)", | |
rebeccapurple: "rgba(102, 51, 153)", | |
red: "rgba(255, 0, 0)", | |
rosybrown: "rgba(188, 143, 143)", | |
royalblue:"rgba(65, 105, 225)", | |
saddlebrown: "rgba(139, 69, 19)", | |
salmon: "rgba(250, 128, 114)", | |
sandybrown: "rgba(244, 164, 96)", | |
seagreen: "rgba(46, 139, 87)", | |
seashell: "rgba(255, 245, 238)", | |
sienna: "rgba(160, 82, 45)", | |
silver: "rgba(192, 192, 192)", | |
skyblue: "rgba(135, 206, 235)", | |
slateblue: "rgba(106, 90, 205)", | |
slategray: "rgba(112, 128, 144)", | |
slategrey: "rgba(112, 128, 144)", | |
snow: "rgba(255, 250, 250)", | |
springgreen: "rgba(0, 255, 127)", | |
steelblue: "rgba(70, 130, 180)", | |
tan: "rgba(210, 180, 140)", | |
teal: "rgba(0, 128, 128)", | |
thistle: "rgba(216, 191, 216)", | |
tomato: "rgba(255, 99, 71)", | |
turquoise: "rgba(64, 224, 208)", | |
violet: "rgba(238, 130, 238)", | |
wheat: "rgba(245, 222, 179)", | |
white: "rgba(255, 255, 255)", | |
whitesmoke: "rgba(245, 245, 245)", | |
yellow: "rgba(255, 255, 0)", | |
yellowgreen: "rgba(154, 205, 50)" | |
}; | |
function convertNamedColorsToRgb(element) { | |
const backgroundColor = getElementsBackGroundColor(element); | |
element.style.backgroundColor = namedColors[backgroundColor]; | |
} | |
/* | |
write a function that sets the background hex to rgba if it was set as hex. | |
consider that hex value can include the alpha value. | |
if the alphavalue is included, set it accordingly, else set it to 1 | |
Sure! Here's a function that takes an element as input, checks if it has a | |
background color set in hexadecimal format, and if so, converts it to RGBA | |
format with the appropriate alpha value: | |
*/ | |
function setHexToRgba(element) { | |
const backgroundColor = getElementsBackGroundColor(element); | |
// Check if background color is in hexadecimal format | |
const hexMatch = backgroundColor.match(/^#(?:[0-9a-fA-F]{3}){1,2}(?:[0-9a-fA-F]{2})?$/); | |
if (hexMatch) { | |
const hex = hexMatch[0]; | |
// Check if hex value includes alpha value | |
if (hex.length === 7) { | |
const r = parseInt(hex.substring(1, 3), 16); | |
const g = parseInt(hex.substring(3, 5), 16); | |
const b = parseInt(hex.substring(5, 7), 16); | |
// Set background color to RGBA format with alpha value from hex | |
element.style.backgroundColor = `rgb(${r}, ${g}, ${b})`; | |
} else if (hex.length === 9) { | |
const r = parseInt(hex.substring(1, 3), 16); | |
const g = parseInt(hex.substring(3, 5), 16); | |
const b = parseInt(hex.substring(5, 7), 16); | |
const a = parseInt(hex.substring(7, 9), 16) / 255; | |
// Set background color to RGBA format with alpha value from hex | |
element.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`; | |
} | |
} | |
console.log("after " + element.style.backgroundColor ); | |
} | |
function convertToRGB(element){ | |
const backgroundColor = getElementsBackGroundColor(element); | |
if(backgroundColor == "transparent" || backgroundColor == ""){ | |
return false; | |
} | |
if(!backgroundColor.startsWith("rgb")){ | |
if(backgroundColor.startsWith("#")){ | |
setHexToRgba(element); | |
}else if(namedColors.hasOwnProperty(backgroundColor)){ | |
convertNamedColorsToRgb(element); | |
} | |
}else{ | |
if (element === document.documentElement || element === document.body){ | |
const rgba = rgbaArrayFromStyle(backgroundColor); | |
// if its not set, it is transparent which makes it white in all browsers... | |
if(rgba[3] < 0.01){ | |
element.style.backgroundColor = `rgba(255, 255, 255, 1)`; | |
} | |
} | |
return true; | |
} | |
const backgroundColorNew = getElementsBackGroundColor(element); | |
if(!backgroundColorNew.startsWith("rgb")){ | |
console.log("failed to convert " + backgroundColor + " to rgba"); | |
return false; | |
} | |
return true; | |
} | |
function rgbaArrayFromStyle(style){ | |
const rgb = style.match(/\d+/g); | |
let rgba = new Array(); | |
rgba[0] = parseInt(rgb[0]); | |
rgba[1] = parseInt(rgb[1]); | |
rgba[2] = parseInt(rgb[2]); | |
if(rgb.length == 3){ | |
rgba[3] = 1.0; | |
}else if(rgb.length == 4) { | |
rgba[3] = parseFloat(rgb[3]); | |
}else if(rgb.length == 4){ | |
rgba[3] = parseFloat(rgb[3] + "." + rgb[4]); | |
} | |
return rgba; | |
} | |
function getElementsBackGroundColor(element){ | |
const computedStyle = window.getComputedStyle(element); | |
return computedStyle.backgroundColor; | |
} | |
/* | |
write a script that calculates the area in square pixels of a given element. use all possibilities of accessing | |
the width and height information and only return null if none of the possibilities result in a value different to nan or undefines | |
This script uses various methods to attempt to access the width and height information of the given element. | |
It first tries to get the values from the offsetWidth and offsetHeight properties of the element, | |
then from the style.width and style.height properties, then from the style.pixelWidth and style.pixelHeight | |
properties (if available), and finally falls back to using the getBoundingClientRect() method to get the width | |
and height from the bounding rectangle of the element. The script then checks if the retrieved width and height | |
values are valid numbers and not NaN or undefined, and calculates the area in square pixels by multiplying the | |
width and height. If any of the width or height values are NaN or undefined, the script returns null. | |
*/ | |
function getArea(element) { | |
let width, height; | |
// Attempt to get width and height from element's properties | |
if (element.offsetWidth && element.offsetHeight) { | |
width = element.offsetWidth; | |
height = element.offsetHeight; | |
} else if (element.style && element.style.width && element.style.height) { | |
width = parseFloat(element.style.width); | |
height = parseFloat(element.style.height); | |
} else if (element.style && element.style.pixelWidth && element.style.pixelHeight) { | |
width = element.style.pixelWidth; | |
height = element.style.pixelHeight; | |
} else if (element.getBoundingClientRect) { | |
const rect = element.getBoundingClientRect(); | |
width = rect.width; | |
height = rect.height; | |
} | |
// Check if width and height are valid numbers | |
if (!isNaN(width) && !isNaN(height) && width !== undefined && height !== undefined) { | |
// Calculate area in square pixels | |
return width * height; | |
} else { | |
// Return null if width or height is NaN or undefined | |
return null; | |
} | |
} | |
// The main Function, which became a little bittle a clusterfuck but oh well... | |
function lowerBrightnes(){ | |
// Get all HTML elements | |
const allElements = document.getElementsByTagName("*"); | |
var elemOverThreshold = new Array(); | |
var wayToTransparentElements = new Array(); | |
// Initialize variables to store sum of RGB values | |
let sumR = 0; | |
let sumG = 0; | |
let sumB = 0; | |
let count = 0; | |
// Loop through all elements | |
for (let i = 0; i < allElements.length; i++) { | |
const element = allElements[i]; | |
if(!convertToRGB(element)){ | |
continue; | |
} | |
const backgroundColor = getElementsBackGroundColor(element); | |
const rgba = rgbaArrayFromStyle(backgroundColor); | |
const targetArea = getArea(element); | |
if(targetArea == null){ | |
continue; | |
} | |
const multiplicator = targetArea*(255.0*rgba[3]); | |
if(isNaN(multiplicator)){ | |
continue; | |
} | |
sumR += rgba[0]*multiplicator; | |
sumG += rgba[1]*multiplicator; | |
sumB += rgba[2]*multiplicator; | |
count += multiplicator; | |
if(rgba[0]>threshold || rgba[1]>threshold || rgba[2]>threshold){ | |
elemOverThreshold.push(element); | |
} | |
} | |
// Calculate mean RGB values | |
const meanR = Math.round(sumR / count); | |
const meanG = Math.round(sumG / count); | |
const meanB = Math.round(sumB / count); | |
console.log(`Mean color in RGB: (${meanR}, ${meanG}, ${meanB})`); | |
const darkenR = meanR > threshold; | |
const darkenG = meanG > threshold; | |
const darkenB = meanB > threshold; | |
if(!darkenR && !darkenG && ! darkenB){ | |
return; | |
} | |
for (let i = 0; i < elemOverThreshold.length; i++) { | |
const element = elemOverThreshold[i]; | |
const backgroundColor = getElementsBackGroundColor(element); | |
const rgba = rgbaArrayFromStyle(backgroundColor); | |
const setR = darkenR ? darken(rgba[0], threshold) : rgba[0]; | |
const setG = darkenG ? darken(rgba[1], threshold) : rgba[1]; | |
const setB = darkenB ? darken(rgba[2], threshold) : rgba[2]; | |
element.style.transition = 'all 750ms linear'; | |
// hack: set color as bg color, use existing functions to convert it to rgba, calculate new color and set as color, than set calculated bg color. | |
element.style.backgroundColor = element.style.color; | |
if(convertToRGB(element)){ | |
const color = getElementsBackGroundColor(element); | |
const rgba_c = rgbaArrayFromStyle(color); | |
const setR_c = darkenR ? lighten(rgba_c[0], threshold) : rgba_c[0]; | |
const setG_c = darkenG ? lighten(rgba_c[1], threshold) : rgba_c[1]; | |
const setB_c = darkenB ? lighten(rgba_c[2], threshold) : rgba_c[2]; | |
element.style.color = `rgba(${setR_c}, ${setG_c}, ${setB_c}, ${rgba_c[3]})`; | |
} | |
element.style.backgroundColor = `rgba(${setR}, ${setG}, ${setB}, ${rgba[3]})`; | |
} | |
findLowContrastText(); | |
} | |
// Transform a value above the thrashold (between t and 255) to be between 0 and t. keeping the ratio | |
// values right next to the t will only be lowert a little, values next to 255 will be lowert alot | |
function darken (value, treshold){ | |
if (value < treshold){ | |
return value; | |
} | |
const range1 = 255 - treshold; | |
const range2 = treshold; | |
const mirroredValue = value - treshold; | |
return treshold - (mirroredValue*range2)/range1; | |
} | |
// Transform a value below the thrashold (between t and 0) to be between 255 and t. keeping the ratio | |
// values right next to the t will only be risen by a little, values next to 0 will be short below 255. | |
function lighten (value, treshold){ | |
if (value > treshold){ | |
return value; | |
} | |
const range1 = 255 - treshold; | |
const range2 = treshold; | |
const mirroredValue = treshold - value; | |
return (mirroredValue*range1)/range2 + treshold; | |
} | |
/* | |
write a script that finds low contrast text to background in an html document. | |
keep in mind that text could be inside an element with somewhat transparent background, | |
so in such cases you have to check the parents until you can calculate the background | |
color responsible for the contrast. If you identified text with low contrast, set the text color to white | |
Sure! Here's a script in JavaScript that finds low contrast text to background in an HTML document | |
and sets the text color to white if the contrast is low. It takes into consideration elements with | |
transparent background and checks parent elements until it can calculate the background color responsible for the contrast. | |
Note: This script uses the WCAG 2.0 guideline that recommends a minimum contrast ratio of 4.5:1 between text | |
and background colors for accessibility. You can adjust this threshold as per your requirements. | |
*/ | |
// Function to calculate contrast ratio | |
function calculateContrastRatio(color1, color2) { | |
var luminance1 = calculateRelativeLuminance(color1); | |
var luminance2 = calculateRelativeLuminance(color2); | |
var contrastRatio = (Math.max(luminance1, luminance2) + 0.05) / (Math.min(luminance1, luminance2) + 0.05); | |
return contrastRatio; | |
} | |
// Function to calculate relative luminance | |
function calculateRelativeLuminance(color) { | |
var rgb = color.match(/\d+/g); | |
var r = rgb[0] / 255; | |
var g = rgb[1] / 255; | |
var b = rgb[2] / 255; | |
var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b; | |
return luminance; | |
} | |
// Function to check if the contrast is low | |
function isLowContrast(color1, color2) { | |
var contrastRatio = calculateContrastRatio(color1, color2); | |
return contrastRatio < 4.5; | |
} | |
// Function to get computed style of an element | |
function getComputedStyle(el, styleProp) { | |
if (el.currentStyle) { | |
return el.currentStyle[styleProp]; | |
} else if (window.getComputedStyle) { | |
return window.getComputedStyle(el, null).getPropertyValue(styleProp); | |
} | |
return null; | |
} | |
// Function to find low contrast text and set text color to white | |
function findLowContrastText() { | |
var allElements = document.getElementsByTagName("*"); | |
for (var i = 0; i < allElements.length; i++) { | |
var element = allElements[i]; | |
var bgColor = getComputedStyle(element, "background-color"); | |
var textColor = getComputedStyle(element, "color"); | |
var parent = element.parentElement; | |
while (isLowContrast(bgColor, textColor) && bgColor !== "rgba(0, 0, 0, 0)" && parent !== null) { | |
bgColor = getComputedStyle(parent, "background-color"); | |
textColor = getComputedStyle(parent, "color"); | |
parent = parent.parentElement; | |
} | |
if (isLowContrast(bgColor, textColor)) { | |
element.style.color = "white"; | |
} | |
} | |
} | |
(function() { | |
'use strict'; | |
lowerBrightnes(); | |
var intervalId = window.setInterval(function(){ | |
lowerBrightnes(); | |
}, 5000); | |
})(); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Set Fire To the web | |
// @version 0.1 | |
// @description spread a fire annimation across a webpage. | |
// @author https://github.com/Jakobimatrix | |
// @match *://*/* | |
// @grant none | |
// ==/UserScript== | |
// Known Issues: | |
/* | |
1) The cpu might overheat | |
2) If you reload the page, the webpage still exists. | |
*/ | |
// Create a fire animation | |
const createFireAnimation = () => { | |
const fire = document.createElement('div'); | |
fire.classList.add('fire'); | |
return fire; | |
}; | |
// Set an element on fire | |
const setElementOnFire = (target, mouseX, mouseY) => { | |
if (target.classList.contains('on-fire') || target.classList.contains('fire') || target.classList.contains('burn_mark')) { | |
return; | |
} | |
target.classList.add('on-fire'); | |
console.log({x: mouseX, y: mouseY}); | |
if(mouseX == null){ | |
mouseX = target.getBoundingClientRect().left + (Math.random() * target.offsetWidth); | |
mouseY = target.getBoundingClientRect().top + (Math.random() * target.offsetHeight); | |
} | |
const primalfire = createFireAnimation(); | |
primalfire.style.left = `${mouseX}px`; | |
primalfire.style.top = `${mouseY}px`; | |
target.appendChild(primalfire); | |
const randomTime5 = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000); // Random time between 10 and 100 seconds in milliseconds | |
setTimeout(() => { | |
extinguishFire(primalfire); | |
}, randomTime5); | |
const targetArea = target.offsetWidth * target.offsetHeight; | |
const numFires = Math.floor(targetArea / 4000); // Number of fires based on the area of the clicked element | |
for (let i = 0; i < numFires; i++) { | |
const randomTime = Math.floor(Math.random() * (75000 - 4000 + 1) + 4000); // Random time between 4 and 75 seconds in milliseconds | |
setTimeout(() => { | |
const fire = createFireAnimation(); | |
const fireX = target.getBoundingClientRect().left + (Math.random() * target.offsetWidth); | |
const fireY = target.getBoundingClientRect().top + (Math.random() * target.offsetHeight); | |
fire.style.left = `${fireX}px`; | |
fire.style.top = `${fireY}px`; | |
target.appendChild(fire); | |
const randomTime2 = Math.floor(Math.random() * (100000 - 10000 + 1) + 10000); // Random time between 10 and 100 seconds in milliseconds | |
setTimeout(() => { | |
extinguishFire(fire); | |
}, randomTime2); | |
}, randomTime); | |
} | |
const randomTime3 = Math.floor(Math.random() * (75000 - 7000 + 1) + 7000); // Random time between 7 and 75 seconds in milliseconds | |
setTimeout(() => { | |
spreadFire(target); | |
}, randomTime3); | |
}; | |
// Extinguish fire for an element | |
const extinguishFire = (fire) => { | |
fire.classList.add('burn_mark'); | |
fire.classList.remove('fire'); | |
const burnDiameter = Math.floor(Math.random() * (125 - 75 + 1) + 75); // Random diameter between 30 and 100 pixels | |
fire.style.width = `${burnDiameter}px`; | |
fire.style.height = `${burnDiameter}px`; | |
}; | |
// Spread fire to parent and child elements | |
const spreadFire = (element) => { | |
const parent = element.parentElement; | |
const children = element.children; | |
setElementOnFire(parent, null, null); | |
for (let i = 0; i < children.length; i++) { | |
setElementOnFire(children[i], null, null); | |
} | |
}; | |
// Add click event listener to document | |
document.addEventListener('click', (event) => { | |
const target = event.target; | |
const mouseX = event.clientX; | |
const mouseY = event.clientY; | |
setElementOnFire(target, mouseX, mouseY); | |
event.stopPropagation(); | |
}); | |
// CSS for fire animation https://codepen.io/freedommayer/pen/vYRrarM | |
const fireAnimationStyles = ` | |
.fire { | |
position: absolute; | |
animation: burnBabyBurn 0.4s linear infinite; | |
transform: scale(5) translate(-13px, -15px);; | |
height: 1px; | |
width: 1px; | |
z-index: 9999; | |
} | |
.burn_mark { | |
position: absolute; | |
box-shadow: 0 0 10px 10px black; | |
z-index: 9997; | |
background: black; | |
border-radius: 50%; | |
border-width: 2px; | |
border-color: black; | |
transform: scale(1); | |
width: 1px; | |
height: 1px; | |
transition: 1s ease-in-out; | |
} | |
@keyframes burnBabyBurn { | |
/* Flame 1 */ | |
0% { | |
box-shadow: 12px 2px rgb(253 59 28), 12px 3px rgb(254 45 0), 13px 3px rgb(254 99 59), 12px 4px rgb(254 101 0), 13px 4px rgb(254 123 0), 14px 4px rgb(253 68 0), 15px 4px rgb(253 58 29), 12px 5px rgb(254 101 1), 13px 5px rgb(254 187 3), 14px 5px rgb(252 163 6), 15px 5px rgb(253 81 7), 16px 5px rgb(253 60 23), 12px 6px rgb(253 64 23), 13px 6px rgb(254 118 12), 14px 6px rgb(253 172 5), 15px 6px rgb(253 156 5), 16px 6px rgb(254 82 10), 17px 6px rgb(254 71 31), 13px 7px rgb(253 57 13), 14px 7px rgb(254 115 21), 15px 7px rgb(254 178 2), 16px 7px rgb(253 151 1), 17px 7px rgb(253 83 11), 13px 8px rgb(254 95 19), 14px 8px rgb(253 144 9), 15px 8px rgb(253 163 0), 16px 8px rgb(253 157 0), 17px 8px rgb(253 93 19), 11px 9px rgb(254 56 19), 12px 9px rgb(254 105 27), 13px 9px rgb(253 150 9), 14px 9px rgb(253 170 0), 15px 9px rgb(253 179 2), 16px 9px rgb(253 155 0), 17px 9px rgb(254 90 17), 10px 10px rgb(255 68 26), 11px 10px rgb(254 107 31), 12px 10px rgb(254 148 5), 13px 10px rgb(253 172 0), 14px 10px rgb(254 181 4), 15px 10px rgb(253 200 4), 16px 10px rgb(252 162 2), 17px 10px rgb(254 88 26), 8px 11px rgb(252 51 14), 9px 11px rgb(255 69 33), 10px 11px rgb(254 105 30), 11px 11px rgb(253 153 7), 12px 11px rgb(253 165 0), 13px 11px rgb(254 180 3), 14px 11px rgb(254 200 7), 15px 11px rgb(253 196 3), 16px 11px rgb(252 161 2), 17px 11px rgb(254 97 23), 18px 11px rgb(254 49 2), 7px 12px rgb(251 83 38), 8px 12px rgb(255 45 6), 9px 12px rgb(255 103 34), 10px 12px rgb(253 155 9), 11px 12px rgb(253 164 0), 12px 12px rgb(254 177 3), 13px 12px rgb(253 195 6), 14px 12px rgb(254 197 5), 15px 12px rgb(253 187 4), 16px 12px rgb(253 159 0), 17px 12px rgb(253 149 4), 18px 12px rgb(252 107 17), 7px 13px rgb(254 73 30), 8px 13px rgb(254 102 14), 9px 13px rgb(254 151 8), 10px 13px rgb(253 173 0), 11px 13px rgb(254 182 3), 12px 13px rgb(253 193 6), 13px 13px rgb(253 196 7), 14px 13px rgb(253 196 5), 15px 13px rgb(253 185 4), 16px 13px rgb(254 156 0), 17px 13px rgb(253 166 0), 18px 13px rgb(252 127 21), 19px 13px rgb(254 44 0), 6px 14px rgb(251 83 55), 7px 14px rgb(255 51 19), 8px 14px rgb(254 128 24), 9px 14px rgb(254 170 0), 10px 14px rgb(253 165 1), 11px 14px rgb(254 191 7), 12px 14px rgb(253 201 6), 13px 14px rgb(253 187 0), 14px 14px rgb(253 188 0), 15px 14px rgb(253 192 5), 16px 14px rgb(254 176 2), 17px 14px rgb(252 168 0), 18px 14px rgb(252 119 17), 19px 14px rgb(255 66 18), 6px 15px rgb(251 99 65), 7px 15px rgb(255 68 3), 8px 15px rgb(254 134 14), 9px 15px rgb(254 162 0), 10px 15px rgb(254 173 3), 11px 15px rgb(254 192 6), 12px 15px rgb(253 196 6), 13px 15px rgb(254 199 13), 14px 15px rgb(252 195 9), 15px 15px rgb(252 186 0), 16px 15px rgb(254 196 1), 17px 15px rgb(252 174 0), 18px 15px rgb(252 103 19), 19px 15px rgb(254 72 41), 20px 15px rgb(254 75 29), 6px 16px rgb(251 110 64), 7px 16px rgb(254 115 0), 8px 16px rgb(253 163 2), 9px 16px rgb(253 169 2), 10px 16px rgb(253 194 5), 11px 16px rgb(253 191 3), 12px 16px rgb(253 183 2), 13px 16px rgb(254 215 29), 14px 16px rgb(252 227 42), 15px 16px rgb(253 198 12), 16px 16px rgb(253 197 2), 17px 16px rgb(252 167 0), 18px 16px rgb(252 112 15), 19px 16px rgb(254 84 38), 20px 16px rgb(254 75 26), 6px 17px rgb(252 91 33), 7px 17px rgb(254 143 5), 8px 17px rgb(254 190 0), 9px 17px rgb(254 194 5), 10px 17px rgb(253 198 5), 11px 17px rgb(253 188 3), 12px 17px rgb(253 184 3), 13px 17px rgb(254 217 32), 14px 17px rgb(253 246 60), 15px 17px rgb(253 225 36), 16px 17px rgb(253 193 7), 17px 17px rgb(252 157 0), 18px 17px rgb(253 152 4), 19px 17px rgb(253 122 18), 20px 17px rgb(253 76 26), 21px 17px rgb(255 81 36), 6px 18px rgb(254 78 16), 7px 18px rgb(254 151 13), 8px 18px rgb(254 199 1), 9px 18px rgb(253 204 6), 10px 18px rgb(254 190 3), 11px 18px rgb(253 188 5), 12px 18px rgb(254 211 25), 13px 18px rgb(254 234 48), 14px 18px rgb(253 233 47), 15px 18px rgb(251 211 24), 16px 18px rgb(254 191 6), 17px 18px rgb(254 178 4), 18px 18px rgb(252 184 0), 19px 18px rgb(252 141 10), 20px 18px rgb(253 66 13), 21px 18px rgb(254 77 35), 6px 19px rgb(254 82 17), 7px 19px rgb(254 157 14), 8px 19px rgb(254 189 0), 9px 19px rgb(253 185 4), 10px 19px rgb(254 188 2), 11px 19px rgb(254 194 7), 12px 19px rgb(254 235 49), 13px 19px rgb(252 255 68), 14px 19px rgb(252 221 34), 15px 19px rgb(252 182 1), 16px 19px rgb(254 190 2), 17px 19px rgb(254 205 7), 18px 19px rgb(252 191 1), 19px 19px rgb(252 136 14), 20px 19px rgb(253 56 3), 21px 19px rgb(254 73 30), 6px 20px rgb(253 91 32), 7px 20px rgb(253 126 8), 8px 20px rgb(252 156 3), 9px 20px rgb(254 170 1), 10px 20px rgb(254 197 4), 11px 20px rgb(254 197 7), 12px 20px rgb(253 220 35), 13px 20px rgb(252 236 49), 14px 20px rgb(252 212 26), 15px 20px rgb(253 185 1), 16px 20px rgb(254 190 4), 17px 20px rgb(253 192 6), 18px 20px rgb(253 186 0), 19px 20px rgb(252 131 7), 20px 20px rgb(253 74 25), 21px 20px rgb(253 103 71), 6px 21px rgb(250 87 50), 7px 21px rgb(254 61 5), 8px 21px rgb(253 130 16), 9px 21px rgb(253 182 0), 10px 21px rgb(254 197 4), 11px 21px rgb(253 193 6), 12px 21px rgb(253 191 7), 13px 21px rgb(252 194 10), 14px 21px rgb(253 193 6), 15px 21px rgb(253 195 5), 16px 21px rgb(253 195 6), 17px 21px rgb(253 165 2), 18px 21px rgb(253 162 2), 19px 21px rgb(252 110 0), 20px 21px rgb(253 102 64), 6px 22px rgb(251 90 70), 7px 22px rgb(255 47 16), 8px 22px rgb(254 128 22), 9px 22px rgb(253 175 1), 10px 22px rgb(254 177 2), 11px 22px rgb(254 191 6), 12px 22px rgb(253 191 2), 13px 22px rgb(253 185 0), 14px 22px rgb(253 188 1), 15px 22px rgb(253 197 7), 16px 22px rgb(254 198 5), 17px 22px rgb(253 169 0), 18px 22px rgb(252 127 13), 19px 22px rgb(253 63 0), 7px 23px rgb(252 90 49), 8px 23px rgb(254 85 8), 9px 23px rgb(254 133 13), 10px 23px rgb(254 170 1), 11px 23px rgb(254 201 4), 12px 23px rgb(253 205 7), 13px 23px rgb(253 199 6), 14px 23px rgb(253 200 6), 15px 23px rgb(253 195 4), 16px 23px rgb(254 181 1), 17px 23px rgb(253 177 1), 18px 23px rgb(251 117 24), 19px 23px rgb(253 40 7), 7px 24px rgb(251 116 85), 8px 24px rgb(254 28 0), 9px 24px rgb(255 107 29), 10px 24px rgb(254 182 1), 11px 24px rgb(253 196 0), 12px 24px rgb(252 189 2), 13px 24px rgb(253 188 1), 14px 24px rgb(253 190 1), 15px 24px rgb(252 187 0), 16px 24px rgb(252 162 0), 17px 24px rgb(252 141 6), 18px 24px rgb(252 95 14), 8px 25px rgb(252 57 23), 9px 25px rgb(254 87 8), 10px 25px rgb(254 140 2), 11px 25px rgb(254 139 3), 12px 25px rgb(252 128 3), 13px 25px rgb(252 131 3), 14px 25px rgb(253 130 3), 15px 25px rgb(253 138 3), 16px 25px rgb(252 134 3), 17px 25px rgb(252 78 10), 18px 25px rgb(254 31 0), 9px 26px rgb(252 69 24), 10px 26px rgb(255 84 40), 11px 26px rgb(253 92 43), 12px 26px rgb(254 89 43), 13px 26px rgb(253 89 43), 14px 26px rgb(254 89 43), 15px 26px rgb(254 91 43), 16px 26px rgb(253 93 42), 17px 26px rgb(254 81 40); | |
} | |
33% { | |
box-shadow: 12px 2px rgb(253 59 28), 12px 3px rgb(254 45 0), 13px 3px rgb(254 99 59), 12px 4px rgb(254 101 0), 13px 4px rgb(254 123 0), 14px 4px rgb(253 68 0), 15px 4px rgb(253 58 29), 12px 5px rgb(254 101 1), 13px 5px rgb(254 187 3), 14px 5px rgb(252 163 6), 15px 5px rgb(253 81 7), 16px 5px rgb(253 60 23), 12px 6px rgb(253 64 23), 13px 6px rgb(254 118 12), 14px 6px rgb(253 172 5), 15px 6px rgb(253 156 5), 16px 6px rgb(254 82 10), 17px 6px rgb(254 71 31), 13px 7px rgb(253 57 13), 14px 7px rgb(254 115 21), 15px 7px rgb(254 178 2), 16px 7px rgb(253 151 1), 17px 7px rgb(253 83 11), 13px 8px rgb(254 95 19), 14px 8px rgb(253 144 9), 15px 8px rgb(253 163 0), 16px 8px rgb(253 157 0), 17px 8px rgb(253 93 19), 11px 9px rgb(254 56 19), 12px 9px rgb(254 105 27), 13px 9px rgb(253 150 9), 14px 9px rgb(253 170 0), 15px 9px rgb(253 179 2), 16px 9px rgb(253 155 0), 17px 9px rgb(254 90 17), 10px 10px rgb(255 68 26), 11px 10px rgb(254 107 31), 12px 10px rgb(254 148 5), 13px 10px rgb(253 172 0), 14px 10px rgb(254 181 4), 15px 10px rgb(253 200 4), 16px 10px rgb(252 162 2), 17px 10px rgb(254 88 26), 8px 11px rgb(252 51 14), 9px 11px rgb(255 69 33), 10px 11px rgb(254 105 30), 11px 11px rgb(253 153 7), 12px 11px rgb(253 165 0), 13px 11px rgb(254 180 3), 14px 11px rgb(254 200 7), 15px 11px rgb(253 196 3), 16px 11px rgb(252 161 2), 17px 11px rgb(254 97 23), 18px 11px rgb(254 49 2), 7px 12px rgb(251 83 38), 8px 12px rgb(255 45 6), 9px 12px rgb(255 103 34), 10px 12px rgb(253 155 9), 11px 12px rgb(253 164 0), 12px 12px rgb(254 177 3), 13px 12px rgb(253 195 6), 14px 12px rgb(254 197 5), 15px 12px rgb(253 187 4), 16px 12px rgb(253 159 0), 17px 12px rgb(253 149 4), 18px 12px rgb(252 107 17), 7px 13px rgb(254 73 30), 8px 13px rgb(254 102 14), 9px 13px rgb(254 151 8), 10px 13px rgb(253 173 0), 11px 13px rgb(254 182 3), 12px 13px rgb(253 193 6), 13px 13px rgb(253 196 7), 14px 13px rgb(253 196 5), 15px 13px rgb(253 185 4), 16px 13px rgb(254 156 0), 17px 13px rgb(253 166 0), 18px 13px rgb(252 127 21), 19px 13px rgb(254 44 0), 6px 14px rgb(251 83 55), 7px 14px rgb(255 51 19), 8px 14px rgb(254 128 24), 9px 14px rgb(254 170 0), 10px 14px rgb(253 165 1), 11px 14px rgb(254 191 7), 12px 14px rgb(253 201 6), 13px 14px rgb(253 187 0), 14px 14px rgb(253 188 0), 15px 14px rgb(253 192 5), 16px 14px rgb(254 176 2), 17px 14px rgb(252 168 0), 18px 14px rgb(252 119 17), 19px 14px rgb(255 66 18), 6px 15px rgb(251 99 65), 7px 15px rgb(255 68 3), 8px 15px rgb(254 134 14), 9px 15px rgb(254 162 0), 10px 15px rgb(254 173 3), 11px 15px rgb(254 192 6), 12px 15px rgb(253 196 6), 13px 15px rgb(254 199 13), 14px 15px rgb(252 195 9), 15px 15px rgb(252 186 0), 16px 15px rgb(254 196 1), 17px 15px rgb(252 174 0), 18px 15px rgb(252 103 19), 19px 15px rgb(254 72 41), 20px 15px rgb(254 75 29), 6px 16px rgb(251 110 64), 7px 16px rgb(254 115 0), 8px 16px rgb(253 163 2), 9px 16px rgb(253 169 2), 10px 16px rgb(253 194 5), 11px 16px rgb(253 191 3), 12px 16px rgb(253 183 2), 13px 16px rgb(254 215 29), 14px 16px rgb(252 227 42), 15px 16px rgb(253 198 12), 16px 16px rgb(253 197 2), 17px 16px rgb(252 167 0), 18px 16px rgb(252 112 15), 19px 16px rgb(254 84 38), 20px 16px rgb(254 75 26), 6px 17px rgb(252 91 33), 7px 17px rgb(254 143 5), 8px 17px rgb(254 190 0), 9px 17px rgb(254 194 5), 10px 17px rgb(253 198 5), 11px 17px rgb(253 188 3), 12px 17px rgb(253 184 3), 13px 17px rgb(254 217 32), 14px 17px rgb(253 246 60), 15px 17px rgb(253 225 36), 16px 17px rgb(253 193 7), 17px 17px rgb(252 157 0), 18px 17px rgb(253 152 4), 19px 17px rgb(253 122 18), 20px 17px rgb(253 76 26), 21px 17px rgb(255 81 36), 6px 18px rgb(254 78 16), 7px 18px rgb(254 151 13), 8px 18px rgb(254 199 1), 9px 18px rgb(253 204 6), 10px 18px rgb(254 190 3), 11px 18px rgb(253 188 5), 12px 18px rgb(254 211 25), 13px 18px rgb(254 234 48), 14px 18px rgb(253 233 47), 15px 18px rgb(251 211 24), 16px 18px rgb(254 191 6), 17px 18px rgb(254 178 4), 18px 18px rgb(252 184 0), 19px 18px rgb(252 141 10), 20px 18px rgb(253 66 13), 21px 18px rgb(254 77 35), 6px 19px rgb(254 82 17), 7px 19px rgb(254 157 14), 8px 19px rgb(254 189 0), 9px 19px rgb(253 185 4), 10px 19px rgb(254 188 2), 11px 19px rgb(254 194 7), 12px 19px rgb(254 235 49), 13px 19px rgb(252 255 68), 14px 19px rgb(252 221 34), 15px 19px rgb(252 182 1), 16px 19px rgb(254 190 2), 17px 19px rgb(254 205 7), 18px 19px rgb(252 191 1), 19px 19px rgb(252 136 14), 20px 19px rgb(253 56 3), 21px 19px rgb(254 73 30), 6px 20px rgb(253 91 32), 7px 20px rgb(253 126 8), 8px 20px rgb(252 156 3), 9px 20px rgb(254 170 1), 10px 20px rgb(254 197 4), 11px 20px rgb(254 197 7), 12px 20px rgb(253 220 35), 13px 20px rgb(252 236 49), 14px 20px rgb(252 212 26), 15px 20px rgb(253 185 1), 16px 20px rgb(254 190 4), 17px 20px rgb(253 192 6), 18px 20px rgb(253 186 0), 19px 20px rgb(252 131 7), 20px 20px rgb(253 74 25), 21px 20px rgb(253 103 71), 6px 21px rgb(250 87 50), 7px 21px rgb(254 61 5), 8px 21px rgb(253 130 16), 9px 21px rgb(253 182 0), 10px 21px rgb(254 197 4), 11px 21px rgb(253 193 6), 12px 21px rgb(253 191 7), 13px 21px rgb(252 194 10), 14px 21px rgb(253 193 6), 15px 21px rgb(253 195 5), 16px 21px rgb(253 195 6), 17px 21px rgb(253 165 2), 18px 21px rgb(253 162 2), 19px 21px rgb(252 110 0), 20px 21px rgb(253 102 64), 6px 22px rgb(251 90 70), 7px 22px rgb(255 47 16), 8px 22px rgb(254 128 22), 9px 22px rgb(253 175 1), 10px 22px rgb(254 177 2), 11px 22px rgb(254 191 6), 12px 22px rgb(253 191 2), 13px 22px rgb(253 185 0), 14px 22px rgb(253 188 1), 15px 22px rgb(253 197 7), 16px 22px rgb(254 198 5), 17px 22px rgb(253 169 0), 18px 22px rgb(252 127 13), 19px 22px rgb(253 63 0), 7px 23px rgb(252 90 49), 8px 23px rgb(254 85 8), 9px 23px rgb(254 133 13), 10px 23px rgb(254 170 1), 11px 23px rgb(254 201 4), 12px 23px rgb(253 205 7), 13px 23px rgb(253 199 6), 14px 23px rgb(253 200 6), 15px 23px rgb(253 195 4), 16px 23px rgb(254 181 1), 17px 23px rgb(253 177 1), 18px 23px rgb(251 117 24), 19px 23px rgb(253 40 7), 7px 24px rgb(251 116 85), 8px 24px rgb(254 28 0), 9px 24px rgb(255 107 29), 10px 24px rgb(254 182 1), 11px 24px rgb(253 196 0), 12px 24px rgb(252 189 2), 13px 24px rgb(253 188 1), 14px 24px rgb(253 190 1), 15px 24px rgb(252 187 0), 16px 24px rgb(252 162 0), 17px 24px rgb(252 141 6), 18px 24px rgb(252 95 14), 8px 25px rgb(252 57 23), 9px 25px rgb(254 87 8), 10px 25px rgb(254 140 2), 11px 25px rgb(254 139 3), 12px 25px rgb(252 128 3), 13px 25px rgb(252 131 3), 14px 25px rgb(253 130 3), 15px 25px rgb(253 138 3), 16px 25px rgb(252 134 3), 17px 25px rgb(252 78 10), 18px 25px rgb(254 31 0), 9px 26px rgb(252 69 24), 10px 26px rgb(255 84 40), 11px 26px rgb(253 92 43), 12px 26px rgb(254 89 43), 13px 26px rgb(253 89 43), 14px 26px rgb(254 89 43), 15px 26px rgb(254 91 43), 16px 26px rgb(253 93 42), 17px 26px rgb(254 81 40); | |
} | |
/* Flame 2 */ | |
33.01% { | |
box-shadow: 14px 0px rgb(252 118 89), 13px 1px rgb(247 79 49), 14px 1px rgb(254 90 66), 12px 2px rgb(252 120 94), 13px 2px rgb(252 42 8), 14px 2px rgb(255 60 26), 11px 3px rgb(249 109 74), 12px 3px rgb(254 65 12), 13px 3px rgb(255 95 8), 14px 3px rgb(254 84 30), 11px 4px rgb(253 49 9), 12px 4px rgb(254 101 20), 13px 4px rgb(253 158 4), 14px 4px rgb(253 86 32), 10px 5px rgb(252 116 79), 11px 5px rgb(255 48 0), 12px 5px rgb(255 113 24), 13px 5px rgb(253 161 7), 14px 5px rgb(252 96 18), 15px 5px rgb(254 70 32), 10px 6px rgb(253 72 34), 11px 6px rgb(255 114 17), 12px 6px rgb(254 158 6), 13px 6px rgb(253 161 2), 14px 6px rgb(253 149 6), 15px 6px rgb(253 84 0), 16px 6px rgb(253 60 25), 9px 7px rgb(253 64 26), 10px 7px rgb(255 51 20), 11px 7px rgb(254 128 26), 12px 7px rgb(254 187 0), 13px 7px rgb(254 184 1), 14px 7px rgb(253 174 0), 15px 7px rgb(252 108 24), 16px 7px rgb(254 28 5), 17px 7px rgb(253 110 77), 8px 8px rgb(252 74 31), 9px 8px rgb(255 62 11), 10px 8px rgb(254 109 36), 11px 8px rgb(253 134 9), 12px 8px rgb(254 179 0), 13px 8px rgb(254 198 4), 14px 8px rgb(253 163 1), 15px 8px rgb(253 122 12), 16px 8px rgb(252 79 9), 17px 8px rgb(252 96 53), 8px 9px rgb(253 71 33), 9px 9px rgb(255 67 10), 10px 9px rgb(254 148 21), 11px 9px rgb(253 170 0), 12px 9px rgb(254 170 3), 13px 9px rgb(254 192 6), 14px 9px rgb(253 169 0), 15px 9px rgb(254 166 0), 16px 9px rgb(252 136 15), 17px 9px rgb(254 56 19), 18px 9px rgb(255 78 39), 8px 10px rgb(253 75 35), 9px 10px rgb(255 69 10), 10px 10px rgb(254 145 19), 11px 10px rgb(253 169 0), 12px 10px rgb(254 168 3), 13px 10px rgb(254 194 7), 14px 10px rgb(254 196 4), 15px 10px rgb(253 177 0), 16px 10px rgb(252 127 13), 17px 10px rgb(254 59 15), 18px 10px rgb(255 83 40), 19px 10px rgb(251 108 60), 8px 11px rgb(254 89 22), 9px 11px rgb(254 137 11), 10px 11px rgb(254 160 2), 11px 11px rgb(253 153 0), 12px 11px rgb(254 166 2), 13px 11px rgb(254 196 6), 14px 11px rgb(254 199 6), 15px 11px rgb(252 166 1), 16px 11px rgb(253 148 2), 17px 11px rgb(253 128 10), 18px 11px rgb(254 85 32), 19px 11px rgb(252 78 38), 7px 12px rgb(253 51 15), 8px 12px rgb(255 98 20), 9px 12px rgb(254 168 11), 10px 12px rgb(254 169 0), 11px 12px rgb(253 145 0), 12px 12px rgb(254 161 0), 13px 12px rgb(254 195 5), 14px 12px rgb(253 196 7), 15px 12px rgb(254 181 4), 16px 12px rgb(252 184 0), 17px 12px rgb(252 154 8), 18px 12px rgb(253 73 35), 19px 12px rgb(255 50 18), 20px 12px rgb(254 95 58), 7px 13px rgb(253 58 15), 8px 13px rgb(255 96 20), 9px 13px rgb(254 159 9), 10px 13px rgb(254 167 0), 11px 13px rgb(253 158 1), 12px 13px rgb(254 177 3), 13px 13px rgb(253 191 5), 14px 13px rgb(253 186 0), 15px 13px rgb(254 195 3), 16px 13px rgb(252 188 3), 17px 13px rgb(253 147 3), 18px 13px rgb(254 111 22), 19px 13px rgb(255 86 28), 20px 13px rgb(255 53 13), 7px 14px rgb(253 58 13), 8px 14px rgb(255 98 21), 9px 14px rgb(254 153 9), 10px 14px rgb(254 159 0), 11px 14px rgb(254 169 4), 12px 14px rgb(253 199 5), 13px 14px rgb(253 193 7), 14px 14px rgb(254 196 11), 15px 14px rgb(253 194 4), 16px 14px rgb(253 176 0), 17px 14px rgb(255 165 1), 18px 14px rgb(253 157 3), 19px 14px rgb(251 95 27), 20px 14px rgb(254 49 14), 21px 14px rgb(253 107 68), 7px 15px rgb(254 54 14), 8px 15px rgb(255 92 25), 9px 15px rgb(254 154 9), 10px 15px rgb(254 165 0), 11px 15px rgb(253 173 4), 12px 15px rgb(253 198 4), 13px 15px rgb(253 193 8), 14px 15px rgb(255 225 40), 15px 15px rgb(253 209 25), 16px 15px rgb(253 186 2), 17px 15px rgb(254 190 2), 18px 15px rgb(252 162 0), 19px 15px rgb(252 99 21), 20px 15px rgb(255 74 32), 21px 15px rgb(254 84 34), 6px 16px rgb(251 90 53), 7px 16px rgb(255 63 29), 8px 16px rgb(254 92 32), 9px 16px rgb(254 155 7), 10px 16px rgb(254 187 0), 11px 16px rgb(253 190 6), 12px 16px rgb(253 189 1), 13px 16px rgb(253 190 5), 14px 16px rgb(255 232 48), 15px 16px rgb(254 235 54), 16px 16px rgb(253 215 23), 17px 16px rgb(252 190 3), 18px 16px rgb(253 154 0), 19px 16px rgb(253 144 7), 20px 16px rgb(254 112 24), 21px 16px rgb(254 70 22), 22px 16px rgb(254 66 18), 6px 17px rgb(255 64 25), 7px 17px rgb(255 96 28), 8px 17px rgb(254 132 18), 9px 17px rgb(253 157 2), 10px 17px rgb(254 189 1), 11px 17px rgb(253 201 5), 12px 17px rgb(254 197 10), 13px 17px rgb(254 216 31), 14px 17px rgb(255 235 50), 15px 17px rgb(255 246 62), 16px 17px rgb(253 225 36), 17px 17px rgb(253 186 4), 18px 17px rgb(254 173 0), 19px 17px rgb(253 178 0), 20px 17px rgb(252 126 14), 21px 17px rgb(253 69 25), 22px 17px rgb(254 67 24), 6px 18px rgb(255 66 23), 7px 18px rgb(254 116 15), 8px 18px rgb(253 174 2), 9px 18px rgb(253 177 0), 10px 18px rgb(253 183 3), 11px 18px rgb(253 192 1), 12px 18px rgb(254 209 22), 13px 18px rgb(255 249 65), 14px 18px rgb(255 247 61), 15px 18px rgb(255 247 63), 16px 18px rgb(252 223 38), 17px 18px rgb(253 190 3), 18px 18px rgb(253 192 1), 19px 18px rgb(252 180 1), 20px 18px rgb(252 123 18), 21px 18px rgb(253 64 17), 22px 18px rgb(254 59 14), 6px 19px rgb(254 61 19), 7px 19px rgb(254 113 15), 8px 19px rgb(253 181 1), 9px 19px rgb(254 202 3), 10px 19px rgb(253 195 6), 11px 19px rgb(253 187 2), 12px 19px rgb(253 203 19), 13px 19px rgb(254 235 51), 14px 19px rgb(255 233 47), 15px 19px rgb(255 231 46), 16px 19px rgb(252 213 27), 17px 19px rgb(254 193 3), 18px 19px rgb(253 198 4), 19px 19px rgb(252 176 1), 20px 19px rgb(252 114 13), 21px 19px rgb(253 78 36), 22px 19px rgb(254 92 54), 6px 20px rgb(254 71 34), 7px 20px rgb(254 111 15), 8px 20px rgb(254 181 2), 9px 20px rgb(254 206 1), 10px 20px rgb(254 195 6), 11px 20px rgb(254 188 4), 12px 20px rgb(253 194 7), 13px 20px rgb(253 196 10), 14px 20px rgb(253 196 11), 15px 20px rgb(253 196 11), 16px 20px rgb(253 196 9), 17px 20px rgb(254 196 5), 18px 20px rgb(253 192 5), 19px 20px rgb(252 178 0), 20px 20px rgb(252 105 3), 21px 20px rgb(253 109 82), 6px 21px rgb(251 110 81), 7px 21px rgb(253 100 4), 8px 21px rgb(255 172 0), 9px 21px rgb(253 182 4), 10px 21px rgb(253 169 1), 11px 21px rgb(254 182 3), 12px 21px rgb(253 196 4), 13px 21px rgb(254 186 0), 14px 21px rgb(252 185 0), 15px 21px rgb(253 185 0), 16px 21px rgb(253 192 3), 17px 21px rgb(253 192 5), 18px 21px rgb(253 174 2), 19px 21px rgb(253 170 0), 20px 21px rgb(251 103 1), 21px 21px #ff6c31, 7px 22px rgb(252 76 11), 8px 22px rgb(255 110 4), 9px 22px rgb(253 122 15), 10px 22px rgb(254 145 3), 11px 22px rgb(253 177 1), 12px 22px rgb(253 188 4), 13px 22px rgb(254 198 6), 14px 22px rgb(253 198 6), 15px 22px rgb(254 200 6), 16px 22px rgb(253 192 5), 17px 22px rgb(253 176 1), 18px 22px rgb(254 160 0), 19px 22px rgb(253 135 9), 20px 22px rgb(253 79 4), 21px 22px #ff6c31, 7px 23px rgb(252 86 48), 8px 23px rgb(255 51 20), 9px 23px rgb(254 57 17), 10px 23px rgb(255 115 14), 11px 23px rgb(253 159 4), 12px 23px rgb(254 173 0), 13px 23px rgb(253 191 2), 14px 23px rgb(253 191 3), 15px 23px rgb(253 193 2), 16px 23px rgb(252 181 0), 17px 23px rgb(253 159 1), 18px 23px rgb(253 136 10), 19px 23px rgb(252 87 30), 20px 23px rgb(254 45 7), 21px 23px rgb(255 112 73), 9px 24px rgb(255 80 52), 10px 24px rgb(252 77 35), 11px 24px rgb(253 95 2), 12px 24px rgb(254 149 2), 13px 24px rgb(252 151 5), 14px 24px rgb(252 148 8), 15px 24px rgb(252 148 5), 16px 24px rgb(253 156 4), 17px 24px rgb(253 141 12), 18px 24px rgb(253 86 32), 19px 24px rgb(254 57 24), 20px 24px rgb(255 69 31), 11px 25px rgb(254 57 19), 12px 25px rgb(254 93 32), 13px 25px rgb(254 86 21), 14px 25px rgb(254 84 21), 15px 25px rgb(254 85 22), 16px 25px rgb(254 90 21), 17px 25px rgb(254 89 24), 18px 25px rgb(254 70 25), 19px 25px rgb(254 63 25), 13px 26px rgb(251 65 28), 14px 26px rgb(255 65 26), 15px 26px rgb(254 73 37), 16px 26px rgb(254 71 37), 17px 26px rgb(254 60 18), 18px 26px rgb(254 82 27), 13px 27px rgb(249 96 52), 14px 27px rgb(255 98 50), 15px 27px rgb(254 108 63), 16px 27px rgb(254 107 64); | |
} | |
66% { | |
box-shadow: 14px 0px rgb(252 118 89), 13px 1px rgb(247 79 49), 14px 1px rgb(254 90 66), 12px 2px rgb(252 120 94), 13px 2px rgb(252 42 8), 14px 2px rgb(255 60 26), 11px 3px rgb(249 109 74), 12px 3px rgb(254 65 12), 13px 3px rgb(255 95 8), 14px 3px rgb(254 84 30), 11px 4px rgb(253 49 9), 12px 4px rgb(254 101 20), 13px 4px rgb(253 158 4), 14px 4px rgb(253 86 32), 10px 5px rgb(252 116 79), 11px 5px rgb(255 48 0), 12px 5px rgb(255 113 24), 13px 5px rgb(253 161 7), 14px 5px rgb(252 96 18), 15px 5px rgb(254 70 32), 10px 6px rgb(253 72 34), 11px 6px rgb(255 114 17), 12px 6px rgb(254 158 6), 13px 6px rgb(253 161 2), 14px 6px rgb(253 149 6), 15px 6px rgb(253 84 0), 16px 6px rgb(253 60 25), 9px 7px rgb(253 64 26), 10px 7px rgb(255 51 20), 11px 7px rgb(254 128 26), 12px 7px rgb(254 187 0), 13px 7px rgb(254 184 1), 14px 7px rgb(253 174 0), 15px 7px rgb(252 108 24), 16px 7px rgb(254 28 5), 17px 7px rgb(253 110 77), 8px 8px rgb(252 74 31), 9px 8px rgb(255 62 11), 10px 8px rgb(254 109 36), 11px 8px rgb(253 134 9), 12px 8px rgb(254 179 0), 13px 8px rgb(254 198 4), 14px 8px rgb(253 163 1), 15px 8px rgb(253 122 12), 16px 8px rgb(252 79 9), 17px 8px rgb(252 96 53), 8px 9px rgb(253 71 33), 9px 9px rgb(255 67 10), 10px 9px rgb(254 148 21), 11px 9px rgb(253 170 0), 12px 9px rgb(254 170 3), 13px 9px rgb(254 192 6), 14px 9px rgb(253 169 0), 15px 9px rgb(254 166 0), 16px 9px rgb(252 136 15), 17px 9px rgb(254 56 19), 18px 9px rgb(255 78 39), 8px 10px rgb(253 75 35), 9px 10px rgb(255 69 10), 10px 10px rgb(254 145 19), 11px 10px rgb(253 169 0), 12px 10px rgb(254 168 3), 13px 10px rgb(254 194 7), 14px 10px rgb(254 196 4), 15px 10px rgb(253 177 0), 16px 10px rgb(252 127 13), 17px 10px rgb(254 59 15), 18px 10px rgb(255 83 40), 19px 10px rgb(251 108 60), 8px 11px rgb(254 89 22), 9px 11px rgb(254 137 11), 10px 11px rgb(254 160 2), 11px 11px rgb(253 153 0), 12px 11px rgb(254 166 2), 13px 11px rgb(254 196 6), 14px 11px rgb(254 199 6), 15px 11px rgb(252 166 1), 16px 11px rgb(253 148 2), 17px 11px rgb(253 128 10), 18px 11px rgb(254 85 32), 19px 11px rgb(252 78 38), 7px 12px rgb(253 51 15), 8px 12px rgb(255 98 20), 9px 12px rgb(254 168 11), 10px 12px rgb(254 169 0), 11px 12px rgb(253 145 0), 12px 12px rgb(254 161 0), 13px 12px rgb(254 195 5), 14px 12px rgb(253 196 7), 15px 12px rgb(254 181 4), 16px 12px rgb(252 184 0), 17px 12px rgb(252 154 8), 18px 12px rgb(253 73 35), 19px 12px rgb(255 50 18), 20px 12px rgb(254 95 58), 7px 13px rgb(253 58 15), 8px 13px rgb(255 96 20), 9px 13px rgb(254 159 9), 10px 13px rgb(254 167 0), 11px 13px rgb(253 158 1), 12px 13px rgb(254 177 3), 13px 13px rgb(253 191 5), 14px 13px rgb(253 186 0), 15px 13px rgb(254 195 3), 16px 13px rgb(252 188 3), 17px 13px rgb(253 147 3), 18px 13px rgb(254 111 22), 19px 13px rgb(255 86 28), 20px 13px rgb(255 53 13), 7px 14px rgb(253 58 13), 8px 14px rgb(255 98 21), 9px 14px rgb(254 153 9), 10px 14px rgb(254 159 0), 11px 14px rgb(254 169 4), 12px 14px rgb(253 199 5), 13px 14px rgb(253 193 7), 14px 14px rgb(254 196 11), 15px 14px rgb(253 194 4), 16px 14px rgb(253 176 0), 17px 14px rgb(255 165 1), 18px 14px rgb(253 157 3), 19px 14px rgb(251 95 27), 20px 14px rgb(254 49 14), 21px 14px rgb(253 107 68), 7px 15px rgb(254 54 14), 8px 15px rgb(255 92 25), 9px 15px rgb(254 154 9), 10px 15px rgb(254 165 0), 11px 15px rgb(253 173 4), 12px 15px rgb(253 198 4), 13px 15px rgb(253 193 8), 14px 15px rgb(255 225 40), 15px 15px rgb(253 209 25), 16px 15px rgb(253 186 2), 17px 15px rgb(254 190 2), 18px 15px rgb(252 162 0), 19px 15px rgb(252 99 21), 20px 15px rgb(255 74 32), 21px 15px rgb(254 84 34), 6px 16px rgb(251 90 53), 7px 16px rgb(255 63 29), 8px 16px rgb(254 92 32), 9px 16px rgb(254 155 7), 10px 16px rgb(254 187 0), 11px 16px rgb(253 190 6), 12px 16px rgb(253 189 1), 13px 16px rgb(253 190 5), 14px 16px rgb(255 232 48), 15px 16px rgb(254 235 54), 16px 16px rgb(253 215 23), 17px 16px rgb(252 190 3), 18px 16px rgb(253 154 0), 19px 16px rgb(253 144 7), 20px 16px rgb(254 112 24), 21px 16px rgb(254 70 22), 22px 16px rgb(254 66 18), 6px 17px rgb(255 64 25), 7px 17px rgb(255 96 28), 8px 17px rgb(254 132 18), 9px 17px rgb(253 157 2), 10px 17px rgb(254 189 1), 11px 17px rgb(253 201 5), 12px 17px rgb(254 197 10), 13px 17px rgb(254 216 31), 14px 17px rgb(255 235 50), 15px 17px rgb(255 246 62), 16px 17px rgb(253 225 36), 17px 17px rgb(253 186 4), 18px 17px rgb(254 173 0), 19px 17px rgb(253 178 0), 20px 17px rgb(252 126 14), 21px 17px rgb(253 69 25), 22px 17px rgb(254 67 24), 6px 18px rgb(255 66 23), 7px 18px rgb(254 116 15), 8px 18px rgb(253 174 2), 9px 18px rgb(253 177 0), 10px 18px rgb(253 183 3), 11px 18px rgb(253 192 1), 12px 18px rgb(254 209 22), 13px 18px rgb(255 249 65), 14px 18px rgb(255 247 61), 15px 18px rgb(255 247 63), 16px 18px rgb(252 223 38), 17px 18px rgb(253 190 3), 18px 18px rgb(253 192 1), 19px 18px rgb(252 180 1), 20px 18px rgb(252 123 18), 21px 18px rgb(253 64 17), 22px 18px rgb(254 59 14), 6px 19px rgb(254 61 19), 7px 19px rgb(254 113 15), 8px 19px rgb(253 181 1), 9px 19px rgb(254 202 3), 10px 19px rgb(253 195 6), 11px 19px rgb(253 187 2), 12px 19px rgb(253 203 19), 13px 19px rgb(254 235 51), 14px 19px rgb(255 233 47), 15px 19px rgb(255 231 46), 16px 19px rgb(252 213 27), 17px 19px rgb(254 193 3), 18px 19px rgb(253 198 4), 19px 19px rgb(252 176 1), 20px 19px rgb(252 114 13), 21px 19px rgb(253 78 36), 22px 19px rgb(254 92 54), 6px 20px rgb(254 71 34), 7px 20px rgb(254 111 15), 8px 20px rgb(254 181 2), 9px 20px rgb(254 206 1), 10px 20px rgb(254 195 6), 11px 20px rgb(254 188 4), 12px 20px rgb(253 194 7), 13px 20px rgb(253 196 10), 14px 20px rgb(253 196 11), 15px 20px rgb(253 196 11), 16px 20px rgb(253 196 9), 17px 20px rgb(254 196 5), 18px 20px rgb(253 192 5), 19px 20px rgb(252 178 0), 20px 20px rgb(252 105 3), 21px 20px rgb(253 109 82), 6px 21px rgb(251 110 81), 7px 21px rgb(253 100 4), 8px 21px rgb(255 172 0), 9px 21px rgb(253 182 4), 10px 21px rgb(253 169 1), 11px 21px rgb(254 182 3), 12px 21px rgb(253 196 4), 13px 21px rgb(254 186 0), 14px 21px rgb(252 185 0), 15px 21px rgb(253 185 0), 16px 21px rgb(253 192 3), 17px 21px rgb(253 192 5), 18px 21px rgb(253 174 2), 19px 21px rgb(253 170 0), 20px 21px rgb(251 103 1), 21px 21px #ff6c31, 7px 22px rgb(252 76 11), 8px 22px rgb(255 110 4), 9px 22px rgb(253 122 15), 10px 22px rgb(254 145 3), 11px 22px rgb(253 177 1), 12px 22px rgb(253 188 4), 13px 22px rgb(254 198 6), 14px 22px rgb(253 198 6), 15px 22px rgb(254 200 6), 16px 22px rgb(253 192 5), 17px 22px rgb(253 176 1), 18px 22px rgb(254 160 0), 19px 22px rgb(253 135 9), 20px 22px rgb(253 79 4), 21px 22px #ff6c31, 7px 23px rgb(252 86 48), 8px 23px rgb(255 51 20), 9px 23px rgb(254 57 17), 10px 23px rgb(255 115 14), 11px 23px rgb(253 159 4), 12px 23px rgb(254 173 0), 13px 23px rgb(253 191 2), 14px 23px rgb(253 191 3), 15px 23px rgb(253 193 2), 16px 23px rgb(252 181 0), 17px 23px rgb(253 159 1), 18px 23px rgb(253 136 10), 19px 23px rgb(252 87 30), 20px 23px rgb(254 45 7), 21px 23px rgb(255 112 73), 9px 24px rgb(255 80 52), 10px 24px rgb(252 77 35), 11px 24px rgb(253 95 2), 12px 24px rgb(254 149 2), 13px 24px rgb(252 151 5), 14px 24px rgb(252 148 8), 15px 24px rgb(252 148 5), 16px 24px rgb(253 156 4), 17px 24px rgb(253 141 12), 18px 24px rgb(253 86 32), 19px 24px rgb(254 57 24), 20px 24px rgb(255 69 31), 11px 25px rgb(254 57 19), 12px 25px rgb(254 93 32), 13px 25px rgb(254 86 21), 14px 25px rgb(254 84 21), 15px 25px rgb(254 85 22), 16px 25px rgb(254 90 21), 17px 25px rgb(254 89 24), 18px 25px rgb(254 70 25), 19px 25px rgb(254 63 25), 13px 26px rgb(251 65 28), 14px 26px rgb(255 65 26), 15px 26px rgb(254 73 37), 16px 26px rgb(254 71 37), 17px 26px rgb(254 60 18), 18px 26px rgb(254 82 27), 13px 27px rgb(249 96 52), 14px 27px rgb(255 98 50), 15px 27px rgb(254 108 63), 16px 27px rgb(254 107 64); | |
} | |
/* Flame 3 */ | |
66.01% { | |
box-shadow: 17px 2px rgb(249 102 72), 18px 2px rgb(248 33 0), 15px 3px rgb(251 74 31), 16px 3px rgb(252 91 40), 17px 3px rgb(254 77 21), 18px 3px rgb(253 60 10), 14px 4px rgb(253 77 42), 15px 4px rgb(255 62 14), 16px 4px rgb(255 64 6), 17px 4px rgb(254 70 11), 18px 4px rgb(255 98 49), 13px 5px rgb(249 54 17), 14px 5px rgb(255 79 8), 15px 5px rgb(254 125 22), 16px 5px rgb(254 90 43), 17px 5px rgb(253 97 56), 12px 6px rgb(251 80 41), 13px 6px rgb(255 73 8), 14px 6px rgb(254 139 18), 15px 6px rgb(253 123 0), 16px 6px rgb(254 105 72), 12px 7px rgb(253 89 39), 13px 7px rgb(255 130 0), 14px 7px rgb(254 133 14), 15px 7px rgb(253 59 17), 16px 7px rgb(254 101 60), 17px 7px rgb(249 130 89), 11px 8px rgb(252 90 57), 12px 8px rgb(254 81 24), 13px 8px rgb(255 152 7), 14px 8px rgb(254 121 12), 15px 8px rgb(253 53 44), 16px 8px rgb(254 73 38), 17px 8px rgb(253 88 38), 11px 9px rgb(255 54 11), 12px 9px rgb(255 73 32), 13px 9px rgb(255 142 14), 14px 9px rgb(255 141 5), 15px 9px rgb(254 111 25), 16px 9px rgb(255 107 11), 17px 9px rgb(254 63 0), 10px 10px rgb(253 72 15), 11px 10px rgb(255 85 28), 12px 10px rgb(254 103 34), 13px 10px rgb(255 137 7), 14px 10px rgb(255 165 0), 15px 10px rgb(255 176 2), 16px 10px rgb(254 153 0), 17px 10px rgb(253 76 9), 18px 10px rgb(252 134 124), 9px 11px rgb(251 67 18), 10px 11px rgb(254 63 22), 11px 11px rgb(255 99 27), 12px 11px rgb(255 154 9), 13px 11px rgb(255 152 1), 14px 11px rgb(255 176 3), 15px 11px rgb(254 199 2), 16px 11px rgb(254 152 0), 17px 11px rgb(253 91 24), 18px 11px rgb(253 47 21), 19px 11px rgb(253 125 99), 9px 12px rgb(254 69 25), 10px 12px rgb(255 71 39), 11px 12px rgb(254 91 30), 12px 12px rgb(255 160 2), 13px 12px rgb(255 184 0), 14px 12px rgb(255 196 3), 15px 12px rgb(254 187 1), 16px 12px rgb(254 146 0), 17px 12px rgb(255 140 7), 18px 12px rgb(254 85 9), 19px 12px rgb(254 67 34), 20px 12px rgb(253 111 75), 8px 13px rgb(252 81 54), 9px 13px rgb(254 45 16), 10px 13px rgb(254 103 42), 11px 13px rgb(255 130 15), 12px 13px rgb(255 150 0), 13px 13px rgb(255 190 2), 14px 13px rgb(255 200 0), 15px 13px rgb(255 182 0), 16px 13px rgb(254 175 2), 17px 13px rgb(254 158 0), 18px 13px rgb(254 140 11), 19px 13px rgb(253 88 3), 20px 13px rgb(252 72 19), 8px 14px rgb(253 90 52), 9px 14px rgb(255 66 2), 10px 14px rgb(255 134 22), 11px 14px rgb(255 157 1), 12px 14px rgb(255 164 1), 13px 14px rgb(255 188 4), 14px 14px rgb(254 204 12), 15px 14px rgb(254 201 14), 16px 14px rgb(254 189 0), 17px 14px rgb(254 165 1), 18px 14px rgb(255 171 2), 19px 14px rgb(254 124 0), 20px 14px rgb(252 68 27), 8px 15px rgb(252 103 56), 9px 15px rgb(255 107 0), 10px 15px rgb(255 162 3), 11px 15px rgb(255 164 1), 12px 15px rgb(255 189 2), 13px 15px rgb(255 189 2), 14px 15px rgb(253 215 31), 15px 15px rgb(252 228 50), 16px 15px rgb(254 194 7), 17px 15px rgb(255 188 2), 18px 15px rgb(254 183 0), 19px 15px rgb(252 137 6), 20px 15px rgb(252 76 24), 21px 15px rgb(254 74 44), 8px 16px rgb(252 103 56), 9px 16px rgb(255 116 0), 10px 16px rgb(255 188 0), 11px 16px rgb(255 191 2), 12px 16px rgb(255 196 2), 13px 16px rgb(255 186 0), 14px 16px rgb(254 214 32), 15px 16px rgb(253 244 73), 16px 16px rgb(253 225 47), 17px 16px rgb(255 205 14), 18px 16px rgb(254 171 1), 19px 16px rgb(253 151 4), 20px 16px rgb(252 120 5), 21px 16px rgb(254 76 15), 22px 16px #ff1c1c, 8px 17px rgb(252 100 56), 9px 17px rgb(255 112 0), 10px 17px rgb(255 200 1), 11px 17px rgb(255 211 1), 12px 17px rgb(255 195 3), 13px 17px rgb(255 204 24), 14px 17px rgb(254 225 46), 15px 17px rgb(253 244 74), 16px 17px rgb(252 251 77), 17px 17px rgb(253 208 23), 18px 17px rgb(254 161 1), 19px 17px rgb(255 158 0), 20px 17px rgb(254 147 0), 21px 17px rgb(252 93 11), 22px 17px #ff6c31, 8px 18px rgb(252 103 56), 9px 18px rgb(255 119 0), 10px 18px rgb(255 193 0), 11px 18px rgb(254 188 0), 12px 18px rgb(255 194 8), 13px 18px rgb(253 233 58), 14px 18px rgb(253 249 79), 15px 18px rgb(252 239 66), 16px 18px rgb(253 230 50), 17px 18px rgb(254 201 15), 18px 18px rgb(254 163 1), 19px 18px rgb(255 159 0), 20px 18px rgb(255 150 0), 21px 18px rgb(252 97 15), 22px 18px #ff6c31, 8px 19px rgb(252 106 58), 9px 19px rgb(254 112 0), 10px 19px rgb(255 163 2), 11px 19px rgb(254 159 0), 12px 19px rgb(255 199 8), 13px 19px rgb(253 234 53), 14px 19px rgb(252 244 74), 15px 19px rgb(252 223 45), 16px 19px rgb(255 194 10), 17px 19px rgb(255 196 3), 18px 19px rgb(254 173 1), 19px 19px rgb(255 154 1), 20px 19px rgb(254 136 0), 21px 19px rgb(252 92 16), 22px 19px #ff1c1c, 8px 20px rgb(252 92 52), 9px 20px rgb(254 70 3), 10px 20px rgb(254 133 17), 11px 20px rgb(255 167 0), 12px 20px rgb(255 203 4), 13px 20px rgb(254 208 17), 14px 20px rgb(254 208 25), 15px 20px rgb(254 201 15), 16px 20px rgb(255 188 0), 17px 20px rgb(254 198 1), 18px 20px rgb(254 184 1), 19px 20px rgb(254 144 6), 20px 20px rgb(252 93 9), 21px 20px rgb(253 71 17), 8px 21px rgb(253 82 54), 9px 21px rgb(255 44 14), 10px 21px rgb(254 128 29), 11px 21px rgb(255 178 0), 12px 21px rgb(255 180 0), 13px 21px rgb(255 189 0), 14px 21px rgb(255 193 0), 15px 21px rgb(255 195 0), 16px 21px rgb(255 199 2), 17px 21px rgb(254 181 2), 18px 21px rgb(255 178 0), 19px 21px rgb(254 143 10), 20px 21px rgb(253 67 26), 21px 21px rgb(254 54 26), 9px 22px rgb(253 60 20), 10px 22px rgb(255 115 26), 11px 22px rgb(255 147 4), 12px 22px rgb(255 150 1), 13px 22px rgb(255 177 2), 14px 22px rgb(255 188 0), 15px 22px rgb(255 186 2), 16px 22px rgb(254 186 3), 17px 22px rgb(253 154 1), 18px 22px rgb(254 147 3), 19px 22px rgb(254 124 12), 20px 22px rgb(253 78 27), 9px 23px rgb(250 59 8), 10px 23px rgb(254 71 22), 11px 23px rgb(255 107 20), 12px 23px rgb(255 159 5), 13px 23px rgb(255 164 1), 14px 23px rgb(255 160 2), 15px 23px rgb(255 160 1), 16px 23px rgb(255 162 1), 17px 23px rgb(254 161 0), 18px 23px rgb(253 123 18), 19px 23px rgb(253 69 15), 20px 23px rgb(252 72 21), 9px 24px rgb(249 57 11), 10px 24px rgb(253 57 21), 11px 24px rgb(255 94 23), 12px 24px rgb(255 165 6), 13px 24px rgb(255 158 0), 14px 24px rgb(255 148 0), 15px 24px rgb(255 150 0), 16px 24px rgb(255 154 0), 17px 24px rgb(255 166 0), 18px 24px rgb(252 116 20), 19px 24px rgb(253 51 14), 10px 25px rgb(252 97 59), 11px 25px rgb(254 70 10), 12px 25px rgb(254 103 4), 13px 25px rgb(255 112 6), 14px 25px rgb(255 107 6), 15px 25px rgb(255 107 6), 16px 25px rgb(255 110 6), 17px 25px rgb(254 112 6), 18px 25px rgb(253 72 2), 12px 26px rgb(254 94 69), 13px 26px rgb(254 109 77), 14px 26px rgb(254 106 77), 15px 26px rgb(254 105 77), 16px 26px rgb(254 107 77); | |
} | |
100% { | |
box-shadow: 17px 2px rgb(249 102 72), 18px 2px rgb(248 33 0), 15px 3px rgb(251 74 31), 16px 3px rgb(252 91 40), 17px 3px rgb(254 77 21), 18px 3px rgb(253 60 10), 14px 4px rgb(253 77 42), 15px 4px rgb(255 62 14), 16px 4px rgb(255 64 6), 17px 4px rgb(254 70 11), 18px 4px rgb(255 98 49), 13px 5px rgb(249 54 17), 14px 5px rgb(255 79 8), 15px 5px rgb(254 125 22), 16px 5px rgb(254 90 43), 17px 5px rgb(253 97 56), 12px 6px rgb(251 80 41), 13px 6px rgb(255 73 8), 14px 6px rgb(254 139 18), 15px 6px rgb(253 123 0), 16px 6px rgb(254 105 72), 12px 7px rgb(253 89 39), 13px 7px rgb(255 130 0), 14px 7px rgb(254 133 14), 15px 7px rgb(253 59 17), 16px 7px rgb(254 101 60), 17px 7px rgb(249 130 89), 11px 8px rgb(252 90 57), 12px 8px rgb(254 81 24), 13px 8px rgb(255 152 7), 14px 8px rgb(254 121 12), 15px 8px rgb(253 53 44), 16px 8px rgb(254 73 38), 17px 8px rgb(253 88 38), 11px 9px rgb(255 54 11), 12px 9px rgb(255 73 32), 13px 9px rgb(255 142 14), 14px 9px rgb(255 141 5), 15px 9px rgb(254 111 25), 16px 9px rgb(255 107 11), 17px 9px rgb(254 63 0), 10px 10px rgb(253 72 15), 11px 10px rgb(255 85 28), 12px 10px rgb(254 103 34), 13px 10px rgb(255 137 7), 14px 10px rgb(255 165 0), 15px 10px rgb(255 176 2), 16px 10px rgb(254 153 0), 17px 10px rgb(253 76 9), 18px 10px rgb(252 134 124), 9px 11px rgb(251 67 18), 10px 11px rgb(254 63 22), 11px 11px rgb(255 99 27), 12px 11px rgb(255 154 9), 13px 11px rgb(255 152 1), 14px 11px rgb(255 176 3), 15px 11px rgb(254 199 2), 16px 11px rgb(254 152 0), 17px 11px rgb(253 91 24), 18px 11px rgb(253 47 21), 19px 11px rgb(253 125 99), 9px 12px rgb(254 69 25), 10px 12px rgb(255 71 39), 11px 12px rgb(254 91 30), 12px 12px rgb(255 160 2), 13px 12px rgb(255 184 0), 14px 12px rgb(255 196 3), 15px 12px rgb(254 187 1), 16px 12px rgb(254 146 0), 17px 12px rgb(255 140 7), 18px 12px rgb(254 85 9), 19px 12px rgb(254 67 34), 20px 12px rgb(253 111 75), 8px 13px rgb(252 81 54), 9px 13px rgb(254 45 16), 10px 13px rgb(254 103 42), 11px 13px rgb(255 130 15), 12px 13px rgb(255 150 0), 13px 13px rgb(255 190 2), 14px 13px rgb(255 200 0), 15px 13px rgb(255 182 0), 16px 13px rgb(254 175 2), 17px 13px rgb(254 158 0), 18px 13px rgb(254 140 11), 19px 13px rgb(253 88 3), 20px 13px rgb(252 72 19), 8px 14px rgb(253 90 52), 9px 14px rgb(255 66 2), 10px 14px rgb(255 134 22), 11px 14px rgb(255 157 1), 12px 14px rgb(255 164 1), 13px 14px rgb(255 188 4), 14px 14px rgb(254 204 12), 15px 14px rgb(254 201 14), 16px 14px rgb(254 189 0), 17px 14px rgb(254 165 1), 18px 14px rgb(255 171 2), 19px 14px rgb(254 124 0), 20px 14px rgb(252 68 27), 8px 15px rgb(252 103 56), 9px 15px rgb(255 107 0), 10px 15px rgb(255 162 3), 11px 15px rgb(255 164 1), 12px 15px rgb(255 189 2), 13px 15px rgb(255 189 2), 14px 15px rgb(253 215 31), 15px 15px rgb(252 228 50), 16px 15px rgb(254 194 7), 17px 15px rgb(255 188 2), 18px 15px rgb(254 183 0), 19px 15px rgb(252 137 6), 20px 15px rgb(252 76 24), 21px 15px rgb(254 74 44), 8px 16px rgb(252 103 56), 9px 16px rgb(255 116 0), 10px 16px rgb(255 188 0), 11px 16px rgb(255 191 2), 12px 16px rgb(255 196 2), 13px 16px rgb(255 186 0), 14px 16px rgb(254 214 32), 15px 16px rgb(253 244 73), 16px 16px rgb(253 225 47), 17px 16px rgb(255 205 14), 18px 16px rgb(254 171 1), 19px 16px rgb(253 151 4), 20px 16px rgb(252 120 5), 21px 16px rgb(254 76 15), 22px 16px #ff1c1c, 8px 17px rgb(252 100 56), 9px 17px rgb(255 112 0), 10px 17px rgb(255 200 1), 11px 17px rgb(255 211 1), 12px 17px rgb(255 195 3), 13px 17px rgb(255 204 24), 14px 17px rgb(254 225 46), 15px 17px rgb(253 244 74), 16px 17px rgb(252 251 77), 17px 17px rgb(253 208 23), 18px 17px rgb(254 161 1), 19px 17px rgb(255 158 0), 20px 17px rgb(254 147 0), 21px 17px rgb(252 93 11), 22px 17px #ff6c31, 8px 18px rgb(252 103 56), 9px 18px rgb(255 119 0), 10px 18px rgb(255 193 0), 11px 18px rgb(254 188 0), 12px 18px rgb(255 194 8), 13px 18px rgb(253 233 58), 14px 18px rgb(253 249 79), 15px 18px rgb(252 239 66), 16px 18px rgb(253 230 50), 17px 18px rgb(254 201 15), 18px 18px rgb(254 163 1), 19px 18px rgb(255 159 0), 20px 18px rgb(255 150 0), 21px 18px rgb(252 97 15), 22px 18px #ff6c31, 8px 19px rgb(252 106 58), 9px 19px rgb(254 112 0), 10px 19px rgb(255 163 2), 11px 19px rgb(254 159 0), 12px 19px rgb(255 199 8), 13px 19px rgb(253 234 53), 14px 19px rgb(252 244 74), 15px 19px rgb(252 223 45), 16px 19px rgb(255 194 10), 17px 19px rgb(255 196 3), 18px 19px rgb(254 173 1), 19px 19px rgb(255 154 1), 20px 19px rgb(254 136 0), 21px 19px rgb(252 92 16), 22px 19px #ff1c1c, 8px 20px rgb(252 92 52), 9px 20px rgb(254 70 3), 10px 20px rgb(254 133 17), 11px 20px rgb(255 167 0), 12px 20px rgb(255 203 4), 13px 20px rgb(254 208 17), 14px 20px rgb(254 208 25), 15px 20px rgb(254 201 15), 16px 20px rgb(255 188 0), 17px 20px rgb(254 198 1), 18px 20px rgb(254 184 1), 19px 20px rgb(254 144 6), 20px 20px rgb(252 93 9), 21px 20px rgb(253 71 17), 8px 21px rgb(253 82 54), 9px 21px rgb(255 44 14), 10px 21px rgb(254 128 29), 11px 21px rgb(255 178 0), 12px 21px rgb(255 180 0), 13px 21px rgb(255 189 0), 14px 21px rgb(255 193 0), 15px 21px rgb(255 195 0), 16px 21px rgb(255 199 2), 17px 21px rgb(254 181 2), 18px 21px rgb(255 178 0), 19px 21px rgb(254 143 10), 20px 21px rgb(253 67 26), 21px 21px rgb(254 54 26), 9px 22px rgb(253 60 20), 10px 22px rgb(255 115 26), 11px 22px rgb(255 147 4), 12px 22px rgb(255 150 1), 13px 22px rgb(255 177 2), 14px 22px rgb(255 188 0), 15px 22px rgb(255 186 2), 16px 22px rgb(254 186 3), 17px 22px rgb(253 154 1), 18px 22px rgb(254 147 3), 19px 22px rgb(254 124 12), 20px 22px rgb(253 78 27), 9px 23px rgb(250 59 8), 10px 23px rgb(254 71 22), 11px 23px rgb(255 107 20), 12px 23px rgb(255 159 5), 13px 23px rgb(255 164 1), 14px 23px rgb(255 160 2), 15px 23px rgb(255 160 1), 16px 23px rgb(255 162 1), 17px 23px rgb(254 161 0), 18px 23px rgb(253 123 18), 19px 23px rgb(253 69 15), 20px 23px rgb(252 72 21), 9px 24px rgb(249 57 11), 10px 24px rgb(253 57 21), 11px 24px rgb(255 94 23), 12px 24px rgb(255 165 6), 13px 24px rgb(255 158 0), 14px 24px rgb(255 148 0), 15px 24px rgb(255 150 0), 16px 24px rgb(255 154 0), 17px 24px rgb(255 166 0), 18px 24px rgb(252 116 20), 19px 24px rgb(253 51 14), 10px 25px rgb(252 97 59), 11px 25px rgb(254 70 10), 12px 25px rgb(254 103 4), 13px 25px rgb(255 112 6), 14px 25px rgb(255 107 6), 15px 25px rgb(255 107 6), 16px 25px rgb(255 110 6), 17px 25px rgb(254 112 6), 18px 25px rgb(253 72 2), 12px 26px rgb(254 94 69), 13px 26px rgb(254 109 77), 14px 26px rgb(254 106 77), 15px 26px rgb(254 105 77), 16px 26px rgb(254 107 77); | |
} | |
} | |
`; | |
// Create style element and append to head | |
const style = document.createElement('style'); | |
style.innerHTML = fireAnimationStyles; | |
document.head.appendChild(style); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment