Как размножить элементы в js?

[seetvael]

Нужно сделать "Летающие кружочки" которые заполнят страницу на указанную высоту.
В настройках скрипта нужно иметь возможность указать высоту и ширину распределения объектов, количество копий.
Пример распределения объектов во вложении

Элементы сделаны с помощью css
Должно быть 4 цвета
Заготовка:
http://codepen.io/seetvael/pen/GjBmbm 

Пример сделанный с помощью canvas
http://codepen.io/seetvael/pen/eBrgVj

Он не подходит, так как нужно чтобы элементы могли быть выше одних элементов страницы (инфо блок) и ниже других (меню). Кроме того в примере элементы движутся только при наведении мыши, а не постоянно. Canvas сильно тормозит.

Цвет, размер и анимацию я сделал с помощью сss, с помощью js хочу сделать дубликаты и распределение элементов
http://codepen.io/seetvael/pen/woXpdr

Edited December 8, 2016 by seetvael

[wwt]

http://codepen.io/anon/pen/zoJOVK

[Igor Schnaider]

На canvas можно что-нибудь подобное замутить.

[seetvael]

Спасибо, но canvas сильно тормозит, особенно в режиме наложения multiply
globalCompositeOperation = 'multiply'
Поэтому хочу сделать анимацию и наложение через css