Анимация градиентов?

Question

[Артём Ряженков]

Здравствуйте!
Ситуация такова - на странице нужно сделать несколько элементов с переливающимся градиентом на заднем фоне. Однако у всех цвета во время перелива должны быть разными. Для исполнения первого элемента использовал этот код:

.circle {
  max-width: 150px;
  border-radius: 50%;
  height: 150px;
}
.pure {
  background: #ffa8fc;
  animation: background 5.5s infinite alternate;
}
@keyframes background {
  50% {
    background: skyblue;
    box-shadow: 0 -200px 100px -100px #4df92a inset;
  }
}

.circle - это сам элемент
.pure - задаю исходный цвет (пусть у всех он должен быть одинаковым)
@keyframes background - анимация

Какой код нужно написать, чтобы у всех элементов цвета во время перелива были разными?

Answer 1

[Dima Polos]

JS код надо написать, желательно в canvas, чтоб тормозов было меньше.
https://m.youtube.com/watch?v=CakNmQEmf1I Тут есть про работу с канвасом, посмотрите на этом канале, в плейлисте, может что-то еще найдете, в общем смотрите в этом направлении.