3

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

  • Необходимо анимировать круги и их цвета.
  • Анимация может идти только по цветам и размеру кругов, без изменения их центра.
  • Использовать надо нативные возможности 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>

3

1 ответ 1

4

Можно добавить немного 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>

4
  • Интересно. Буду думать как сделать на основании идеи с той ссылки что ты прислал. Где круги как бы из центра идут. Это интересна, спасибо за ответ. может пригодиться. Теперь точно определился с тем, что хочу, как излучение из центра, как по ссылке в комментарии к вопросу. 5 апр 2020 в 11:26
  • Постараюсь сделать ответ. Думаю тут нужно расширение круга + увеличение opacity, и потом по кругу как-то зацепить. Всю схему пока до конца не понимаю, но в целом уже более ясно. 5 апр 2020 в 11:27
  • Понравилось что у тебя код более компактный для генерации кругов. Я больше люблю чисто через DOM, но для таких ситуаций интересный вариант. 5 апр 2020 в 11:28
  • @ДмитрийПолянин а я всегда конкатенацией делаю, меньше кода и подводных камней, вроде указания нэймспейса 5 апр 2020 в 11:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.