| Reference | SwiftUI recreation |
|---|---|
 |
 |
Kanken is a compact SwiftUI drawing study that recreates a gray-green camouflage Fjällräven Kånken backpack. The app builds the entire illustration in code with Canvas, Path, gradients, strokes, and text—no product image is displayed at runtime.
- Scalable vector-style drawing based on a 600 × 800 coordinate system
- Hand-placed camouflage shapes with deterministic woven-fabric texture
- Layered body panels, handles, webbing, zippers, piping, shadows, and stitching
- Curved badge lettering and a custom arctic fox silhouette
- Responsive sizing that keeps the backpack centered and fully visible
- VoiceOver description for the finished illustration
Requirements:
- Xcode 27 or later
- iOS 27.0 or later
Clone the repository and open the Xcode project:
git clone https://github.com/PeterPanSwift/Kanken.git
cd Kanken
open Kanken.xcodeprojSelect an iPhone simulator or device, then run the Kanken scheme.
KankenDrawing hosts a SwiftUI Canvas and scales a fixed drawing coordinate system to the available space. KankenIllustrator then paints the backpack from back to front: side panels, body, top panel, handles, badge, front pocket, and webbing. Reusable path helpers create smooth camouflage contours and consistent fabric details.
Kanken/
├── Kanken/
│ ├── KankenApp.swift
│ ├── ContentView.swift
│ └── KankenDrawing.swift
├── Documentation/Images/
└── Kanken.xcodeproj/
This is an independent SwiftUI drawing exercise inspired by the visual design of the Fjällräven Kånken backpack. Fjällräven and Kånken are trademarks of their respective owners. This project is not affiliated with or endorsed by Fjällräven.
Kanken 是一個精簡的 SwiftUI 繪圖練習，以程式重現灰綠迷彩 Fjällräven Kånken 背包。App 執行時不顯示產品圖片，而是完全使用 Canvas、Path、漸層、線條與文字組成插畫。
- 以 600 × 800 座標系統建立可縮放的向量風格繪圖
- 手工配置迷彩色塊，搭配固定且細緻的布料編織紋理
- 分層繪製包身、提把、織帶、拉鍊、滾邊、陰影與車縫線
- 使用弧形文字與自訂北極狐輪廓重現圓形標誌
- 響應式尺寸設計，讓背包保持置中並完整顯示
- 為完成的插畫提供 VoiceOver 說明
需求：
- Xcode 27 或更新版本
- iOS 27.0 或更新版本
複製 repository 並開啟 Xcode 專案：
git clone https://github.com/PeterPanSwift/Kanken.git
cd Kanken
open Kanken.xcodeproj選擇 iPhone 模擬器或實機，接著執行 Kanken scheme。
KankenDrawing 以 SwiftUI Canvas 承載繪圖，並將固定座標系統縮放到可用空間。KankenIllustrator 依序由後向前繪製側邊、包身、頂部、提把、標誌、前袋與織帶。共用的路徑輔助方法負責產生平滑迷彩輪廓與一致的布料細節。
Kanken/
├── Kanken/
│ ├── KankenApp.swift
│ ├── ContentView.swift
│ └── KankenDrawing.swift
├── Documentation/Images/
└── Kanken.xcodeproj/
這是以 Fjällräven Kånken 背包視覺設計為靈感的獨立 SwiftUI 繪圖練習。Fjällräven 與 Kånken 為其權利人所有的商標；本專案與 Fjällräven 無關，亦未獲其背書。