Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ul><li>Заходим на figma.com и создаем новый файл;</li>

4 <li>Выбираем Pen или жмем клавишу P.</li>

5 </ul>Рисуем прямоугольник - жмем Done.

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

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

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

9 Теперь Bend Tool

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

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

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

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

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

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

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

17 </blockquote>=> start → finish → start → finish → ∞

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

19 <ul><li>Выделяем вектора;</li>

20 <li>Выбираем svg как расширение;</li>

21 <li>Жмем Export.</li>

22 </ul>Объедим два SVG в один анимированный

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

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

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

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

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

28 <ul><li>в start.svg ширина = 363, а в finish.svg = 364. Беру 364;</li>

29 <li>в start.svg высота = 302, а в finish.svg = 311. Беру 311.</li>

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

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

32 </blockquote>Вкладываем его внутрь path:

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

34 <ul><li>repeatCount - сколько раз произойдет анимация. Устанавливаем indefinite, чтобы задать бесконечное число итераций;</li>

35 <li>attributeName - имя атрибута, который будем анимировать. В нашем примере это d, где хранятся координаты фигуры;</li>

36 <li>dur - длительность анимации.</li>

37 </ul>Добавим еще один - values. Скопипастим в него значение атрибута d из текущего тега path:

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

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

40 <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>

41 Результат:

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

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

44 <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>

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