Рисование цветов по движению мыши

Данное решение будет более полезно для создания интересных композиций с цветами, нежели как элемент секции или блока на сайте.

Пример:

Зажмите левую кнопку мыши и проведите по секции ниже голубой черты.

Чем быстрее движется курсор, тем большего размера цветы будут за ним двигаться.

JS:

Применение:

  • Задаем нужный фон у элемента svg, заменив в CSS background: #FFF;
  • Задаем нужные цвета для цветов в JS, в массиве const colors
  • Рисуем на этом изображении цветы по нужной траектории и нужного размера
  • Учимся в совершенстве управлять мышкой, т.к. нарисовать желаемый путь сложно 🙂
  • Потом скриншотим

HTML:

CSS:

Найдено на codepen.io у пользователя Ko.Yelie

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

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

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