# alexjlockwood/shapeshifter

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/alexjlockwood-shapeshifter).**

4,070 stars · 212 forks · TypeScript · Apache-2.0

## Links

- GitHub: https://github.com/alexjlockwood/ShapeShifter
- Homepage: https://shapeshifter.design
- awesome-repositories: https://awesome-repositories.com/repository/alexjlockwood-shapeshifter.md

## Topics

`android` `angular` `animated-vector-drawable` `icon-animations` `ios` `svg` `typescript`

## Description

ShapeShifter is a visual editor and utility for creating morphing animations between SVG vector paths. It serves as an interpolation editor that allows for the alignment and modification of vector points to produce fluid transitions between different shapes.

The project functions as a cross-platform vector asset generator, exporting animation data as spritesheets and drawable files for use on Android, iOS, and web platforms. It specializes in converting disparate SVG path commands into a unified format to ensure a one-to-one point mapping between shapes.

The tool includes capabilities for path alignment optimization and command standardization to synchronize incompatible path structures. It also provides file management for loading vector graphics and saving configured morph sequences.

## Tags

### Graphics & Multimedia

- [Path Morphing](https://awesome-repositories.com/f/graphics-multimedia/path-morphing.md) — Provides the core engine for interpolating point arrays between two vector paths to create fluid shape transitions.
- [Point Synchronization Heuristics](https://awesome-repositories.com/f/graphics-multimedia/coordinate-based-vector-processing/svg-path-calculations/bezier-path-point-calculators/path-point-manipulation/point-synchronization-heuristics.md) — Automatically adds or removes vector points to synchronize the structural complexity of incompatible paths.
- [Cross-Platform Graphics Frameworks](https://awesome-repositories.com/f/graphics-multimedia/cross-platform-graphics-frameworks.md) — Enables the creation of consistent SVG animations that operate across Android, iOS, and web platforms.
- [Morph Alignment Utilities](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/shape-drawing/morph-alignment-utilities.md) — Analyzes and aligns incompatible path structures to prevent distortion and improve morphing quality. ([source](https://cdn.jsdelivr.net/gh/alexjlockwood/shapeshifter@master/README.md))
- [Path Interpolation Editors](https://awesome-repositories.com/f/graphics-multimedia/path-interpolation-editors.md) — Provides a tool to align and modify vector points to ensure smooth morphing animations.
- [Cross-Platform Animation Formats](https://awesome-repositories.com/f/graphics-multimedia/svg-image-exports/animated-svg-gif-exports/cross-platform-animation-formats.md) — Produces spritesheets, keyframes, and drawable files for cross-platform operating system support. ([source](https://cdn.jsdelivr.net/gh/alexjlockwood/shapeshifter@master/README.md))
- [SVG Path Animations](https://awesome-repositories.com/f/graphics-multimedia/svg-path-animations.md) — Provides a visual editor for creating fluid transitions and morphing between SVG vector paths.
- [SVG Path Command Mappings](https://awesome-repositories.com/f/graphics-multimedia/svg-path-command-mappings.md) — Implements a system to map disparate SVG path commands into a unified format for consistent point mapping.
- [Vector Asset Generators](https://awesome-repositories.com/f/graphics-multimedia/vector-asset-generators.md) — Exports SVG animation data as spritesheets and drawable files for Android, iOS, and web platforms.
- [Keyframe Animations](https://awesome-repositories.com/f/graphics-multimedia/media-production-suites/animation-tools/keyframe-skeletal-systems/keyframe-animations.md) — Generates motion by mapping specific vector states to a timeline of interpolated keyframes.

### Development Tools & Productivity

- [Vector Animation Assets](https://awesome-repositories.com/f/development-tools-productivity/cross-platform-build-pipelines/vector-animation-assets.md) — Serializes animation sequences into platform-specific formats like Android drawables, iOS files, and web spritesheets.

### User Interface & Experience

- [Animated Icons](https://awesome-repositories.com/f/user-interface-experience/icon-sets/animated-icons.md) — Creates fluid transitions between vector shapes to produce animated icons for mobile and web interfaces.
- [Motion Design Systems](https://awesome-repositories.com/f/user-interface-experience/motion-design-systems.md) — Supports a motion design workflow by exporting animation data like spritesheets and keyframes for UI use.