Animação de logo · código primeiro
Sua logo em movimento. Em código.
Arraste o SVG, escolha um efeito de traço e leve CSS puro, um componente React tipado ou Motion. Sem runtime, respeitando o tema e o prefers-reduced-motion.
01 — O problema
Animar uma logo não devia ser tão chato
Hoje você escolhe entre duas opções ruins.
Editores visuais
- — Feitos para designers, não para quem vive no código.
- — Exportar código limpo costuma ser pago.
- — Muitas vezes adicionam um player JS ao seu bundle.
- — Não conhecem seu tema, dark mode ou componentes.
Código na mão
stroke-dasharray: 347.21; /* ??? */
stroke-dashoffset: 347.21;
animation: draw 1.2s /* ok? */;Controle total, mas acertar comprimentos, atrasos e easing vira tentativa e erro.
O strokit fica no meio: você ajusta vendo o resultado e leva código que qualquer dev entende.
02 — Como funciona
Três passos. Nenhuma timeline.
- 01
Arraste o SVG
Solte a logo, escolha um arquivo ou cole o markup. Tudo é sanitizado e nada sai do seu navegador.
- 02
Escolha e ajuste
Cinco presets de traço, com duração, atraso, easing e curva personalizada. O preview é exatamente o código exportado.
- 03
Copie o código
CSS puro, componente React tipado ou Motion. Ou um vídeo .webm transparente.
03 — Playground
Mexa. O código muda junto.
Este preview roda o próprio strokit no seu navegador e mostra exatamente o CSS que ele gera.
04 — Exemplos
Só SVG. Só CSS.
Cada card é um componente exportado pelo strokit: nenhuma biblioteca de animação, nenhum JS rodando o movimento. Baixe o .svg ou abra no editor.
05 — O código
Código que você colaria no seu projeto
A mesma animação nos três formatos. Tudo gerado, nada editado à mão.
Zero runtime
O CSS é o próprio SVG com <style>. O React não depende de nada além de React.
Tema de verdade
Cores saem como var(--sk-stroke, …). Troque por currentColor e a logo segue seu tema.
Reduced motion
Todo export tem @media (prefers-reduced-motion) mostrando o quadro final.
Props sem re-render
speed, loop e paused viram variáveis CSS no componente React.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" width="120" height="120" class="sk-wxsyyl" role="img" aria-label="Anel"><style>
.sk-wxsyyl-0 {
stroke: var(--sk-stroke, #111111);
stroke-dasharray: 0.2 0.8;
animation: sk-wxsyyl-t0-comet 1600ms linear 0ms infinite normal both;
}
@keyframes sk-wxsyyl-t0-comet {
0% {
stroke-dashoffset: 1;
}
100% {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sk-wxsyyl * {
animation: none;
}
.sk-wxsyyl-0 {
stroke-dasharray: none;
}
}
</style><title>Anel</title><circle cx="60" cy="60" r="44" fill="none" stroke="#111111" stroke-width="8" pathLength="1" class="sk-wxsyyl-0"/><circle cx="60" cy="60" r="26" fill="none" stroke="#111111" stroke-width="4" pathLength="1" class="sk-wxsyyl-0"/></svg>
06 — Comparação honesta
Faz uma coisa. E faz em código.
O strokit não substitui ferramentas de motion design. Ele resolve o caso mais comum: dar vida ao traço de uma logo ou loader.
| Critério | strokit | SVGator | GSAP | Lottie |
|---|---|---|---|---|
| Como você cria | Presets + ajustes | Editor visual | Código na mão | After Effects |
| O que vai para o projeto | CSS / TSX legível | SVG exportado | Seu código + lib | JSON + player |
| JS extra no bundle | Nenhum (CSS/React) | Opcional | Biblioteca | Player |
| Cores do tema | var(--sk-stroke) | Limitado | Manual | Difícil |
| Reduced motion | Automático | Manual | Manual | Manual |
| Animações complexas | Não é o foco | Sim | Sim | Sim |
07 — Open source
Código aberto. Vem olhar por dentro.
O strokit é público no GitHub sob a licença MIT: use, copie, modifique e redistribua, inclusive comercialmente. O @strokit/core também serve de base para gerar animações de SVG fora do editor.
08 — Apoie
Gostou? Ajude o strokit a crescer.
O strokit é um projeto independente, gratuito e sem anúncios. Uma contribuição ajuda a manter o site no ar e a tirar do papel novos presets, o registry do shadcn e mais formatos de export.