Анимированный градиентный фон на SVG
Задний фон с анимированным градиентом в SVG HTML
<svg>
<defs>
<linearGradient id="gradient" y2="1">
<stop stop-color="rgb(80, 220, 255)" offset="0" />
<stop stop-color="rgb(250, 90, 255)" offset="1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#gradient)" />
</svg>CSS
html, body, svg {
height: 100%
}
body {
margin: 0
}
svg {
width: 100%;
vertical-align: middle
}JS
import animate from "https://cdnjs.cloudflare.com/ajax/libs/animateplus/2.0.1/animateplus.min.js";
const gradient = Array.from(document.querySelectorAll("stop"), (stop, index) => ({
stop,
colors: [
stop.getAttribute("stop-color").match(/\d+/g).map(Number),
index ? [255, 255, 120] : [20, 230, 100]
]
}));
animate({
easing: "out-quartic",
duration: 4000,
loop: true,
change: progress =>
gradient.forEach(({stop, colors}) => {
const [from, to] = colors;
const [r, g, b] = from.map((value, index) =>
Math.round(value + progress * (to[index] - value)));
stop.setAttribute("stop-color", `rgb(${r}, ${g}, ${b})`);
if (progress == 1) colors.reverse();
})
});
