Как можно анимировать цветовые круги SVG?

Question

Есть концентрические круги.

Необходимо анимировать круги и их цвета.
Анимация может идти только по цветам и размеру кругов, без изменения их центра.
Использовать надо нативные возможности CSS, SVG, SMIL, без использования JavaScript.

const svg = document.getElementById("svg");
const SVGNameSpace = "http://www.w3.org/2000/svg";
const length = 100;
const number = 5;
const dist = length / number;

for (let i = 0; i < 8; i++) {
  const krug = document.createElementNS(SVGNameSpace, "circle");
  krug.setAttribute("r", length - dist * i);
  krug.setAttribute("fill", `hsl(${50 + i*50},75%,85%)`);
  svg.appendChild(krug);
}

<svg id="svg" width="178" height="178" version="2" viewBox="-101 -101 202 202" preserveAspectRatio="none">
</svg>

Answer 1

Можно добавить немного scale + hue-rotate

let circle = (_,i) => `<circle r='${100-20*i}' style='--h:${50+i*50}; --d:${2*i}s' />`
document.getElementById("svg").innerHTML = [...Array(5)].map(circle).join('');

svg {
  animation: color 5s infinite;
}

circle {
  animation: pulse 7s var(--d) infinite linear;
  fill: hsl(var(--h), 75%, 75%);
}

@keyframes pulse {
  0%, 50%, 100% {transform: scale(1)}
  25% {transform: scale(1.05)}
  75% {transform: scale(0.95)}
}

@keyframes color {
  0%, 100%  {filter: hue-rotate(-20deg)}
  50% {filter: hue-rotate(20deg)}
}

<svg id="svg" width="178" height="178" viewBox="-111 -111 222 222" preserveAspectRatio="none">
</svg>

БЛОГ НА HUSL

Как можно анимировать цветовые круги SVG?

Ответы (1 шт):