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:

pricing

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);
});
})