Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

Анимированный пузырь / SVG без использования JS и Canvas

Время чтения статьи ~4 минуты
Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Анимированный пузырь / SVG без использования JS и Canvas главное изображение

Сегодня научимся создавать вот такие вещи без JS и canvas:

Анимированный пузырь

Рисуем пузырь

  • Заходим на figma.com и создаем новый файл;
  • Выбираем Pen или жмем клавишу P.

pen

Рисуем прямоугольник — жмем Done.

Замыкаем первую и последнюю линию

Удалим обводку и заполним прямоугольник веселым цветом.

Жмем на минус чтобы удалить stroke, добавляем цвет в fill

Давайте наконец сделаем из квадрата то, что нам нужно.

Жмем кнопку Edit Object.

rectangle

Теперь Bend Tool

Bend Tool

Жмем на сторону квадрата. Должны появится вот такие точки:

start transform

Тянем одну из них вверх:

pull

Как видим — фигура искривляется. На этом мои глубокие познания в Figma и векторной графике кончаются. Поэтому просто проделываем подобный трюк для всех четырех точек.

Вот что получилось у меня

Отлично, пузырь готов. Он будет нашей «стартовой» позицией.

Скопируем его и поставим рядом.

Советую еще их переименовать для удобства

Снова жмем Edit Object — Bend Tool и немного меняем пузырь справа.

almost done

То, что получилось — это состояние фигуры, к которой будет стремится изначальная:

=> start → finish → start → finish → ∞

Скачаем, то что получилось:

  • Выделяем вектора;
  • Выбираем svg как расширение;
  • Жмем Export.

Скачиваем и распаковываем архив

Объедим два SVG в один анимированный

Откроем скачанные svg и создадим один новый:

Скопирую содержимое start в result:

В result.svg сделаю тег парным — :

Удалю атрибуты width и height, чтобы не мешались.

Во viewBox установлю максимально возможные значения высоты и ширины:

  • в start.svg ширина = 363, а в finish.svg = 364. Беру 364;
  • в start.svg высота = 302, а в finish.svg = 311. Беру 311.

Ключевой момент: анимировать будем с помощью тега animate.

Обратите внимание на поддержку браузеров!

Вкладываем его внутрь path:

Коротко по атрибутам:

  • repeatCount — сколько раз произойдет анимация. Устанавливаем indefinite, чтобы задать бесконечное число итераций;
  • attributeName — имя атрибута, который будем анимировать. В нашем примере это d, где хранятся координаты фигуры;
  • dur — длительность анимации.

Добавим еще один — values. Скопипастим в него значение атрибута d из текущего тега path:

Это те самые координаты, которые мы нарисовали в первом пузыре

Добавим в него же значение атрибута d из файла finish.svg:

После каждой координаты не забывайте точку с запятой;

Третьей строку копипастим из первой дабы замкнуть анимацию:

<animate repeatCount="indefinite" attributeName="d" dur="10s"
  values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
  M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
  M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>

Результат:

Как выглядит вы можете посмотреть в самом начале статьи.

Сюда же я скину сам svg:

<svg viewBox="0 0 364 311" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z" fill="#FFCC00">
    <animate repeatCount="indefinite" attributeName="d" dur="10s"
      values="M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;
        M302.348 71.5969C209 -48 69.1956 6.19389 41.3478 71.5969C13.5 137 -35.5 223 41.3478 273.597C118.196 324.194 233.195 322.694 302.348 273.597C371.5 224.5 395.695 191.194 302.348 71.5969Z;
        M314 46.0001C253 0 137 -28 52.9999 46.0001C-31.0001 120 -1.0002 202 52.9999 248C107 294 247 340 314 248C381 156 375 92.0001 314 46.0001Z;"></animate>
  </path>
</svg>

И codepen, где можно наглядней с ним ознакомиться.

Аватар пользователя filimonov
filimonov 02 ноября 2021
1
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 4 апреля
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время