Changelog
O que já mudou
Registro do que foi implementado no strokit, do primeiro commit até agora: presets que saíram, funcionalidades novas, decisões de rumo.
Preview sem reinício a cada edição
A animação não volta mais ao início toda vez que você mexe no desenho. Mover, agrupar, excluir ou desfazer uma camada mantém a animação de onde ela estava. Ela só recomeça quando você clica em reiniciar, carrega outro SVG ou muda a própria animação (preset, etapa, duração, atraso ou parâmetros).
Selecionar e mover formas enquanto desenha
No modo Desenhar, clicar numa forma que já existe agora a seleciona (e arrastar a move), em vez de começar outra forma por cima. Uma forma nova só nasce onde não há nenhuma. Para desenhar por cima de uma forma, clique de novo na ferramenta que já está ativa.
Agrupar camadas
Selecione duas ou mais camadas e use o botão Agrupar do painel (ou Ctrl/Cmd+G) para juntá-las num grupo, como no Figma. Ctrl/Cmd+Shift+G desfaz o grupo. O grupo aparece no painel de camadas, move tudo junto ao arrastar e vai para o SVG e para o código exportado, com as animações intactas.
Arraste camadas no canvas
Agora dá para mover as camadas do SVG de lugar: clique numa camada e arraste no canvas (com várias selecionadas, todas vão juntas), ou use as setas do teclado (Shift move mais rápido). Esc cancela o arrasto e Ctrl/Cmd+Z desfaz o movimento. A posição vai para o SVG e para o código exportado, e as animações continuam funcionando.
Desfazer e refazer em tudo
Ctrl/Cmd+Z agora desfaz qualquer ajuste, não só o desenho: sliders, presets, etapas da sequência, cores e camadas excluídas. Ctrl/Cmd+Shift+Z (ou Ctrl+Y) refaz, e os botões na barra superior fazem o mesmo. Arrastar um slider conta como um único passo, e o histórico guarda os últimos 100.
Zoom e movimento no canvas
O canvas agora dá zoom e se move: role o mouse (ou faça o gesto de pinça) para aproximar e afastar, arraste o fundo — ou segure Espaço, ou use o botão do meio — para mover, e use os botões + e − ou as teclas + e −. O botão "Centralizar" (ou a tecla 0) volta tudo ao lugar. Funciona também enquanto você desenha, e o desenho cai exatamente onde você arrasta.
Editor mais enxuto
A barra superior ficou mais limpa: o nome do SVG foi para o topo do painel de camadas, idioma e tema agora ficam num único botão de preferências (em todas as páginas) e o compartilhar virou um ícone. As ferramentas de desenho flutuam no rodapé da área de edição, sempre à mão, como nos editores de design, e cada camada ganhou uma lixeira na lista. O interruptor de simular reduced motion foi removido.
Excluir camadas
Agora dá para excluir as camadas selecionadas com o botão de lixeira no painel "Camada" ou com Delete/Backspace. As outras camadas mantêm suas animações e ajustes, e um aviso com "Desfazer" traz tudo de volta. No modo Desenhar, Ctrl/Cmd+Z também desfaz.
Caneta para curvas precisas
No modo "Desenhar" agora há a caneta: clique para pôr pontos, arraste para puxar as alças e curvar, e clique no primeiro ponto para fechar a forma. Enter ou duplo clique termina, Backspace remove o último ponto e Esc descarta. Atalho: B.
Lápis livre
Agora dá para desenhar à mão livre no botão "Desenhar": é só arrastar no canvas. O traço é simplificado e suavizado em curvas, então sai limpo e leve no código exportado, e cada risco vira uma camada própria que você anima na ordem em que desenhou. Atalho: P.
Desenhe formas no editor
Novo botão "Desenhar": crie linhas, retângulos e elipses arrastando no canvas, direto sobre a sua logo ou numa tela em branco ("Criar do zero"). Shift mantém a proporção e Alt desenha a partir do centro. Escolha a cor e a espessura, desfaça e refaça (Ctrl/Cmd+Z), e cada forma já entra com a animação padrão e pode ser ajustada como qualquer camada.
Largura do traço consistente
A largura do traço agora é medida em % do tamanho do SVG, então o mesmo valor tem a mesma aparência num ícone pequeno e num logo grande (inclusive quando o SVG tem escala aplicada em grupos). O limite subiu para 100 e a largura que já vem no arquivo é mostrada corretamente, mesmo em unidades como mm. Projetos e links antigos abrem exatamente como antes.
Sequência de animações
Agora você pode encadear animações na mesma logo: por exemplo, desenhar e preencher e depois um brilho em loop. Na seção "Sequência" do editor você adiciona, reordena e remove etapas, e cada uma tem seus próprios ajustes. Só a última etapa repete para sempre. O código exportado (CSS, React e Motion), o vídeo e o link seguem a mesma ordem.
Novo preset: Brilho
Um reflexo de luz atravessa a logo como o brilho de uma moeda. Você escolhe a direção (direita, esquerda, cima ou baixo), a inclinação, a largura, a intensidade e a pausa entre um brilho e outro. O reflexo só aparece sobre as partes preenchidas e respeita a preferência de movimento reduzido.
Novos presets: Aparecer e Girar
Aparecer faz a logo inteira surgir com fade, sem contorno, deslizando para cima, para baixo ou para os lados. Girar faz a logo rodar em torno do centro, ótima para telas de carregamento. Em ambos você escolhe direção e ajustes; no Girar, também se gira a logo inteira ou cada peça.
Compartilhamento e busca melhorados
O site agora aparece com preview correto ao compartilhar (LinkedIn, WhatsApp) e está pronto para indexação no Google: sitemap, robots.txt e dados estruturados.
Presets mais enxutos
Os presets "Desenhar" e "Desenhar em sequência" saíram — o resultado visual era fraco. "Desenhar e preencher" passa a ser o preset padrão ao importar um SVG.
Seção Open Source na home
Link para o repositório, para abrir uma issue e para a licença MIT, direto na home. O menu e o rodapé também ganharam o link do GitHub.
Edição de camadas
Cor, espessura e ponto de partida do traço, ajustáveis por camada — com seleção direto no canvas e edição do markup do SVG.
Interface em três idiomas
strokit passa a estar disponível em português, inglês e espanhol.
Projeto open source
strokit é liberado sob a licença MIT, com README explicando a stack, os comandos e como contribuir.
Export React, Motion e compartilhamento
Componente React tipado, componente Motion, link de compartilhamento e download do arquivo de projeto (.strokit.json).
Exportação de vídeo
Vídeo .webm transparente, gerado direto no editor a partir da animação compilada.
Presets completos
Cometa, vai e vem, formigas marchando, desenhar e preencher e pulsar — com traço automático para logos que só têm preenchimento.
MVP do editor
Importar um SVG, aplicar um preset, ver o preview ao vivo e exportar CSS puro com zero runtime.