Магия Без'E
Когда впервые запустил только что написанный скрипт я обалдел от эффекта, который просто ударил по моему сознанию. Начал пробывать и менять и в результате Вы видите что получилось
[html]<script>
logo_dance = function(id,dat){
  var logo = this,
    opt = {
      name: dat.name||'Logo!',
      show: dat.draw||50,
      hide: dat.blank||40,
      pole:{
        color:dat.pole||'rgba(255,255,250,0.05)',
        bord:dat.collapse||0.9
      },
      line:{
        at: dat.line||5,
        to: dat.size||40,
        start: dat.start||0,
        step: dat.step||10,
        end: dat.end||0,
        shadow: dat.shadow||'black',
        blur: dat.blur||30
      }
    };

  logo.width  = function(){return Math.random()*logo.wd;}
  logo.height = function(){return Math.random()*logo.hg;}

  function last(){
    logo.lx = logo.width();
    logo.ly = logo.height();
  }

  function run(){
    setInterval(draw,opt.show);
    setInterval(function (){
      logo.cx.fillStyle = opt.pole.color;
      logo.cx.fillRect(0,0,logo.wd,logo.hg);
    },opt.hide);
  }

  function collapse(){
    logo.cx.translate(logo.w2,logo.h2);
    logo.cx.scale(opt.pole.bord,opt.pole.bord);
    logo.cx.translate(-logo.w2,-logo.h2);
  }

  function draw() {
    with(logo.cx){
      save();
      collapse();
      beginPath();
      lineWidth = opt.line.at +
        Math.random() * opt.line.to;
      moveTo(logo.lx,logo.ly);
      last();
      bezierCurveTo(logo.width(),logo.height(),
        logo.width(),logo.height(),
        logo.lx,logo.ly);

      logo.he+= opt.line.step;
      if(opt.line.end && (logo.he>opt.line.end))
        logo.he = opt.line.start;
      strokeStyle='hsl('+logo.he+',100%,50%)';

      shadowColor = opt.line.shadow;
      shadowBlur = opt.line.blur;
      stroke();
      restore();
    }
  }

  with(logo){
    cx = document.getElementById(id).getContext('2d');
    cx.canvas.width =
      wd = dat.width||cx.canvas.width;
    cx.canvas.height =
      hg = dat.height||cx.canvas.height;
    w2 = wd/2; h2 = hg/2; he = opt.line.start;
    last();
    run();
  }
}

function demo(){
  logo_dance('demo',{
    width:250,height:250,step:-1,
    pole: 'rgba(100,100,100,0.03)',
    shadow:'white'
  });
}

demo();

</script>
<style>
#demo{
   border-radius: 50%;}
</style>

<canvas id="demo"></canvas>
[/html]
Я ее назвал - Магия Без'Е...
Здесь используется сразу несколько новинок стандарта HTML5. Это

    CANVAS - тег графики браузеров
    Прозрачность - возможность задания прозрачности цвета объекта
    HSL-цвет - определение цвета объекта по реальному представлению - яркость, насыщеность цетовая гамма
    Тень - возможность задания цветотени объекта

Параметры
===============
# width - ширина окна шоу
# height - высота окна шоу
-------------------------
их иожно задать при первой инсталяции объекта, как это сделано в примере.
Если эти параметры опущены то их выбирают из размерности заданые в элементе., который задается в вмде тэга CANVAS

# line - начальная ширина кривой безье (5)
# size - конечная ширина линии (40)
------------------
эти параметры задают начальное и конечное значение толщины линии кривой Безье, которая и представляется источником нашего шоу.
Величина в пикселах каждый раз генерируется из псевдослучайного генератора. по которому так же задаются и другие параметры линии, начальное значение которых определяется шириной и высотой окна шоу с наложенным параметром collapse (0.9) - сжатие шоу относительно окна, который определяет внутреннюю рамку нашего шоу.
*** значения в скобках, здесь и в дальнейшем, соответствуют значениям по-умолчанию.

* shadow - цвет тени(black)
* blur - величина размытия(1000)
---------------------------------
Эти параметры задают около линии цвет тени . Параметр размытие создает дополнительную ауру при самом шоу..Величинв фыьрана случайно.
# draw - цикл отрисовки (50ms)
----------------------------------
Этот параметр определяет цикличность отрисовки самих линий
...................................................
# blank - цикл очистки (40ms)
# pole - цвет окна прозрачной маски
(rgba(255,255,250,0.05))
---------------------------------------------
Первый параметр определяет цикл стирания фона цветом заданным вторым параметром.
Таким образом достигается эффект глубины, т.е рисунок созданый до стирания накладывается практически полно прозрачной маской, с определенным оттенком. Кстати прозрачность есть и у белого цвета, и это дает особый шарм. Я позже расскажу в отдельной заметки физики человеческого восприятия цвета, и его воспроизводстве в веб-представлении. Но сейчас Иы мой читатель должен довериться тому что есть
****
Ну вот я и подошел к самой трудной части своего объяснения эьлшл эффекта . А именно представление цвета в HSL-координатах. Обычно мы задаем цвет в RGB-координатах. Но это удобно для цветного кинескопа нашего монитора, и там фактически машина определяем и уровень и насыщенность простой раскладки цветов на основные составляющие. В обычной жизни чистых цветов не бывает. и мы все видим в цветотенях одних и других оттенков мнгократно отражающихся друг от друга. И поэтому управлять этим живым цыетом очень сложно имея раскладку на RGB. - т.е цвет определяется яркость. насыщеностью и своей цветогаммой или цветностью. Управлять такими параметрами очень легко. К примеру есои Тебе нужен спектор с одним параметром яркости и насыщености, но с разной цветностью, то достаточно только этот параметр и изменять . Что мы и делаем в шоу. И последнее - цветность в этих координатах задается в виде угла от 0 до 360 градусов в любую сторону с периодом в 360 градусов, т.е ее управление сродни колеса велосипеда - крути куда хочешь. и на сколько угодно., все равно ты вернешься обязательно к своему старому значеню.

# start - начальный цвет в цикле(0 = красный)
# step - шаг цвета по гамме(+10град)
# end - конечный цвет(0=красный)

Если задан end отличный от 0 то изменение идет до этой величины и возвращается к значению заданому в start
Это дает возможность настроить цветоизменение к примеру по диапазону от желтого до синего и и опять сначала, причем шаг определяется параметром step. Если Ты хочешь чтоб все крутилось в обратную сторону то делаешь его просто отрицательным и тогда цвет......