Рисуем и анимируем svg-иконку в вебе | HTML, CSS

preview_player
Показать описание
В видео научимся рисовать и анимировать svg-иконку.
🪆 Russian YouTube: @webelart

  1. Елена Литвинова — Искусство Веб-разработки 🛸
  2. #анимация
  3. #svg
  4. #js
Рекомендации по теме
Рисуем и анимируем 0:32:14

Рисуем и анимируем svg-иконку в вебе | HTML, CSS

Рисуем и анимируем 0:49:18

Рисуем и анимируем svg-текст в вебе | HTML, CSS

✍️ Как анимировать 0:00:47

✍️ Как анимировать SVG: Рисунок оживает на глазах! #программирование #вебразработка...

Тильда. Анимация иконок. 0:10:31

Тильда. Анимация иконок. SVG Artista

#10. SVG для 0:04:58

#10. SVG для НАЧИНАЮЩИХ (Анимируем SVG через CSS keyframes)

SVG, большой гайд 1:36:05

SVG, большой гайд

Рисуем векторные SVG 0:15:31

Рисуем векторные SVG иконки быстро и легко в figma. Как сделать нужную толщину линий и разный цвет...

❌ CSS не 0:09:53

❌ CSS не нужен! Научишься анимировать любое статичное SVG изображение после этого видео...

Знакомство с Adobe 0:07:59

Знакомство с Adobe illustrator. Создание SVG иконки

SVG иконки. Изменение 0:09:19

SVG иконки. Изменение в CSS

Создание и анимация 0:05:25

Создание и анимация дополнительных версий SVG логотипа Loftblog...

Sparkol это легко 0:10:16

Sparkol это легко Как самому создать svg рисунок

Анимированный SVG Loader 0:14:43

Анимированный SVG Loader на CSS | Анимация SVG

Рисуем svg иконки 0:38:30

Рисуем svg иконки в Figma

Еще одна аху#### 0:12:49

Еще одна аху#### анимация на CSS и SVG

Как добиться эффекта 0:15:04

Как добиться эффекта рисования SVG кривых на Tilda

Разбираемся, как работает 0:14:19

Разбираемся, как работает анимация SMIL в SVG и копаемся во внутренностях построения...

SVG-анимация | Быстро 0:04:30

SVG-анимация | Быстро и легко

SVG анимация в 0:05:26

SVG анимация в Тильде

Дудл анимация на 0:05:10

Дудл анимация на сайте с помощью SVG

#2. SVG для 0:03:10

#2. SVG для НАЧИНАЮЩИХ (Что такое SVG)

SVG анимация: способы 0:02:21

SVG анимация: способы анимировать SVG /SVG Animation: the ways of animating SVG...

Уроки Front end 0:04:28

Уроки Front end | Анимация SVG

Рисуем SVG чистым 0:05:23

Рисуем SVG чистым кодом

Комментарии
Автор

Хороший ролик, я правда картинку не скачивал с алмазом, я нажал windows+shift+s и так сохранил, прямо с Вашего видео.

vasya
Автор

Спасибо Вам большое за такой замечательный урок!

ВиталийРябенко-зь
Автор

Спасибо большое за урок!! Очень пригодился, все доходчиво!))

KharlanAnya
Автор

Лён, а добавляй таймкоды к описаниям. Хочется по быстрому понять что там соберётся по итогу, но из длинного видео выбрать нужный момент очень тяжело.

adamovboris
Автор

Здравствуйте. Нужна ваша помощь. Не получается анимировать 3-линии... Если есть время напишите пожалуйста.

ballinari
Автор

Спасибо за видео. Скажите пожалуйста, обязательно ли закрывать слэшем одинарные теги и описывать атрибут type в теге script? Я читал, что в современных версиях браузеров это уже не актуально.

Shir-Na-Shir
Автор

Лена, спасибо за ролик, вопрос - а если более сложный jpeg в svg надо перевести, как нормальные люди это делают?…. Руками вот так делать неделю можно наверное :)

dirtyhandz