Рандомизация SVG форм

Рандомизация SVG форм

От автора: мы хотели рандомизировать радиус окружности. Это можно было бы подделать с помощью CSS, но давайте создадим по-настоящему псевдо случайные числа с помощью JS.

Мы говорим о SVG, вот наш базовый круг:

Небольшая JS функция для генерации случайного целого числа в диапазоне:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для рандомизации радиуса каждую секунду можно сделать:

Для красоты можно добавить плавный переход к новому размеру в браузеры с поддержкой:

См. демо

Все SVG формы построены из чисел, т.е. они поддаются рандомизации. Представьте форму с гранями, выстроенными в случайном порядке:

Рандомизация SVG форм

Скорее всего, это <polygon> (прямые линии), но такую форму также легко можно нарисовать с помощью <path>, а путь уже поддается плавной анимации (в Chrome). Давайте создадим эту форму, вот так может выглядеть путь:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Некоторые точки фиксированные, остальные случайные. Диаграмма:

Рандомизация SVG форм

Наша задача – сгенерировать эти случайные числа, собрать их в строку и заменить эту строку в DOM (атрибут d в теге <path>).

Напомним, у нас уже есть функция генерации случайных чисел getRandomInt(). Упрощенная концепция:

Сложность состоит в том, чтобы сгенерировать и расположить их в формате, удовлетворяющем синтаксису path. Сделать это несложно, просто нужно сгенерировать много чисел. Покажу сразу весь код:

Для организации код разбит на несколько маленьких функций. В конечной версии я также перешел на более производительную версию setInterval. Финальное демо:

Можете посмотреть шапку сайта CSS-Tricks от Chris Coyier (@chriscoyier) на CodePen.

Стоит отметить: SVG не имеет реального аппаратного ускорения, которое есть в некоторых типах веб-графики. Например, если применить свойство transition к свойствам transform или opacity, вам не нужно будет беспокоиться о производительности, так как все вычисления по возможности будут переданы на графический процессор. SVG в этом плане не повезло, при изменении path не получится задействовать графический процессор. При просмотре демо в Chrome можно наблюдать загрузку оперативной памяти и CPU из-за примененного CSS свойства transition. Без transition (просто мгновенная смена формы) производительность будет хорошая в любом браузере.

Автор: Chris Coyier

Источник: http://mediatemple.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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