Loop
Trimmed gradient ellipses rotate around a radial core.
OpenAnimation
A Kotlin Multiplatform Lottie gallery turned inside out: source payloads, playback geometry, timing, and palette transformation are all visible on one page.
Lottie → geometry → motion
The production app loads JSON with Compottie, paints through Compose/Skia, and lets a user recolor an animation without editing every shape by hand. These three studies bundle the real JSON files and translate representative layers into lightweight inline SVG motion.
Why the translation? The deployed project contains no vendored lottie-web. Its renderer is the multi-megabyte Kotlin/Skia application runtime, so this dependency-free course uses auditable SVG adaptations while reading metadata and source colors directly from the original payloads.
- Source repo
openanimation- Production renderer
- Compottie + Compose/Skia
- Bundled payloads
- 3 Lottie JSON files
- License
- MIT, OpenAnimationApp (2025)
Airplane
Vector layers combine an outlined globe with a looping flight path.
Checkmark
Stroke reveal and staggered particles turn state change into feedback.
How the recolor engine works
The source map exposes the production implementation. It recursively finds every JSON key named c or g, decodes static and animated fills plus gradient stops into typed paint nodes, and remembers each node’s deep JSON path.
From the extracted paints it chooses five maximally different representative colors. Presets combine hue shifts in 45-degree steps with chroma shifts, transform every color in perceptual LCh space, then immutably replace each node at its recorded path. Animated keyframe start/end colors and gradient alpha stops are preserved.
Production idea: color is content in a Lottie document. Extract it structurally, transform it in a perceptual color space, and write it back without disturbing timing or geometry.
Source: openanimation/site/composeResources/openanimationapp.composeapp.generated.resources/files/ and Kotlin sources recovered from openAnimation.js.map. Software and bundled JSON are MIT licensed, © 2025 OpenAnimationApp. Playback on this page is a native-SVG course adaptation; no CDN or third-party runtime is loaded.