Overview

A hand-traced SVG icon library covering 7 modern fighter airframes — F-14, F-15, F-16, F-22, F-35, FA-18, and YF-23 — each rendered in front, top, side, and isometric views.

Technical Approach

The system prioritizes performance and visual consistency over photorealism. Each airframe is traced from reference imagery and simplified to clean, geometric paths.

Key Decisions

  • SVG over 3D — Eliminated Three.js/GLTF pipeline for faster loads and smaller bundles
  • Component-per-view — Each view is its own React component for tree-shaking
  • Dual export — Raw .svg files in /public for animation, React components for UI

Animations

The SVGs power several animation techniques:

  1. Line drawing — pathLength animations reveal each airframe stroke-by-stroke
  2. Staggered reveals — Grid entries animate in sequence with glow trails
  3. HUD overlays — Radar sweeps and target locks composited over airframe views

Results

The final system delivers sub-50KB total SVG payload for all 28 views, with instant rendering and smooth 60fps animations across devices.