Необычный анимационный фон для сайта на canvas

Просматривая github на наличие интересных штучек для web наткнулся на интересную реализацию Анимированного фона на Canvas для нашей web странички или игры.


Она представляет из себя JS скрипт весом 1,8кб.

Вот ссылочка на сам github, где лежит оригинал, я же попробую внедрить анимацию на фон моего сайта:

В css добавляем:

ody {
    height: 100%;
    margin:0px;
    padding:0px;
}

#view {
    position:absolute;
    height: 100%;
    width: 100%;
}
canvas {
    outline:0;
}

В HTML сразу за тегом

 вставляем следующее:




<div id="view">
      <canvas id=”canvas”>
        Sorry, but you need an HTML5 browser to play.
      </canvas>
</div>

… и перед закрывающим тегом подгружаем сам скрипт:

<script type="text/javascript" src="/test/bubly.js"></script>

(Ссылка на JS файл)

В результате получаем анимационный фон для нашего сайта:

Вот ссылка на рабочий пример

В следующей статье: «… смена цветов, объектов, скорости и т.п., оформление анимационного фона в стиль своего сайта, эффекты»