Фон с рандомными окружностями

Небольшой скрипт для создания в заданной области случайно расположенных окружностей разных размеров и оттенков.

Пример:

HTML:

CSS:

JS:

Где переменная limit - количество окружностей, а функция randomCircle() отвечает за их отрисовку, например: <button onclick="randomCircle()">Перерисовать</button>

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

let colors = ["#BFE2FF", "#59b4ff", "#78c2ff"];

В функции randomCircle() заменяем color1, color2 и color3 на одну:

let color = randomNumber(0, colors.length-1);

И заменяем:

item.style.backgroundColor = "hsl("+ color1 +", "+ color2 +"%, "+ color3 +"%)"; на item.style.backgroundColor = colors[color];

Смотрите также:

Волна из частиц на JS

Фон из бегущих волной частиц с возможностью установления их количества, размера и скорости

Добавить комментарий:

Ваш комментарий отправлен!