# Shape Shifter: an SVG path morphing editor for Android and web icon animations

> Shape Shifter is a browser app for making two SVG paths compatible enough to morph between, and exporting the result as AnimatedVectorDrawable or SVG. It is aimed at engineers who receive icon files from designers and have to make the animation work.

**alexjlockwood/ShapeShifter** — SVG icon animation tool for Android, iOS, and the web

- Repository: https://github.com/alexjlockwood/ShapeShifter
- Website: https://shapeshifter.design
- Stars: 4,067 · Forks: 215
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-09-28 · Updated: 2026-09-28 · Language: en
- Canonical page: https://hysenlabs.com/projects/alexjlockwood-shapeshifter

## The path compatibility problem Shape Shifter targets

Path morphing requires the two SVG paths to share the same number and type of drawing commands. The README lists why that is hard to get from design tools: Sketch and Illustrator do not easily expose the order of points in a shape, so reordering them is awkward; design tools map to primitives that some platforms do not support, so a circle becomes a sequence of curves or arcs rather than a center and radius; and design tools cannot place multiple path points at the same location, which is a technique the README calls often necessary to make two shapes compatible. The README also notes that design tools give no easy way to see the in-between states of the morph.

The audience follows from that. This is not a tool for someone who wants to drop an animated icon into a page. It is for the engineer who receives two static icons and has to make one turn into the other, then ship the result as an Android AnimatedVectorDrawable or as SVG for the web. The README explicitly invites iOS and web developers to say how the app could be more useful to them, which suggests the Android export path is the one with the most history behind it.

## How the editor makes two paths compatible

The README describes four mechanisms. Points can be added to or removed from a path without changing its appearance, and added points can be dragged along the path and deleted with the keyboard. Points can be reversed or shifted in their relative order, which does not affect compatibility but does change how the animation looks. Incompatible pairs of SVG commands are converted automatically, so the README says there is no need to convert L commands into Q or A commands into C by hand. And an auto fix utility takes two incompatible paths and tries to make them compatible in an optimal way.

The README is direct about auto fix: depending on the complexity of the paths it may or may not produce a satisfying result, and further modification may be needed. That is the honest framing of a heuristic, and it is the part to plan around. Auto fix is a starting point, not a guarantee.

Under the hood the README says the graphics are powered by bezier curve approximations, with the SVG-related code under src/app/modules/editor/model/paths. Auto fix is an adaptation of the Needleman-Wunsch algorithm, which bioinformatics uses to align protein or nucleotide sequences; Shape Shifter aligns the individual SVG commands that make up each path instead. The implementation is in src/app/modules/editor/scripts/algorithms/AutoAwesome.ts. That is a sequence alignment problem, and it explains both the usefulness and the failure mode: alignment quality depends on how similar the two command sequences are to begin with.

## Running Shape Shifter locally with npm and Vite

Most readers will use the hosted app at shapeshifter.design and never build anything. The README gives build instructions for contributors. The first step is Node.js 24 or later and npm 11.10 or later; the README points at .nvmrc and warns that older releases of Node 24 ship an older npm. package.json agrees, with engines set to node >=24.15 and npm >=11.10.0.

If your npm is older than the required version, install a newer one globally before continuing. The README begins this command and notes that older releases of Node 24 come with an older npm:

```bash
npm install -g npm
```

Once the toolchain is in place, install dependencies and start the Vite dev server. The dev and start scripts are both `vite`, so either works.

```bash
npm install
npm start
```

The dev server prints a local URL, and that is where the editor loads. For a production build, the build script runs the typecheck first and then Vite:

```bash
npm run build
```

There is also a preview script for serving the built output, and a playground script that seeds a baseline file and opens the auto fix playground:

```bash
npm run preview
npm run playground
```

The playground script runs node scripts/playground-baseline.mjs with --if-missing before starting Vite, and it opens /src/playground/autofix/. That is the closest thing to a harness for evaluating auto fix on your own paths without going through the full editor UI.

## Where auto fix and the export formats fall short

The documented limitation is auto fix itself. The README says its output depends on path complexity and may not be satisfying, so point-level editing remains part of the workflow. There is no claim of a deterministic or always-correct result, and no documented way to undo an auto fix other than the editor's own history.

The export formats are another boundary. The README says the tool currently exports standalone SVGs and SVG spritesheets for the web, and AnimatedVectorDrawable for Android. The repository description mentions iOS, but the README's export list does not include an iOS format, and the README instead asks how the app could be made more useful for iOS developers. Treat iOS as an interest, not a documented output.

Release history is worth noting before you build a dependency on the code. The most recent listed release is v1.1.0 from 2018-07-29, while package.json declares version 2.0.0 and the last push to the repository was on 2026-09-28. The release tags are not tracking the current source. If you need a versioned artifact, the releases page will not give you one that matches what is on master today.

## Shape Shifter compared with hand-editing paths

