Согласен, мой косяк. Был не внимателен.Спасибо. А как быть если числа в hsl каналах совершенно разные? (Зависимость та же heu канал следующего блока +10) Вот такие блоки к примеру как перебирать ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.first_st1{
fill: hsl(1, 84%, 61%);
}
.first_st2{
fill: hsl(358, 83%, 54%);
}
.first_st3{
fill: hsl(350, 65%, 40%);
}
.second_st1{
fill: hsl(11, 84%, 61%);
}
.second_st2{
fill: hsl(8, 83%, 54%);
}
.second_st3{
fill: hsl(0, 65%, 40%);
}
</style>
</head>
<body>
<svg width="600" height="240">
<rect class="first_st1" width="80" height="80" x="0" y="0"></rect>
<rect class="first_st2" width="80" height="80" x="0" y="80"></rect>
<rect class="first_st3" width="80" height="80" x="0" y="160"></rect>
<rect class="second_st1" width="80" height="80" x="160" y="0"></rect>
<rect class="second_st2" width="80" height="80" x="160" y="80"></rect>
<rect class="second_st3" width="80" height="80" x="160" y="160"></rect>
</svg>
</body>
</html>
и в процессе анимации цвета одной картинки переходят в другую. (каждые 2 сек).
