Как создать анимацию логотипа в SVG?

1
2
Следующая
Показаны 1-15 из 16

#1 26 января 2017 в 22:44

Вот есть некая статья по анимации www.creative-seo.ru/blog/animaciya-logotipa-svg/

но никак не пойму как создавать анимацию. где прорисовывать кадры анимации. Может есть у кого опыт, поделитесь информацией и примерами.

#2 26 января 2017 в 22:55

многие ссылаются на некий скрипт snapsvg.io/ — но вообще никак не пойму как им пользоваться.

#3 26 января 2017 в 22:57

yury,
Вы только учитывайте, что яваскрипты работают на стороне клиента. И вся нагрузка ложится на машину пользователя.
Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать…

Сегодня в 15:33

#4 26 января 2017 в 23:12

yury,
Вы только учитывайте, что яваскрипты работают на стороне клиента. И вся нагрузка ложится на машину пользователя.
Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать...

Ris

думаю для анимации логотипа не понадобится особо ресурсов. а судя по описаниям по тому скрипту, там все очень легко. но вот мой мозг никак не может понять как этим пользоваться.

#5 26 января 2017 в 23:15

Я однажды нашел фон для сайта с летающими пузырями, которые можно лопать кликом.
Сидел, чпокал, пока от вентилятора ноута не начали лопасти отлетать...
Ris

#6 26 января 2017 в 23:56

но никак не пойму как создавать анимацию. где прорисовывать кадры анимации.
yury

Для этого придётся покурить не мало.
На этих ресурсах про синтаксис
Здесь пример(на буржуйском), но код есть код
Рисуешь картинку в редакторе в клеточку, задаёшь координаты каждой точке и прописываешь в path.И далее по примеру.

#7 27 января 2017 в 08:43

но никак не пойму как создавать анимацию. где прорисовывать кадры анимации.
yury
Для этого придётся покурить не мало.
На этих ресурсах про синтаксис
Здесь пример(на буржуйском), но код есть код
Рисуешь картинку в редакторе в клеточку, задаёшь координаты каждой точке и прописываешь в path.И далее по примеру.

Lora

неужели эти все цифры пишутся вручную? адоб уже верстку по сути из картинки делает, криво но делает. не уж то нет автоматизированного сервиса?(

#8 27 января 2017 в 08:49

не уж то челвоек как то вручную вычислял все координаты webix.pro/svg/spravochnik/elementy/path.html? если да, то как это можно сделать, какой прогой или сервисом?

#9 27 января 2017 в 09:35

не уж то челвоек как то вручную вычислял все координаты
yury

Ну в данном примере можно и вручную, не так и долго. А вообще можете написать js скрипт, или найти, который будет переводить координаты мышки в svg координаты.И кликайте себе на здоровье smile

#10 27 января 2017 в 09:40

Adobe Edge Animate

#11 27 января 2017 в 09:42

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

#12 27 января 2017 в 10:16

вот такой код как получить

<svg id="logo_svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 149 48" enable-background="new 0 0 149 48" xml:space="preserve">
<path id="logo_h" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF" d="M17,39h-6V9h6l0,12l18,0V9h6v30h-6V27H17V39z"></path>
                            <path id="logo_other" fill="#FFFFFF" d="M149,39C149,39,119,39,119,39C119,39,119,9,119,9C119,9,149,9,149,9M149,9C149,9,149,15,149,15C149,15,125,15,125,15C125,15,125,33,125,33C125,33,143,33,143,33C143,33,143,27,143,27C143,27,131,27,131,27C131,27,131,21,131,21C131,21,149,21,149,21C149,21,149,39,149,39C149,39,149,39,149,39M113,33C113,33,113,15,113,15C113,15,107,15,107,15C107,15,107,33,107,33C107,33,113,33,113,33C113,33,113,33,113,33M59,39C59,39,65,39,65,39C65,39,65,15,65,15C65,15,77,15,77,15C77,15,77,9,77,9C77,9,47,9,47,9C47,9,47,15,47,15C47,15,59,15,59,15C59,15,59,39,59,39C59,39,59,39,59,39M107,33C107,33,89,33,89,33C89,33,89,15,89,15C89,15,107,15,107,15C107,15,107,9,107,9C107,9,83,9,83,9C83,9,83,39,83,39C83,39,107,39,107,39C107,39,107,33,107,33C107,33,107,33,107,33"></path>
                           <defs></defs></svg>

#13 27 января 2017 в 12:36

вот такой код как получить
yury

в кореле рисуете и сохраняете в svg, потом этот файл через любой редактор открыть там и будет код

#14 27 января 2017 в 18:56

в кореле рисуете и сохраняете в svg, потом этот файл через любой редактор открыть там и будет код
Kokshetimes

в иллюстраторе делал, но код оооочень большой получается на выходе. в кореле меньше?

#15 20 марта 2017 в 12:51

Оказывается можно и в inkscape svg анимашки готовить

пример

1
2
Следующая
Показаны 1-15 из 16

Фото картинки

Нужен совет по корректировке с

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Как создать анимацию логотипа в SVG?

Похожие темы

[ЕСТЬ РЕШЕНИЕ] Замена логотипа через виджет текстом с помощью svg

Качество загружаемых картинок (логотипа)

исчезла форма регистрации и логотип "InstantCMS"

Логотип

Анимация для сайта

[ЗАКРЫТО] Анимация горения свечи

InstantCMS Team

О проекте

Поддержка

Дополнения