Componente SwiftUI que desenha o contorno de um logo como uma caneta e depois revela o
preenchimento. E o processo, com scripts, pra transformar o PNG de um logo num Shape
limpo o bastante pra essa animação ficar bonita.
SwiftUI component that traces a logo's outline and then reveals its fill, plus a
reproducible pipeline (Python + macOS render check) to turn a logo PNG into a clean
Shape. Docs are in Brazilian Portuguese.
Swift Package: adicione https://github.com/RhuanCruz/swiftui-logo-draw e importe LogoDraw.
Ou copie Sources/LogoDraw/LogoDraw.swift pro seu projeto (é um arquivo só).
import LogoDraw
LogoDraw(RunnerLogoShape())
LogoDraw(
MeuLogoShape(),
drawDuration: 1.2, // duração do traço
fillStartPercent: 70, // o preenchimento começa aos 70% do traço
size: 150,
outlineColor: .primary,
fillColor: .primary,
freezeAt: nil // 0...1 congela num frame (bom pra screenshot)
) {
// preenchimento terminou: fecha a splash, mostra a wordmark, etc.
}| Parâmetro | Default | O que faz |
|---|---|---|
drawDuration |
1.2 s | duração do traço (0.3...4) |
drawEasing |
.smooth |
.snappy, .smooth, .easeInOut, .linear |
fillsLogo |
true |
false deixa só o contorno |
fillStartPercent |
70 | quando o fill começa, em % do traço |
fillDuration |
0.35 s | fade do fill |
size |
160 | lado do quadrado |
strokeWidth |
1.5 | espessura do contorno |
replayTrigger |
0 | mude pra tocar de novo |
freezeAt |
nil |
progresso fixo em vez de animar |
onComplete |
nil |
chamado quando termina |
Reduce Motion: o logo aparece completo e onComplete dispara na hora.
O Shape que você passa precisa ter os subpaths na ordem em que quer que sejam desenhados
e um contorno sem auto-interseção. RunnerLogoShape é o exemplo que veio junto: um
corredor reconstruído a partir de um PNG com 96% de fidelidade.
O componente é a parte fácil. O difícil é ter o logo como Path limpo. O processo está
documentado em dois lugares:
docs/COMO-FOI-FEITO.md: a história do exemplo, com os números.skill/logo-to-swiftui-draw/: uma skill pra Claude Code (ou pra você) com o workflow passo a passo e os scripts:
| Script | Faz |
|---|---|
measure.py |
componentes, bboxes e runs por linha/coluna do PNG |
geometry.py |
primitivas (fillet, arco, círculo) iguais às do Path |
models/runner.py |
o modelo paramétrico do exemplo |
tune.py |
IoU contra a imagem, overlay e ajuste automático dos parâmetros |
render_shape.sh |
renderiza um Shape Swift em PNG no macOS, sem simulador |
compare.py |
IoU do render Swift contra a imagem original |
Pra instalar a skill no Claude Code: copie (ou symlinke) skill/logo-to-swiftui-draw
pra ~/.claude/skills/.
- Swift 5.9+, iOS 17 / macOS 14 (o componente usa
Task.sleep(for:)e.task(id:)). - Scripts: Python 3 com
numpy,pillow,scipy; Xcode prorender_shape.sh.
MIT. O símbolo do corredor em RunnerLogoShape está aqui como exemplo do processo.