Code of animation http://pikabu.ru/story/zalipatelnost_16848

<style type="text/css">
/* фон: */
body { background: #222 }
/* центрирование в окне: */
canvas {
    margin: -200px 0 0 -200px;
    position: absolute;
    top: 50%;
    left: 50%;
}
</style>
<canvas width="400" height="400" id="canvas"></canvas>
<script type="text/javascript">
var cel = document.getElementById("canvas"), ctx = cel.getContext("2d"),
    pi = Math.PI, dpi = pi * 2, t = 0;
setInterval(function() {
    var i, j;
    t += 0.05;
    // очистка канвы:
    cel.width += 0;
    // свечение:
    ctx.shadowColor = "rgba(255, 255, 255, 0.7)";
    ctx.shadowBlur = 10;
    // настройки линий и цветов:
    ctx.lineCap = ctx.lineJoin = "round";
    ctx.lineWidth = 20;
    ctx.strokeStyle = ctx.fillStyle = "white";
    // трансформации:
    ctx.save();
    ctx.translate(200, 200);
    // центр фигуры (круг):
    ctx.beginPath();
    ctx.arc(0, 0, 10, 0, dpi);
    ctx.closePath();
    ctx.fill();
    // ярусы:
    for (j = 0; j < 4; j++) {
        var cRad = (225 + j * 225) / dpi, // радиус (пкс.)
            cLen = cRad * dpi, // длина окружности (пкс.)
            cStep = dpi / Math.round(cLen / 75), // шаг (рад.)
            cOfs = cStep * 0.4; // длина дуги (рад.)
        // дуги:
        for (i = 0; i < dpi - 0.01; i += cStep) { // -0.01 т.к. потеря точности
            k = (t * 200 / cLen + i) % dpi; // смещение (рад.)
            if (j % 2) k = -k; // на нечетных ярусах движение в другую сторону
            // собственно рисование дуги:
            ctx.beginPath();
            ctx.arc(0, 0, cRad, k, k + cOfs);
            ctx.stroke();
        }
    }
    // восстановление на начальные настройки:
    ctx.restore();
}, 50);
</script>