I found this website named loading.io where they have animated SVG loading backgrounds/assets. I was about to go pay for a pro account and I was at the point of signing up and clicking on pricing but then a thought flashed across my mind. How do they animate this on the background editor page? They use the SVG lol ☠ ☠ Pro accounts cost between $10 monthly or $40 yearly (USD), writing a short script costs me nothing but 20 minutes:
script looks something like this:
[...new Set([...document.getElementsByClassName("ldlz")].map((e) => e.dataset.src.includes("svg") ? "https://loading.io" + e.dataset.src : null))].filter(val => val !== null).map( (url)=> {
fetch(url).then(response => response.text())
.then(svg => {
const blob = new Blob([svg], { type: 'text/svg', name: url.replace("https://loading.io", "").replace("/", "-") });
let bd = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
let dlfile = url.replace("https://loading.io", "").replace("/", "-").replace("assets", "").replace("-", "").replace("background", "bg").replace("index", "");
console.log("Downloading: ", dlfile)
a.download = dlfile.replace("_mod_", " ").replace("_img_c_", ""); // File name
a.click();
URL.revokeObjectURL(url);
});
})