swiftui-logo-draw README

The project's README from github.com/RhuanCruz/swiftui-logo-draw. As one markdown file: README.md.

LogoDraw

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.

frames do desenho

Uso

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.

Do PNG ao Shape

O componente é a parte fácil. O difícil é ter o logo como Path limpo. O processo está documentado em dois lugares:

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/.

Requisitos

Licença

MIT. O símbolo do corredor em RunnerLogoShape está aqui como exemplo do processo.

swiftui-logo-draw (RhuanCruz/swiftui-logo-draw)

swift-package-manager
Searching Database…

160 ·GitHub
Swiftui-logo-draw
What is this?LogoDraw is a SwiftUI component that traces a logo's outline like a pen and then reveals its fill, paired with a reproducible Python + macOS pipeline for turning a logo PNG into a clean SwiftUI Shape.
Is this a full app or just a SwiftUI component?It's a single-file SwiftUI component (LogoDraw.swift) you drop into a project or add via Swift Package Manager; there's no standalone app. The PNG-to-Shape conversion is a separate set of Python scripts, not a GUI tool.
How do I add it to my SwiftUI project?Add it as a Swift Package and import LogoDraw, or just copy the single file Sources/LogoDraw/LogoDraw.swift directly into your project.
What do I need to run the PNG-to-Shape conversion scripts?The component itself needs Swift 5.9+ with iOS 17 / macOS 14 (uses Task.sleep(for:) and .task(id:)). The conversion scripts need Python 3 with numpy, pillow and scipy, plus Xcode for rendershape.sh which renders Shapes without a simulator.
Does any logo Shape work with the draw animation?No — the Shape you pass must have its subpaths in the exact order you want them drawn and a clean outline with no self-intersections; getting a logo to that state is the hard part the pipeline exists for.
What minimum iOS and macOS versions does it need?It requires iOS 17 and macOS 14 at minimum, since the animation relies on Task.sleep(for:) and .task(id:).
What is RunnerLogoShape?It's the bundled example — a runner icon reconstructed from a PNG into a SwiftUI Shape with 96% fidelity, used to demonstrate the whole PNG-to-Shape pipeline.
What does the included Claude Code skill actually do?skill/logo-to-swiftui-draw packages the measure/geometry/tune workflow as a step-by-step skill; you install it by copying or symlinking the folder into ~/.claude/skills/.
What happens if Reduce Motion is enabled?The logo renders fully drawn immediately instead of animating, and the onComplete callback fires right away.
How does the tuning script check if the Shape matches the original logo?tune.py computes IoU (intersection-over-union) between the rendered Swift Shape and the source PNG, producing an overlay and auto-adjusting parameters to improve the match.
What are similar projects?ChunUI, lottie-ios, FSCalendar, Spring, AirCard-macOS, chameleon, folding-cell, SVProgressHUD
Which topics is it in?swift-package-manager, xcode, claude-code-skill, apple, component-library, design, image-processing, swift, ui-components, animation, customization, ui
Creator
RhuanCruz
Size
0.1 MB
Stars
160
Updated
CommitSep 05
Age
1mo
Commits · 90 Days