The obvious alternative is editing the path data yourself in a text editor, which is what the README describes as the current practice: engineers tweak raw SVG path strings from designers before they can be morphed. The difference is not capability, since a determined engineer can add points, reorder them and rewrite commands by hand. The difference is feedback. Hand editing gives you no view of the in-between states of the morph, which the README names as one of the design tool gaps, and no automatic command conversion.

The second alternative is a general vector editor such as Sketch or Illustrator. Those tools are where the icons come from, and the README's complaint is precisely that they do not expose point order, cannot place two points at the same location, and do not visualize intermediate morph states. Using one of them for this job means fighting the same constraints the README lists.

A third option is a runtime animation library that interpolates between shapes without requiring compatible command lists. That trades the compatibility work for a different set of constraints, and it does not produce an AnimatedVectorDrawable, which is the output Android needs. Shape Shifter's value is that it targets that specific output format rather than animating in the browser at runtime.

## Licence and the cost of building on the source

Shape Shifter is Apache-2.0, in both the repository metadata and the license field of package.json. Apache-2.0 permits use, modification and distribution with the usual conditions around notices and the patent grant. This is not legal advice; read LICENSE in the repository if the terms matter to your organization.

package.json sets private to true, which means the package is not published to a registry from this configuration. There is no npm package to depend on. If you want Shape Shifter's path algorithms in your own toolchain, you would copy or vendor the code from src/app/modules/editor/model/paths and src/app/modules/editor/scripts/algorithms/AutoAwesome.ts, and then you own it.

Upgrade cost is the part that needs a decision. The dependency list is large and current, including React 19, MUI 9, Redux 5 and Vite, while the published releases stop at v1.1.0 in 2018. Anyone who builds from master inherits a modern frontend stack and an unpinned future. The deploy script is ./scripts/deploy-stable.sh, which suggests a single maintainer-controlled deployment rather than a release process you can hook into.

## A workflow that uses the tool for what it is good at

The practical shape of a session is: load the two icons, let the editor convert the incompatible commands, run auto fix, then inspect the intermediate frames. If auto fix produces something usable, export. If it does not, the README's point editing tools are the fallback, and the added points can be dragged along the path and deleted with the keyboard.

One caution about scope. The README says the author is open to other export formats and asks for feature requests, and separately asks how the app could be more useful for iOS and web developers. That is an invitation, not a roadmap. Do not plan around an export format that is not in the current list of standalone SVG, SVG spritesheet and AnimatedVectorDrawable.

The tool is also a client-side app with no documented server component. For teams with restrictions on uploading design assets, that is relevant: the hosted version at shapeshifter.design is the default, and running the Vite dev server locally is the documented way to keep the work on your own machine.

## Conclusion

Adopt Shape Shifter if you hand-tune SVG path strings so two icons can morph, and you want that work done in a browser with a live preview and an Android export path. Do not adopt it if you need a maintained library with a stable API, or if your icons come out of a pipeline that already emits compatible paths. Before committing, open the editor with your own two paths, run auto fix on them, and check whether the result is acceptable without further point editing; also confirm which export format you need, because the Android and web paths are separate outputs and the iOS story is not documented in the README.

## FAQ

### What is Shape Shifter?

It is a web app that simplifies creating icon animations for Android and the web, according to the README. It exports standalone SVGs and SVG spritesheets for the web, and AnimatedVectorDrawable format for Android.

### How do I use Shape Shifter?

Open the live app at shapeshifter.design, load your paths, and use the point editing tools and auto fix to make them compatible before exporting. The README also documents a local build with Node.js 24 or later and npm 11.10 or later.

### Which export formats does Shape Shifter support?

The README lists standalone SVGs and SVG spritesheets for the web, plus AnimatedVectorDrawable for Android. The README says the author is open to adding other export formats and asks for feature requests.

### What does auto fix do in Shape Shifter, and is it reliable?

Auto fix takes two incompatible paths and attempts to make them compatible in an optimal way, using an adaptation of the Needleman-Wunsch sequence alignment algorithm. The README states that depending on path complexity it may or may not generate a satisfying result, so further modification may be necessary.

### What Node.js version does Shape Shifter need to run locally?

The README says to install Node.js 24 or later, referencing .nvmrc, and npm 11.10 or later. package.json sets engines to node >=24.15 and npm >=11.10.0.

### Is there a published Shape Shifter package I can install?

package.json sets private to true, so this configuration does not publish the package to a registry. The documented way to run it is from the repository with npm install and npm start.

## Sources

- [alexjlockwood/ShapeShifter on GitHub](https://github.com/alexjlockwood/ShapeShifter)
- [License: Apache-2.0](https://github.com/alexjlockwood/ShapeShifter/blob/master/LICENSE)
- [Project website](https://shapeshifter.design)
- [README](https://github.com/alexjlockwood/ShapeShifter/blob/master/README.md)
- [Releases](https://github.com/alexjlockwood/ShapeShifter/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/alexjlockwood-shapeshifter