Uma ferramenta para criar animações com arquivos SVG


Há um site que se destaca pela animação de seu logo: animista.net, uma ferramenta de design que podemos usar para criar animações CSS sem precisar de programação.

Após vários usuários perguntarem como conseguiram animar o arquivo SVG em sua página inicial, os responsáveis ​​começaram a trabalhar em um projeto para ajudar a fazer exatamente isso: criar animações a partir de um SVG.

Leia também:PARA QUEM BUSCA ANIMAÇÕES FEITAS COM CSS

O resultado é svgartista.net, uma ferramenta que simplifica o processo de criação da animação que animista tem na sua página e que acabou superando sua ideia principal, se transformando em um projeto separado.

O SVG Artist ajuda a animar as propriedades de traço e preenchimento, em imagens SVG com um código CSS simples. 

A ferramenta gera o CSS necessário e atualiza o código SVG para que possa ser facilmente animado, atribuindo a classe .active ao elemento SVG. Não depende de bibliotecas JS de terceiros para funcionar, embora, provavelmente, acabemos usando alguns para definir dinamicamente a classe .active em algum tipo de acionador (por exemplo, na exibição de rolagem).

Leia também:KEYFRAMES, UM EDITOR ONLINE PARA CRIAR ANIMAÇÕES EM CSS

O resultado deve funcionar em todos os navegadores modernos.

O código gerado pelo SVG Artist não tem garantia de nenhum tipo, por isso, é aconselhável experimentá-lo bem antes de colocá-lo em produção.