Home

Awesome

Shape Shifter

Build Status Coverage Status GitHub Stats

Go to live version or ask a question on Slack


Shape Shifter is a web-app that simplifies the creation of icon animations for Android, iOS, and the web.

This tool currently exports to standalone SVGs, SVG spritesheets, and CSS keyframe animations for the web, as well as to AnimatedVectorDrawable format for Android. I am totally open to adding support for other export formats as well, so if you have a format that you'd like to see added in the future, file a feature request!

Try out the beta version, which adds the ability to draw/edit paths directly on the canvas (written using the amazing paper.js library)!

Screen capture of tool

Backers

Support us with either a one time donation or a monthly donation and help us continue our activities. Funds will go towards hiring new developers to work on awesome features! We'll display your logo below with a link to your site.

<a href="https://opencollective.com/shapeshifter#backers" target="_blank"><img src="https://opencollective.com/shapeshifter/backers.svg?width=890"></a>

🙏 Become a backer 🙏

Sponsors

Is your company using Shape Shifter? Ask your manager to support us! We'll display your logo below with a link to your site.

🙏 Become a sponsor 🙏

Examples

I gave a couple of live demos that illustrate how to use the tool at Droidcon SF (15:15 - 20:33):

In-depth path morphing with Shape Shifter

Here are some example icon animations created by Shape Shifter:

<img src="art/expandcollapse.gif" alt="Expand to collapse animation" width="216px"/><img src="art/moreback.gif" alt="Overflow to back arrow animation" width="216px"/><img src="art/playpausestop.gif" alt="Play-pause-stop animation" width="216px"/><img src="art/animals.gif" alt="Animals animation" width="216px" vspace="34px"/><!--<img src="art/plusminus.gif" alt="Plus-to-minus animation" width="216px"/><img src="art/cast.gif" alt="Cast animation" width="216px"/><img src="art/drawerarrow.gif" alt="Drawer-to-arrow animation" width="216px"/><img src="art/digits.gif" alt="Digits animation" width="216px"/>-->

Problem

Writing high-quality path morphing animations is a tedious and time-consuming task. In order to morph one shape into another, the SVG paths describing the two must be compatible with each other—that is, they need to have the same number and type of drawing commands. This is problematic because:

Features

To address these problems, Shape Shifter provides the following features:

How does it work?

Pretty much all of the graphics in this app are powered by bezier curve approximations under-the-hood. I learned most of what I needed to know from this excellent primer on bezier curves (especially sections 9 and 33, which explain how to split and project points onto bezier curves without altering their original appearance). Most of the interesting SVG-related code is located under src/app/model/paths.

Auto fix is powered by an adaptation of the Needleman-Wunsch algorithm, which is used in bioinformatics to align protein or nucleotide sequences. Instead of aligning DNA base-pairs, Shape Shifter aligns the individual SVG commands that make up each path instead. You can view the current implementation of the algorithm in the AutoAwesome.ts file.

Bug reports & feature requests

Let me know if you encounter any issues with the app (attach SVG files and/or screenshots if you can). Before you do, take a look at the list of known issues here and leave a comment on the existing bugs you want to see fixed in a future release!

I am open to pretty much any feature request, so don't be afraid to ask! I'll likely work on the most popular feature requests first. I'm especially curious how I can make this web app more useful for iOS and web developers.

Build instructions

If you want to contribute, you can build and serve the web app locally as follows:

  1. First install Node.js and npm.

  2. Clone the repository and in the root directory, run:

    npm install
    
  3. To build and serve the web app locally, run:

    npm start
    

Special thanks

Huge thanks to Nick Butcher, Roman Nurik, and Steph Yim for all of their help during the early stages of this project!