Демо JavaScript:
var ctx, canvas, r, r1, r2, r3, color, color1, color2, color3; // Функция Анимации window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame })(); // Функция запускающаяся автоматически после загрузки страницы window.onload = function(){ canvas = document.getElementById('paint'); ctx = canvas.getContext('2d'); h = canvas.height; w = canvas.width; // Радиусы и цвета окружностей r = 0; r1 = 64; r2 = 128; r3 = 192; color = 255; color1 = 255 - 64; color2 = 255 - 128; color3 = 255 - 192; ctx.fillRect(0, 0, w, h); DrawCircles(); }; // Функция прорисовки окружностей function DrawCircles(){ ctx.fillRect(0, 0, w, h); for (angle = 0; angle < 2*Math.PI; angle += Math.PI/3){ // X и Y -- центр окружности x = Math.sin(angle); y = Math.cos(angle); x *= 50; y *= 50; x += w/2; y += h/2; ctx.beginPath(); // Переводим цвета в 16-тиричную систему счисления для перехода к RGB формату ctx.strokeStyle = "#" + color.toString(16) + color.toString(16) + color.toString(16); ctx.arc(x, y, r, 0, 2*Math.PI); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#" + color1.toString(16) + color1.toString(16) + color1.toString(16); ctx.arc(x, y, r1, 0, 2*Math.PI); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#" + color2.toString(16) + color2.toString(16) + color2.toString(16); ctx.arc(x, y, r2, 0, 2*Math.PI); ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "#" + color3.toString(16) + color3.toString(16) + color3.toString(16); ctx.arc(x, y, r3, 0, 2*Math.PI); ctx.closePath(); ctx.stroke(); } // С увеличением радиуса уменьшаем значение цвета, приближая его к чёрному r++; r1++; r2++; r3++; color--; color1--; color2--; if (color3 > 16) color3--; // "Обнуление" переменных if (r >= 64){ r = 0; r1 = 64; r2 = 128; r3 = 192; color = 255; color1 = 255 - 64; color2 = 255 - 128; color3 = 255 - 192; } // Запускаем анимацию функции прорисовки окружностей requestAnimFrame(DrawCircles); }